酷炫的发光波纹
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>波纹</title> 7 <style> 8 #imageContainer { 9 border: 1px solid black; 10 background-color: red; 11 border-radius: 50%; 12 margin: 0px auto; 13 margin-top: 100px; 14 --s: 0s; 15 } 16 #imageContainer, #imageContainer::before, #imageContainer::after { 17 content: ""; 18 width: 50px; 19 height: 50px; 20 display: grid; 21 grid-area: 1 / 1; 22 box-shadow: 0px 0px 0px 0px #4cff0099; 23 animation: swaving 3s linear infinite var(--s); 24 border-radius:50%; 25 } 26 #imageContainer::before { 27 --s: 1s; 28 } 29 #imageContainer::after { 30 --s: 2s; 31 } 32 @keyframes swaving { 33 to { 34 box-shadow: 0px 0px 0px 50px #4cff0000; 35 } 36 } 37 </style> 38 </head> 39 <body> 40 <div id="imageContainer"> 41 </div> 42 43 44 </body> 45 </html>
效果图：
浙公网安备 33010602011771号