首页 > 代码库 > CSS3圆圈动画放大缩小循环动画效果
CSS3圆圈动画放大缩小循环动画效果
代码如下:
<!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.2; width:250px; height:250px; } } </style> </head> <body> <div class="dot"></div> </body> </html>
CSS3圆圈动画放大缩小循环动画效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。