css實現水波紋動效
阿新 • • 發佈：2022-04-03
效果如下：
程式碼如下：
<!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> #box{ width: 200px; height: 200px; background-color: #68CCCA; opacity: 0.5; display: flex; justify-content:center; align-items: center; } .radius{ width: 50px; height: 50px; background-color:#F44E3B; border-radius: 50%; position:relative; display: flex; justify-content:center; align-items: center; overflow: hidden; } .juxin{ width: 100px; height:100px; background-color: blanchedalmond; border-radius: 30%; position: absolute; top: -70px; /* left: 50%; transform:translateX(-50%); */ animation:identifier 4s linear infinite; } @keyframes identifier {0%{top: -70px; transform:rotate(0deg);} 50%{ top: -90px;transform:rotate(180deg);} 100%{ top: -115px;transform:rotate(360deg);} } </style> </head> <body> <div id="box"> <div class="radius"> <div class="juxin"></div> </div> </div> </body> </html>