js+css实现下雨天纸船雨中航行漂浮动画效果代码
代码语言:html
所属分类:动画
代码描述:js+css实现下雨天纸船雨中航行漂浮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> @import url(https://fonts.googleapis.com/css?family=Open+Sans:800); body { background: #000; overflow: hidden; } #instructions { position: absolute; width: 100%; top: 50%; margin: auto; margin-top: 80px; font-family: "Open Sans", sans-serif; color: #AAA; font-size: 1.1em; text-transform: uppercase; text-align: center; line-height: 130%; } #bgr { position: absolute; margin: auto; top: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient(#000, #111, #222, #000); } #raftHolder { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; width: 100px; height: 50px; overflow: hidden; } #raft { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; transform: rotate(-5deg); -webkit-animation-name: raftFloat; animation-name: raftFloat; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } #raftBottom { position: absolute; margin: auto; top: 34px; bottom: 0; left: 0; right: 0; width: 0px; height: 0px; border-bottom: 20px solid #555; border-left: 20px solid transparent; border-right: 20px solid transparent; } #raftBottom::before { content: ""; position: absolute; margin: auto; width: 0px; height: 0px; left: -40px; border-top: 20px solid #2A2A2A; border-left: 20px solid transparent; border-right: 20px solid transparent; } #raftBottom::after { content: ""; position: absolute; margin: auto; width: 0px; height: 0px; border-top: 20px solid #888; border-left: 20px solid transparent; border-right: 20px solid transparent; } #raftTop { position: absolute; margin: auto; top: -7px; left: 20px; right: 0; bottom: 0; width: 0px; height: 0px; border-bottom: 20px solid #fff; border-right: 20px solid transparent; } #raftTop::before { content: ""; position: absolute; margin: auto; width: 0px; height: 0px; left: -20px; border-bottom: 20px solid #333; border-left: 20px solid transparent; } #raftRipples { position: absolute; margin: auto; top: 50px; bottom: 0; left: 0; right: 100px; width: 200px; height: 50px; } .raftRipple { position: absolute; margin: auto; width: 0px; height: 4px; border-radius: 2px; opacity: 0.1; background: #fff; -webkit-animation-name: raftRippleMove; animation-name: raftRippleMove; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } .raftRipple:nth-child(1) { top: 30px; left: 120px; -webkit-animation-delay: 1s; animation-delay: 1s; } .raftRipple:nth-child(2) { top: 24px; left: 120px; -webkit-animation-delay: 1.5s; animation-delay: 1.5s; } #raftReflection { position: absolute; margin: auto; top: 90px; bottom: 0; right: 0; left: 10px; width: 100px; height: 50px; } .raftReflectionSegment { position: absolute; margin: auto; height: 4px; border-radius: 2px; bottom: 0; left: 0; right: 0; background: #fff; -webkit-animation-name: raftReflectionMove; animation-name: raftReflectionMove; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } .raftReflectionSegment:nth-child(1) { top: -30px; width: 35px; opacity: 0.1; } .raftReflectionSegment:nth-child(2) { top: -16px; width: 45px; -webkit-animation-delay: 0.2s; animation-delay: 0.2s; opacity: 0.05; } .raftReflectionSegment:nth-child(3) { top: -2px; width: 60px; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; opacity: 0.02; } @-webkit-keyframes raftReflectionMove { 0% { transform: scale(1.2, 1) translate(5px); } 100% { transform: scale(1, 1) translate(-10px); } } @keyframes raftReflectionMove { 0% { transform: scale(1.2, 1) translate(5px); } 100% { transform: scale(1, 1) translate(-10px); } } @-webkit-keyframes raftRippleMove { 0% { width: 0px; } 70% { width: 50px; } 100% { transform: translate(-100px); width: 0px; opacity: 0; } } @keyframes raftRippleMove { 0% { width: 0px; } 70% { width: 50px; } 100% { transform: translate(-100px); width: 0px; opacity: 0; } } @-webkit-keyframes raftFloat { 0% { transform: rotate(3deg) translate(10px, -2px); } 100% { transform: rotate(-3deg) translate(-5px); } } @keyframes raftFloat { 0% { transform: rotate(3deg) translate(10px, -2px); } 100% { transform: rotate(-3deg) translate(-5px); } } #sploutch { position: absolute; width: 300px; height: 300px; -webkit-animation-name: panSploutch; animation-name: panSploutch; -webkit-animation-duration: 6s; animation-duration: 6s; } @-webkit-keyframes panSploutch { to { transform: translateX(-300px); } } @keyframes panSploutch { to { transform: translateX(-300px); } } .drop { position: absolute; background: #fff; width: 2px; height: 40px; opacity: 0; left: 150px; -webkit-animation-name: fall; animation-name: fall; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes fall { 0% { top: -100px; opacity: 0; height: 100px; } 99% { opacity: 1; } 100% { top: 150px; opacity: 0s; height: 5px; } } @keyframes fall { 0% { top: -100px; opacity: 0; height: 100px; } 99% { opacity: 1; } 100% { top: 150px; opacity: 0s; height: 5px; } } #ripples { position: absolute; width: 300px; height: 300px; transform: rotateX(75deg); } .ripple { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0