div+css实现云端雨水滴下下雨动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现云端雨水滴下下雨动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; margin: 0; padding: 0; } #rain-wrap { position: relative; margin: 0px auto; padding: 0; width: 100%; max-width: 1200px; height: 100vh; max-height: 500px; overflow: hidden; background: radial-gradient(circle at center center, #d9e7ee, #91a8b3); /* background: #b7c1c6;*/ border: 2vw solid white; } /* ocean*/ .ocean { width: 100%; height: 120px; bottom: -50px; left: 0; position: absolute; z-index: 1; background-color: white; border-radius: 0 100% 0 0; list-style: none; } .ocean::after, .ocean::before { content: ""; position: absolute; bottom: 0px; left: -10%; width: 120%; height: 150px; border-radius: 20% 100% 0 0; background-color: white; animation: waves 10s ease infinite; opacity: 0.5; } .ocean::before { bottom: 0px; height: 200px; animation-delay: 5s; opacity: 0.33; left: -15%; } @keyframes waves { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } /* drops*/ .dripdrop { position: relative; z-index: 1; margin: 0 auto; padding: 0; top: 15px; list-style: none; width: 300px; height: 300px; } .dripdrop::after { content: ""; position: absolute; width: 100px; height: 70px; background: white; border-radius: 0% 0% 100% 100%; top: -70px; left: -50px; /* box-shadow: -10px 0px 0 15px rgba(250,250,250,0.5), -15px 0px 0 25px rgba(250,250,250,0.25);*/ box-shadow: -10px 0px 0 15px rgba(250, 250, 250, 0.75); animation: bg-pulp 7.5s cubic-bezier(0.4, 0, 1, 1) infinite alternate; } .dripdrop::before { content: ""; position: absolute; width: 100px; height: 70px; background: white; border-radius: 0% 0% 100% 100%; top: -70px; left: -10px; /* box-shadow: 0px -10px 0 15px rgba(250,250,250,0.5), 0px -15px 0 25px rgba(250,250,250,0.25);*/ box-shadow: 0px -10px 0 15px rgba(250, 250, 250, 0.75); animation: bg-pulp 5.5s cubic-bezier(0.4, 0, 1, 1) infinite alternate; } @keyframes bg-pulp { 0% { transform: rotate(-25deg) scale(1); border-top-right-radius: 90%; border-bottom-right-radius: 70%; border-bottom-left-radius: 100%; border-top-left-radius: 50%; } 50% { transform: rotate(50deg) scale(0.9); border-top-right-radius: 70%; border-bottom-right-radius: 100%; border-bottom-left-radius: 50%; border-top-left-radius: 70%; } 100% { transform: rotate(0deg) scale(1.1); border-top-right-radius: 100%; border-bottom-right-radius: 50%; border-bottom-left-radius: 80%; border-top-left-radius: 70%; } } .dripdrop li { position: absolute; width: 20px; height: 20px; top: 0; left: 0px; margin: 0 auto; /* background: #758c97;*/ background: white; border-radius: 100% 5% 100% 100%; transform: rotate(-45deg); animation: drip 5s cubic-bezier(1, 0, 0.91, 0.19) 0s infinite; } .dripdrop li::after { content: ""; position: absolute; width: 20px; height: 20px; background: white; border-radius: 100% 5% 100% 100%; left: -5px; top: -50px; transform: rotate(0deg) scale(0.5); animation-delay: 3.5s; } .dripdrop li::before { content: ""; position: absolute; width: 10px; height: 10px; background: white; border-radius: 100% 5% 100% 100%; left: 60px; top: -30px; transform: rotate(0deg) scale(0.5); animation-delay: 3.5s; } .dripdrop li:nth-child(2) { left: 35px; top: -50px; transform: rotate(-45deg) scale(1.15); animation-delay: 3s; } .dripdrop li:nth-child(2)::after { left: -5px; top: -50px; transform: rotate(0deg) scale(0.5); animation-delay: 3.5s; } .dripdrop li:nth-child(2)::before { left: 70px; top: 50px; transform: rotate(0deg) scale(0.5); animation-delay: 3.5s; } .dripdrop li:nth-child(3) { left: 75px; top: 0px; margin-top: -10px; transform: rotate(-45deg) scale(0.85); animation-delay: 1.5s; } .dripdrop li:nth-child(3)::after { left: -130px; top: -150px; transform: rotate(0deg) scale(1); animation-delay: 3.5s; } .dripdrop li:nth-child(3)::before { left: -100px; top: 0px; margin-top: -150px; transform: rotate(0deg) scale(1.1); animation-delay: 3.5s; } .dripdrop li:nth-child(4) { left: -50px; top: 0px; margin-top: -15px; transform: rotate(-45deg) scale(1.5); animation-delay: 1s; animation-duration: 5s; } .dripdrop li:nth-child(4)::after { left: -25px; top: -30px; margin-top: 0; transform: rotate(0deg) scale(0.3); animation-delay: 3.5s; } .dripdrop li:nth-child(4)::before { left: 10px; top: -10px; margin-top: -10px; transform: rotate(0deg) scale(0.5); animation-delay: 3.5s; } @keyframes drip { 0% { top: -15px; border-radius: 0% 100% 0% 100%; } 50% { top: -8px; border-radius: 50% 100% 50% 100%; } 70% { border-radius: 100% 5% 100% 100%; } 90% { border-radius: 50% 80% 50% 100%; } 100% { top: 300px; border-radius: 50% 80% 50% 100%; } } /* rain*/ .rain { position: absolute; top: 0; left: 50%; transform: rotate(0deg); color: #758c97; opacity: 0.33; } .rain::before { content: ""; background: none; position: absolute; top: 100px; left: -200px; width: 5px; height: 5px; border-radius: 100% 5% 100% 100%; transform: rotate(0deg); z-index: 0; box-shadow: 0 0px 2px 0px #758c97, 10px 10px 0px 0 #758c97, 50px 20px 2px 0 #758c97, 100px 30px 2px 0 #758c97, 30px 70px 2px 0 #758c97, 130px 70px 2px 0px #758c97, -30px 30px 2px 0 #758c97, -55px 45px 2px 0 #758c97, -70px 30px 2px 0 #758c97, -130px 40px 2px 0 #758c97, -150px 90px 2px 0 #758c97, -160px 80px 2px 0 #758c97, -190px 130px 2px 0 #758c97, -150px 150px 2px 0 #758c97, -130px 120px 2px 0 #758c97, -100px 130px 2px 0 #758c97, -90px 80px 2px 0 #758c97, -40px 100px 2px 0 #758c97, -30px 90px 2px 0 #758c97, 0px 100px 2px 0 #758c97, 40px 140px 2px 0 #758c97, 70px 120px 2px 0 #758c97, 50px 180px 2px 0 #758c97, 100px 150px 2px 0 #758c97, 140px 120px 2px 0 #758c97, 170px 90px 2px 0 #758c97, 170px 130px 2px 0 #758c97, 160px 140px 2px 0 #758c97, 170px 130px 2px 0 #758c97, 10px 130px 2px 0 #758c97, 180px 180px 2px 0 #758c97, 200px 160px 2px 0 #758c97, 200px 260px 2px 0 #758c97, 250px 195px 2px 0 #758c97, -200px 160px 2px 0 #758c97, -200px 180px 2px 0 #758c97, -220px 185px 2px 0 #758c97, -150px 200px 2px 0 #758c97, -100px 250px 2px 0 #758c97, -80px 195px 2px 0 #758c97, -190px 280px 2px 0 #758c97, -150px 350px 2px 0 #758c97, -250px 250px 2px 0 #758c97, 150px 350px 2px 0 #758c97, 100px 230px 2px 0 #758c97; animation: rain 2.5s linear infinite; } .rain::after { content: ""; background: none; position: absolute; top: 0px; left: 0px; width: 5px; height: 5px; border-radius: 100% 5% 100% 100%; transform: rotate(0deg); z-index: 0; box-shadow: 0 0px 2px 0px #758c97, 10px 10px 0px 0 #758c97, 50px 20px 2px 0 #758c97, 100px 30px 2px 0 #758c97, 30px 70px 2px 0 #758c97, 130px 70px 2px 0px #758c97, -30px 30px 2px 0 #758c97, -55px 45px 2px 0 #758c97, -70px 30px 2px 0 #758c97, -130px 40px 2px 0 #758c97, -150px 90px 2px 0 #758c97, -160px 80px 2px 0 #758c97, -190px 130px 2px 0 #758c97, -150px 150px 2px 0 #758c97, -130px 120px 2px 0 #758c97, -100px 130px 2px 0 #758c97, -90px 80px 2px 0 #758c97, -40px 100px 2px 0 #758c97, -30px 90px 2px 0 #758c97, 0px 100px 2px 0 #758c97, 40px 140px 2px 0 #758c97, 70px 120px 2px 0 #758c97, 50px 180px 2px 0 #758c97, 100px 150px 2px 0 #758c97, 140px 120px 2px 0 #758c97, 170px 90px 2px 0 #758c97, 170px 130px 2px 0 #758c97, 160px 140px 2px 0 #758c97, 170px 130px 2px 0 #758c97, 10px 130px 2px 0 #758c97, 180px 180px 2px 0 #758c97, 200px 160px 2px 0 #758c97, 200px 260px 2px 0 #758c97, 250px 195px 2px 0 #758c97, -200px 160px 2px 0 #758c97, -200px 180px 2px 0 #758c97, -220px 185px 2px 0 #758c97, -150px 200px 2px 0 #758c97, -100px 250px 2px 0 #758c97, -80px 195px 2px 0 #758c97, -190px 280px 2px 0 #758c97, -150px 350px 2px 0 #758c97, -250px 250px 2px 0 #758c97, 150px 350px 2px 0 #758c97, 100px 230px 2px 0 #758c97; animation: rain 2.5s linear 0.75s infinite; } .rain li { background: none; position: absolute; top: 0; left: 0; width: 5px; height: 5px; border-radius: 100% 5% 100% 100%; transform: rotate(-0deg); z-index: 0; box-shadow: 0 0px 2px 0px #758c97, 10px 10px 0px 0 #758c97, 50px 20px 2px 0 #758c97, 100px 30px 2px 0 #758c97, 30px 70px 2px 0 #758c97, 130px 70px 2px 0px #758c97, -30px 30px 2px 0 #758c97, -55px 45px 2px 0 #758c97, -70px 30px 2px 0 #758c97, -130px 40px 2px 0 #758c97, -150px 90px 2px 0 #758c97, -160px 80px 2px 0 #758c97, -190px 130px 2px 0 #758c97, -150px 150px 2px 0 #758c97, -130px 120px 2px 0 #758c97, -100px 130px 2px 0 #758c97, -90px 80px 2px 0 #758c97, -40px 100px 2px 0 #758c97, -30px 90px 2px 0 #758c97, 0px 100px 2px 0 #758c97, 40px 140px 2px 0 #758c97, 70px 120px 2px 0 #758c97, 50px 180px 2px 0 #758c97, 100px 150px 2px 0 #758c97, 140px 120px 2px 0 #75.........完整代码请登录后点击上方下载按钮下载查看
网友评论0