一个简单版的波纹css3动画
2016-05-10 16:46
465 查看
ul{width: 300px;border: red;}
ul li{width: 300px;height: 70px;line-height: 70px;background: #fff;text-align: center;cursor: pointer;overflow: hidden;border: 1px solid #eee;}
ul li:hover .circle{
animation: circle-opacity 0.5s linear 0s 1;
-webkit-animation-fill-mode:forwards;/*让动画停在最后是这个属性,*/
animation-fill-mode:forwards;
}
ul li a{position: relative;left: -50px;color: #333;top: -30px;}
.circle{background: #fff;border-radius: 50%;width: 70px;height: 70px;display: inline-block;margin: 0 auto;}
@keyframes circle-opacity{
0% {
background: rgba(192,225,250,0);
}
50% {
transform:scale(4);
background: rgba(192,225,250,1);
}
100% {
transform:scale(16);
background: rgba(192,225,250,0);
}
}
<ul class="clear">
<li><span class="circle"></span><a href="#">Button</a></li>
<li><span class="circle"></span><a href="#">Elements</a></li>
<li><span class="circle"></span><a href="#">Forms</a></li>
<li><span class="circle"></span><a href="#">Charts</a></li>
</ul>
ul li{width: 300px;height: 70px;line-height: 70px;background: #fff;text-align: center;cursor: pointer;overflow: hidden;border: 1px solid #eee;}
ul li:hover .circle{
animation: circle-opacity 0.5s linear 0s 1;
-webkit-animation-fill-mode:forwards;/*让动画停在最后是这个属性,*/
animation-fill-mode:forwards;
}
ul li a{position: relative;left: -50px;color: #333;top: -30px;}
.circle{background: #fff;border-radius: 50%;width: 70px;height: 70px;display: inline-block;margin: 0 auto;}
@keyframes circle-opacity{
0% {
background: rgba(192,225,250,0);
}
50% {
transform:scale(4);
background: rgba(192,225,250,1);
}
100% {
transform:scale(16);
background: rgba(192,225,250,0);
}
}
<ul class="clear">
<li><span class="circle"></span><a href="#">Button</a></li>
<li><span class="circle"></span><a href="#">Elements</a></li>
<li><span class="circle"></span><a href="#">Forms</a></li>
<li><span class="circle"></span><a href="#">Charts</a></li>
</ul>
相关文章推荐
- CSS零碎知识点
- [css]零散的重构知识
- 浅析CSS中calc()的使用
- 使用自定义透明Dialog样式的Activity
- 窗口样式表格
- 实用css总结
- CSS3动画效果——js调用css动画属性并回调处理详解
- 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
- CSS3 :target伪类实现Tab切换效果 BY commy
- css中important的用处
- css :active伪类的理解
- CSS3 :target伪类的理解与使用
- css 框架——base.css,作用是重设浏览器默认样式和提供通用原子类。自己留存
- 织梦模板安装后不能显示css的解决办法
- 最简化模型2——css3分阶段动画效果(经过实测)之转动的div
- CSS清楚浮动float
- [css]水平垂直居中的方法
- 最简化模型——css3分阶段动画效果(经过实测)
- ios tableview一些样式的整理
- CSS设置行内元素的水平居中