亲宝软件园·资讯

展开

有趣的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%的动画使阴影扩散变大 颜色变浅,从而模仿水波扩散的效果)

 

 

 

 

加载全部内容

相关教程
猜你喜欢
用户评论