本文主要包含css3毛玻璃效果,css3 毛玻璃,css3动画效果,css3阴影效果,css3过渡效果等相关知识,crper 希望在学习及工作中可以帮助到您
简介
这个效果是在看CSS Secrets这书上看到的,感觉很不错;
实现原理也挺简单的;
效果图及实现
效果图
代码实现
</div>- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- /**
- * 设置背景图全屏覆盖及固定
- * 设置内部元素偏移
- */
- body {
- /*此处背景图自行替换*/
- background: url(demo.jpg) no-repeat center center fixed;
- background-size: cover;
- min-height: 100vh;
- box-sizing: border-box;
- margin: 0;
- padding-top: calc(50vh - 6em);
- font: 150%/1.6 Baskerville, Palatino, serif;
- }
- /**
- * 整体居中功能；
- * 背景透明虚化
- * 溢出隐藏
- * 边缘圆角化
- * 文字增加淡阴影
- */
- .description{
- position: relative;
- margin: 0 auto;
- padding: 1em;
- max-width: 23em;