css3波浪动画效果-CSS3动画：类似波纹的定位 Style_html/css_WEB-ITnose

近期我会做一个图像定位的标记。 为了让这个标记不无聊，我决定制作一个简单的动画。 动画的效果就像波浪一样波动css3波浪动画效果，这样标记就会更加美观漂亮。 喜欢的朋友可以跟着学习，很简单，欢迎见谅。

先上效果图：

教程

这个动画中需要用到的主要属性：animation、transition和Keyframes属性。 属性详细信息可以去w3school中文网查看相关动画属性。

第1步：HTML代码：

第二步：CSS样式：设置动画属性

.dot:before{content:' ';position: absolute;z-index:2;left:0;top:0;width:10px;height:10px;background-color: #ff4200;border-radius: 50%;}.dot:after {content:' ';position: absolute;z-index:1;width:10px;height:10px;background-color: #ff4200;border-radius: 50%;box-shadow: 0 0 10px rgba(0,0,0,.3) inset;-webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/-webkit-animation-duration: 1s;/*动画持续时间*/-webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/-webkit-animation-delay: 0s;/*动画延迟时间*/-webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/-webkit-animation-direction: normal;/*定义动画方式*/}

设置动画形式，就像波浪一样css3波浪动画效果，从小到大到无，所以我们需要设置宽度和高度从0-50px，透明度从有到不存在，从而达到水波纹的效果。

@keyframes ripple {0% {left:5px;top:5px;opcity:75;width:0;height:0;}100% {left:-20px;top:-20px;opacity: 0;width:50px;height:50px;}}

效果完成。 这种情况比较适合图像定位和标注。 当然，可以有更好的替代方案来改善这种风格和动画的效果。

在线演示地址：

交流：想认识更多有才华的设计师吗？ 请前往（UI设计QQ群）列表与5万名设计师交流。

设计导航：值得年轻朋友和老年人拥有的设计师网站导航：