分享一段css动画 - 3D水滴动画
By
jerryxjr1220
at 2023-01-30 • 0人收藏 • 466人看过
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } body{ width: 100vw; height: 100vh; background-color: dodgerblue; } .water{ width: 100px; height: 100px; margin: 100px 50px; /* border: 1px solid black; */ border-radius: 61% 39% 57% 43% / 46% 67% 33% 54%; box-shadow: inset 10px 20px 30px rgba(0, 0, 0, 0.5), 10px 10px 20px rgba(0, 0, 0, 0.3), 15px 15px 30px rgba(0, 0, 0, 0.05), inset -10px -20px 30px rgba(255, 255, 255, 0.8); position: relative; animation: water-a 3s linear infinite alternate; } .water::before{ content: ''; position: absolute; top: 15%; left: 50%; width: 10px; height: 10px; background-color: rgba(255, 255, 255, 0.8); border-radius: 46% 54% 36% 64% / 46% 43% 57% 54%; animation: water-b 2s linear infinite alternate; } .water::after{ content: ''; position: absolute; top: 25%; left: 30%; width: 6px; height: 6px; background-color: rgba(255, 255, 255, 0.8); border-radius: 46% 54% 36% 64% / 46% 43% 57% 54%; } @keyframes water-a { 25% { border-radius: 58% 42% 59% 41% / 52% 56% 54% 48%; } 50% { border-radius: 46% 54% 40% 60% / 52% 33% 67% 48%; } 75% { border-radius: 65% 35% 71% 29% / 31% 60% 40% 69%; } 100% { border-radius: 60% 40% 43% 57% / 45% 51% 49% 55%; } } @keyframes water-b { 25% { top: 17%; left: 50%; } 50% { top: 20%; left: 50%; } 100% { top: 22%; left: 50%; } } </style> </head> <body> <div class="water"></div> </body> </html>
完全css实现,效果惊艳!
2 个回复 | 最后更新于 2023-01-30
登录后方可回帖
div标签里漏了 class="water"