前端水波纹往外展开1

来自: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> html { font-size: 20px; } body { background: #444; } .animate .w2 { -webkit-animation-delay: 1s; } .animate .w3 { -webkit-animation-delay: 2s; } .animate .w4 { -webkit-animation-delay: 3s; } .wave { width: 22.7rem; height: 22.7rem; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; } .wave * { border: 1px solid #fff; position: absolute; border-radius: 50%; -webkit-animation: opac 4s infinite; } @-webkit-keyframes opac { from { opacity: 1; width: 0; height: 0; top: 50%; left: 50%; } to { opacity: 0; width: 100%; height: 100%; top: 0; left: 0; } } </style> </head> <body> <div class="animate wave"> <div class="w1"></div> <div class="w2"></div> <div class="w3"></div> <div class="w4"></div> </div> </body> </html>

 

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