<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3圆圈动画放大缩小循环动画效果</title> <style> .dot { margin:150px auto; width:200px; height:200px; background-color:#E3E3E3; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,.3) inset; -webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/ -webkit-animation-duration: 2s;/*动画持续时间*/ -webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/ -webkit-animation-delay: 0s;/*动画延迟时间*/ -webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/ -webkit-animation-direction: alternate;/*定义动画方式*/ } @keyframes ripple { 0% { opacity:0.35; width:190px; height:190px; } 100% { opacity: 0.9; width:250px; height:250px; } } </style> </head> <body> <div class="dot"></div> </body> </html>
