前端水波纹往外展开2

来自:https://blog.csdn.net/qq_38658877/article/details/78092649 侵删
<!
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { background: gold; } .circle { position: absolute; left: 0; top: 0; right: 0; margin: 0 auto; width: 90px; height: 90px } .circle div { position: absolute; top: 50%; left: 50%; background: #fff; width: 90px; height: 90px; margin-left: -45px; margin-top: -45px; opacity: 1; border-radius: 90px; animation: 1.2s linear infinite; -webkit-animation: 1.2s linear infinite; -ms--webkit-animation: 1.2s linear infinite; -moz--webkit-animation: 1.2s linear infinite; -o--webkit-animation: 1.2s linear infinite; /* 此部分是上面动画的分开表示方法,推荐使用简写的方式-webkit-animation-duration:1.2s; -webkit-animation-timing-function:linear; -webkit-animation-iteration-count:infinite; -ms-animation-duration:1.2s; -ms-animation-timing-function:linear; -ms-animation-iteration-count:infinite; -moz-animation-duration:1.2s; -moz-animation-timing-function:linear; -moz-animation-iteration-count:infinite; -o-animation-duration:1.2s; -o-animation-timing-function:linear; -o-animation-iteration-count:infinite; animation-duration:1.2s; animation-timing-function:linear; animation-iteration-count:infinite;*/ } .circle div.c1 { width: 20px; height: 20px; margin-left: -10px; margin-top: -10px; opacity: 1; border-radius: 90px } .circle div.c2 { -webkit-animation-name: c2; -webkit-animation-delay: .6s; -ms-animation-name: c2; -ms-animation-delay: .6s; -moz-animation-name: c2; -moz-animation-delay: .6s; -o-animation-name: c2; -o-animation-delay: .6s; animation-name: c2; animation-delay: .6s; } .circle div.c3 { -webkit-animation-name: c2; -webkit-animation-delay: 1.2s; -ms-animation-name: c2; -ms-animation-delay: 1.2s; -moz-animation-name: c2; -moz-animation-delay: 1.2s; -o-animation-name: c2; -o-animation-delay: 1.2s; animation-name: c2; animation-delay: 1.2s; } @-webkit-keyframes c2 { 0% { -webkit-transform: scale(.222); -ms-transform: scale(.222); -moz-transform: scale(.222); -o-transform: scale(.222); transform: scale(.222); opacity: 1 } 50% { -webkit-transform: scale(.622); -ms-transform: scale(.622); -moz-transform: scale(.622); -o-transform: scale(.622); transform: scale(.622); opacity: .4 } 98% { -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: .2 } 100% { opacity: 0 } } @-ms-keyframes c2 { 0% { -webkit-transform: scale(.222); -ms-transform: scale(.222); -moz-transform: scale(.222); -o-transform: scale(.222); transform: scale(.222); opacity: 1 } 50% { -webkit-transform: scale(.622); -ms-transform: scale(.622); -moz-transform: scale(.622); -o-transform: scale(.622); transform: scale(.622); opacity: .4 } 98% { -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: .2 } 100% { opacity: 0 } } @-moz-keyframes c2 { 0% { -webkit-transform: scale(.222); -ms-transform: scale(.222); -moz-transform: scale(.222); -o-transform: scale(.222); transform: scale(.222); opacity: 1 } 50% { -webkit-transform: scale(.622); -ms-transform: scale(.622); -moz-transform: scale(.622); -o-transform: scale(.622); transform: scale(.622); opacity: .4 } 98% { -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: .2 } 100% { opacity: 0 } } @-o-keyframes c2 { 0% { -webkit-transform: scale(.222); -ms-transform: scale(.222); -moz-transform: scale(.222); -o-transform: scale(.222); transform: scale(.222); opacity: 1 } 50% { -webkit-transform: scale(.622); -ms-transform: scale(.622); -moz-transform: scale(.622); -o-transform: scale(.622); transform: scale(.622); opacity: .4 } 98% { -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: .2 } 100% { opacity: 0 } } @keyframes c2 { 0% { -webkit-transform: scale(.222); -ms-transform: scale(.222); -moz-transform: scale(.222); -o-transform: scale(.222); transform: scale(.222); opacity: 1 } 50% { -webkit-transform: scale(.622); -ms-transform: scale(.622); -moz-transform: scale(.622); -o-transform: scale(.622); transform: scale(.622); opacity: .4 } 98% { -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: .2 } 100% { opacity: 0 } } </style> </head> <body> <div class="circle"> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> </div> </body> </html>

 

posted @ 2019-03-04 16:09  abcByme  阅读(164)  评论(0编辑  收藏  举报