有趣的css3实战案例剖析——(水纹波动)
林文权 人气:3对于css3的学习,更多的是在于对新特性和基础理论的熟悉,
这篇文章通过一个案例带领大家了解css3里一些理论知识,也将一些技巧加以总结,从而提高大家的开发效率;
本次案例为(水纹波动),不用js写动画,只要善于运用css3就能实现水纹层层扩散的效果。
<<!DOCTYPE html> <html> <head> <style> .wave { margin-left: auto; margin-right: auto; width: 100px; height: 100px; border-radius: 100px; border: 2px solid #fff; line-height: 100px; background: #06c no-repeat center center; background-size: 100%; animation: wave 4s linear infinite; } @keyframes wave { 0% { box-shadow: 0 0 0 0 rgba(245, 226, 226, 1), 0 0 0 0 rgba(250, 189, 189, 1); } 50% { box-shadow: 0 0 0 20px rgba(245, 226, 226, .5), 0 0 0 10px rgba(250, 189, 189, 1); } 100% { box-shadow: 0 0 0 40px rgba(245, 226, 226, 0), 0 0 0 20px rgba(245, 226, 226, 0); } } </style> <title>水纹波动特效</title> </head> <body> <div class="wave"></div> </body> </html>
- 主要重难点:
1. border-radius ( 给div元素添加圆角的边框 )
属性:可以设置四个角的“圆润”程度,四个值的顺序是:左上角,右上角,右下角,左下角。;
border-top-left-radius:2em; border-top-right-radius:2em; border-bottom-right-radius:2em; border-bottom-left-radius:2em;
也可以简写 以左上,右上,右下,左下 为顺序,省略的 和它的对角相同;
2. animation (动画属性)
有六个属性,案例中按顺序简写。
案例中用到的属性:
animation-name:keyframename ;(规定需要绑定到选择器的 keyframe 的名称)
animation-duration: time; (规定动画播放时间)
animation-timing-function:linear;(动画从头到尾的速度是相同的)
animation-iteration-count: infinite;(规定动画应该无限次播放)
@keyframes (以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。 0% 是动画的开始时间,100% 动画的结束时间)
3. box-shadow (向框添加一个或多个阴影)
box-shadow: h-shadow v-shadow blur spread color inset;
(中间利用 “,” 制造两个阴影,再运用0% 50% 100%的动画使阴影扩散变大 颜色变浅,从而模仿水波扩散的效果)
加载全部内容