css+svg实现水滴下落融入动画效果代码
代码语言:html
所属分类:动画
代码描述:css+svg实现水滴下落融入动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; } .cont { width: 300px; height: 230px; position: relative; overflow: hidden; border-top: 15px solid black; border-bottom: 15px solid black; border-radius: 10px; filter: url("#goo"); } .cont .drip { height: 30px; width: 30px; border-radius: 50%; background: black; position: absolute; top: -100%; animation: falling 5s linear infinite; } @keyframes falling { 0% { top: -100%; } 50% { top: 0%; } 80% { top: 80%; } 100% { top: 100%; } } .cont .drip:nth-child(1) { border-color: black; height: 30px; width: 30px; animation-delay: -0.2s; background: black; left: 64px; margin-left: 60px; } .cont .drip:nth-child(2) { border-color: black; height: 29px; width: 29px; animation-delay: -0.4s; background: black; left: 107px; margin-left: 60px; } .cont .drip:nth-child(3) { border-color: black; height: 24px; width: 24px; animation-delay: -0.6s; background: black; left: 23px; margin-left: 60px; } .cont .drip:nth-child(4) { border-color: black; height: 12px; width: 12px; animation-delay: -0.8s; background: black; left: 265px; margin-left: 60px; } .cont .drip:nth-child(5) { border-color: black; height: 19px; width: 19px; animation-delay: -1s; background: black; left: 144px; margin-left: 60px; } .cont .drip:nth-child(6) { border-color: black; height: 20px; width: 20px; animation-delay: -1.2s; background: black; left: 76px; margin-left: 60px; } .cont .drip:nth-child(7) { border-color: black; height: 18px; width: 18px; animation-delay: -1.4s; background: black; left: 251px; margin-left: 60px; } .cont .drip:nth-child(8) { border-color: black; height: 33px; width: 33px; animation-delay: -1.6s; background: black; left: 15px; margin-left: 60px; } .cont .drip:nth-child(9) { border-color: black; height: 16px; width: 16px; animation-delay: -1.8s; background: black; left: 96px; margin-left: 60px; } .cont .drip:nth-child(10) { border-color: black; height: 40px; width: 40px; animation-delay: -2s; background: black; left: 281px; margin-left: 60px; } .cont .drip:nth-child(11) { border-color: black; height: 14px; width: 14px; animation-delay: -2.2s; background: black; left: 122px; margin-left: 60px; } .cont .drip:nth-child(12) { border-color: black; height: 10px; width: 10px; animation-delay: -2.4s; background: black; left: 38px; margin-left: 60px; } .cont .drip:nth-child(13) { border-color: black; height: 36px; wid.........完整代码请登录后点击上方下载按钮下载查看
网友评论0