css实现三维小船乘风破浪前行动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现三维小船乘风破浪前行动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #c8e6ff; height: 100vh; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-perspective: 800px; perspective: 800px; } div { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: absolute; } #open_water { margin-top:300px; -webkit-perspective: 800px; perspective: 800px; -webkit-filter: drop-shadow(0 220px 20px rgba(0, 20, 150, 0.3)); filter: drop-shadow(0 220px 20px rgba(0, 20, 150, 0.3)); } @-moz-document url-prefix() { #open_water { filter: none; } } #open_water .tree_1 { background: -webkit-gradient(linear, left bottom, left top, from(#470d04), color-stop(5%, #ea831c), color-stop(12%, #ea831c), color-stop(20%, #894d10), color-stop(25%, #6b190c), color-stop(26%, #470d04), color-stop(28%, #ea831c), color-stop(36%, #ea831c), color-stop(45%, #894d10), color-stop(50%, #6b190c), color-stop(51%, #470d04), color-stop(53%, #ea831c), color-stop(61%, #ea831c), color-stop(70%, #894d10), color-stop(75%, #6b190c), color-stop(76%, #470d04), color-stop(78%, #ea831c), color-stop(86%, #ea831c), color-stop(95%, #894d10), to(#6b190c)); background: linear-gradient(0deg, #470d04 0%, #ea831c 5%, #ea831c 12%, #894d10 20%, #6b190c 25%, #470d04 26%, #ea831c 28%, #ea831c 36%, #894d10 45%, #6b190c 50%, #470d04 51%, #ea831c 53%, #ea831c 61%, #894d10 70%, #6b190c 75%, #470d04 76%, #ea831c 78%, #ea831c 86%, #894d10 95%, #6b190c 100%); } #open_water .tree_2 { background: -webkit-gradient(linear, left top, right top, from(#470d04), color-stop(5%, #ea831c), color-stop(12%, #ea831c), color-stop(20%, #894d10), color-stop(25%, #6b190c), color-stop(26%, #470d04), color-stop(28%, #ea831c), color-stop(36%, #ea831c), color-stop(45%, #894d10), color-stop(50%, #6b190c), color-stop(51%, #470d04), color-stop(53%, #ea831c), color-stop(61%, #ea831c), color-stop(70%, #894d10), color-stop(75%, #6b190c), color-stop(76%, #470d04), color-stop(78%, #ea831c), color-stop(86%, #ea831c), color-stop(95%, #894d10), to(#6b190c)); background: linear-gradient(90deg, #470d04 0%, #ea831c 5%, #ea831c 12%, #894d10 20%, #6b190c 25%, #470d04 26%, #ea831c 28%, #ea831c 36%, #894d10 45%, #6b190c 50%, #470d04 51%, #ea831c 53%, #ea831c 61%, #894d10 70%, #6b190c 75%, #470d04 76%, #ea831c 78%, #ea831c 86%, #894d10 95%, #6b190c 100%); } #open_water .metal { background: linear-gradient(45deg, #f5f6f6 0%, #dbdce2 21%, #b8bac6 49%, #dddfe3 80%, #f5f6f6 100%); } #open_water .black { background: linear-gradient(135deg, #959595 0%, #0a0a0a 36%, #0a0a0a 36%, #010101 50%, #4e4e4e 65%, #383838 87%, #1b1b1b 100%); } #open_water .fish_1 { background: -webkit-gradient(linear, left top, left bottom, from(#2c539e), color-stop(32%, #2c539e), color-stop(84%, #4786d3), to(#2c539e)); background: linear-gradient(180deg, #2c539e 0%, #2c539e 32%, #4786d3 84%, #2c539e 100%); } #open_water .fish_2 { background: -webkit-gradient(linear, left top, right top, from(#2c539e), color-stop(32%, #2c539e), color-stop(84%, #4786d3), to(#2c539e)); background: linear-gradient(90deg, #2c539e 0%, #2c539e 32%, #4786d3 84%, #2c539e 100%); } #open_water .wood { background: linear-gradient(45deg, #a90329 0%, #8f0222 44%, #6d0019 100%); } .camera_x { -webkit-transform: rotateX(70deg); transform: rotateX(70deg); -webkit-animation: cameraX 20000ms linear infinite alternate; animation: cameraX 20000ms linear infinite alternate; } .camera_z { -webkit-transform: rotateZ(30deg); transform: rotateZ(30deg); -webkit-animation: cameraZ 30000ms linear infinite; animation: cameraZ 30000ms linear infinite; } .sea { -webkit-transform: translate(-50%, -50%) translateZ(-60px); transform: translate(-50%, -50%) translateZ(-60px); } .sea .dolphin .dolphin_move { -webkit-animation: dolphinMove 10000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; animation: dolphinMove 10000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; } .sea .dolphin:nth-child(1) .dolphin_z { -webkit-animation: dolphinZ 1987ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; animation: dolphinZ 1987ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; } .sea .dolphin:nth-child(1) .dolphin_rotate { -webkit-animation: dolphinRotate 1987ms -993.5ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; animation: dolphinRotate 1987ms -993.5ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; } .sea .dolphin:nth-child(1) { -webkit-transform: translate(410px, 200px); transform: translate(410px, 200px); } .sea .dolphin:nth-child(2) { -webkit-transform: translate(370px, 160px); transform: translate(370px, 160px); } .sea .dolphin:nth-child(3) { -webkit-transform: translate(100px, 400px); transform: translate(100px, 400px); } .sea .dolphin:nth-child(4) { -webkit-transform: translate(60px, 360px); transform: translate(60px, 360px); } .sea .dolphin:nth-child(5) { -webkit-transform: translate(110px, 340px); transform: translate(110px, 340px); } .sea .dolphin:nth-child(2) .dolphin_z { -webkit-animation: dolphinZ 2494ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; animation: dolphinZ 2494ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; } .sea .dolphin:nth-child(2) .dolphin_rotate { -webkit-animation: dolphinRotate 2494ms -1247ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; animation: dolphinRotate 2494ms -1247ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; } .sea .dolphin:nth-child(1) { -webkit-transform: translate(410px, 200px); transform: translate(410px, 200px); } .sea .dolphin:nth-child(2) { -webkit-transform: translate(370px, 160px); transform: translate(370px, 160px); } .sea .dolphin:nth-child(3) { -webkit-transform: translate(100px, 400px); transform: translate(100px, 400px); } .sea .dolphin:nth-child(4) { -webkit-transform: translate(60px, 360px); transform: translate(60px, 360px); } .sea .dolphin:nth-child(5) { -webkit-transform: translate(110px, 340px); transform: translate(110px, 340px); } .sea .dolphin:nth-child(3) .dolphin_z { -webkit-animation: dolphinZ 1767ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; animation: dolphinZ 1767ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; } .sea .dolphin:nth-child(3) .dolphin_rotate { -webkit-animation: dolphinRotate 1767ms -883.5ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; animation: dolphinRotate 1767ms -883.5ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; } .sea .dolphin:nth-child(1) { -webkit-transform: translate(410px, 200px); transform: translate(410px, 200px); } .sea .dolphin:nth-child(2) { -webkit-transform: translate(370px, 160px); transform: translate(370px, 160px); } .sea .dolphin:nth-child(3) { -webkit-transform: translate(100px, 400px); transform: translate(100px, 400px); } .sea .dolphin:nth-child(4) { -webkit-transform: translate(60px, 360px); transform: translate(60px, 360px); } .sea .dolphin:nth-child(5) { -webkit-transform: translate(110px, 340px); transform: translate(110px, 340px); } .sea .dolphin:nth-child(4) .dolphin_z { -webkit-animation: dolphinZ 1697ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; animation: dolphinZ 1697ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; } .sea .dolphin:nth-child(4) .dolphin_rotate { -webkit-animation: dolphinRotate 1697ms -848.5ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; animation: dolphinRotate 1697ms -848.5ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; } .sea .dolphin:nth-child(1) { -webkit-transform: translate(410px, 200px); transform: translate(410px, 200px); } .sea .dolphin:nth-child(2) { -webkit-transform: translate(370px, 160px); transform: translate(370px, 160px); } .sea .dolphin:nth-child(3) { -webkit-transform: translate(100px, 400px); transform: translate(100px, 400px); } .sea .dolphin:nth-child(4) { -webkit-transform: translate(60px, 360px); transform: translate(60px, 360px); } .sea .dolphin:nth-child(5) { -webkit-transform: translate(110px, 340px); transform: translate(110px, 340px); } .sea .dolphin:nth-child(5) .dolphin_z { -webkit-animation: dolphinZ 1776ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; animation: dolphinZ 1776ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; } .sea .dolphin:nth-child(5) .dolphin_rotate { -webkit-animation: dolphinRotate 1776ms -888ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; animation: dolphinRotate 1776ms -888ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate; } .sea .dolphin:nth-child(1) { -webkit-transform: translate(410px, 200px); transform: translate(410px, 200px); } .sea .dolphin:nth-child(2) { -webkit-transform: translate(370px, 160px); transform: translate(370px, 160px); } .sea .dolphin:nth-child(3) { -webkit-transform: translate(100px, 400px); transform: translate(100px, 400px); } .sea .dolphin:nth-child(4) { -webkit-transform: translate(60px, 360px); transform: translate(60px, 360px); } .sea .dolphin:nth-child(5) { -webkit-transform: translate(110px, 340px); transform: translate(110px, 340px); } .sea .dolphin .body { width: 15px; height: 40px; background: blue; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-clip-path: polygon(0 60%, 50% 0, 100% 60%, 50% 100%); clip-path: polygon(0 60%, 50% 0, 100% 60%, 50% 100%); } .sea .dolphin .front_fin { width: 21px; height: 8px; background: red; -webkit-transform: translate(-3px, 20px) translateZ(-5px) rotateX(-10deg); transform: translate(-3px, 20px) translateZ(-5px) rotateX(-10deg); -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); } .sea .dolphin .back_fin { width: 25px; height: 6px; background: green; -webkit-transform: translate(-5px, -5px) translateZ(0px) rotateX(20deg); transform: translate(-5px, -5px) translateZ(0px) rotateX(20deg); -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); } .sea .wave { position: relative; width: 500px; height: 20px; background: rgba(0, 0, 255, 0.25); } .sea .wave:nth-child(1) { -webkit-animation: wavey 2500ms -300ms ease-in-out infinite alternate; animation: wavey 2500ms -300ms ease-in-out infinite alternate; } .sea .wave:nth-child(1)::before { content: ''; position: absolute; left: 35%; width: 122px; height: 118%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -2987ms linear infinite; animation: light 5000ms -2987ms linear infinite; } .sea .wave:nth-child(1)::after { content: ''; position: absolute; left: 51%; width: 136px; height: 54%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -7712ms linear infinite; animation: light 5000ms -7712ms linear infinite; } .sea .wave:nth-child(2) { -webkit-animation: wavey 2500ms -600ms ease-in-out infinite alternate; animation: wavey 2500ms -600ms ease-in-out infinite alternate; } .sea .wave:nth-child(2)::before { content: ''; position: absolute; left: 79%; width: 126px; height: 154%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -5434ms linear infinite; animation: light 5000ms -5434ms linear infinite; } .sea .wave:nth-child(2)::after { content: ''; position: absolute; left: 59%; width: 115px; height: 220%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -8962ms linear infinite; animation: light 5000ms -8962ms linear infinite; } .sea .wave:nth-child(3) { -webkit-animation: wavey 2500ms -900ms ease-in-out infinite alternate; animation: wavey 2500ms -900ms ease-in-out infinite alternate; } .sea .wave:nth-child(3)::before { content: ''; position: absolute; left: 23%; width: 184px; height: 279%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -6510ms linear infinite; animation: light 5000ms -6510ms linear infinite; } .sea .wave:nth-child(3)::after { content: ''; position: absolute; left: 25%; width: 189px; height: 82%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -8442ms linear infinite; animation: light 5000ms -8442ms linear infinite; } .sea .wave:nth-child(4) { -webkit-animation: wavey 2500ms -1200ms ease-in-out infinite alternate; animation: wavey 2500ms -1200ms ease-in-out infinite alternate; } .sea .wave:nth-child(4)::before { content: ''; position: absolute; left: 19%; width: 179px; height: 326%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -1740ms linear infinite; animation: light 5000ms -1740ms linear infinite; } .sea .wave:nth-child(4)::after { content: ''; position: absolute; left: 87%; width: 155px; height: 343%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -5553ms linear infinite; animation: light 5000ms -5553ms linear infinite; } .sea .wave:nth-child(5) { -webkit-animation: wavey 2500ms -1500ms ease-in-out infinite alternate; animation: wavey 2500ms -1500ms ease-in-out infinite alternate; } .sea .wave:nth-child(5)::before { content: ''; position: absolute; left: 69%; width: 193px; height: 245%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -6207ms linear infinite; animation: light 5000ms -6207ms linear infinite; } .sea .wave:nth-child(5)::after { content: ''; position: absolute; left: 74%; width: 162px; height: 182%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -8218ms linear infinite; animation: light 5000ms -8218ms linear infinite; } .sea .wave:nth-child(6) { -webkit-animation: wavey 2500ms -1800ms ease-in-out infinite alternate; animation: wavey 2500ms -1800ms ease-in-out infinite alternate; } .sea .wave:nth-child(6)::before { content: ''; position: absolute; left: 55%; width: 159px; height: 188%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -2946ms linear infinite; animation: light 5000ms -2946ms linear infinite; } .sea .wave:nth-child(6)::after { content: ''; position: absolute; left: 48%; width: 199px; height: 112%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -9842ms linear infinite; animation: light 5000ms -9842ms linear infinite; } .sea .wave:nth-child(7) { -webkit-animation: wavey 2500ms -2100ms ease-in-out infinite alternate; animation: wavey 2500ms -2100ms ease-in-out infinite alternate; } .sea .wave:nth-child(7)::before { content: ''; position: absolute; left: 25%; width: 188px; height: 169%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -6112ms linear infinite; animation: light 5000ms -6112ms linear infinite; } .sea .wave:nth-child(7)::after { content: ''; position: absolute; left: 70%; width: 170px; height: 205%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -3975ms linear infinite; animation: light 5000ms -3975ms linear infinite; } .sea .wave:nth-child(8) { -webkit-animation: wavey 2500ms -2400ms ease-in-out infinite alternate; animation: wavey 2500ms -2400ms ease-in-out infinite alternate; } .sea .wave:nth-child(8)::before { content: ''; position: absolute; left: 82%; width: 179px; height: 310%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -8530ms linear infinite; animation: light 5000ms -8530ms linear infinite; } .sea .wave:nth-child(8)::after { content: ''; position: absolute; left: 63%; width: 113px; height: 329%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -5087ms linear infinite; animation: light 5000ms -5087ms linear infinite; } .sea .wave:nth-child(9) { -webkit-animation: wavey 2500ms -2700ms ease-in-out infinite alternate; animation: wavey 2500ms -2700ms ease-in-out infinite alternate; } .sea .wave:nth-child(9)::before { content: ''; position: absolute; left: 41%; width: 120px; height: 137%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -2571ms linear infinite; animation: light 5000ms -2571ms linear infinite; } .sea .wave:nth-child(9)::after { content: ''; position: absolute; left: 30%; width: 133px; height: 215%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -6227ms linear infinite; animation: light 5000ms -6227ms linear infinite; } .sea .wave:nth-child(10) { -webkit-animation: wavey 2500ms -3000ms ease-in-out infinite alternate; animation: wavey 2500ms -3000ms ease-in-out infinite alternate; } .sea .wave:nth-child(10)::before { content: ''; position: absolute; left: 19%; width: 113px; height: 95%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -5028ms linear infinite; animation: light 5000ms -5028ms linear infinite; } .sea .wave:nth-child(10)::after { content: ''; position: absolute; left: 52%; width: 193px; height: 192%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -8659ms linear infinite; animation: light 5000ms -8659ms linear infinite; } .sea .wave:nth-child(11) { -webkit-animation: wavey 2500ms -3300ms ease-in-out infinite alternate; animation: wavey 2500ms -3300ms ease-in-out infinite alternate; } .sea .wave:nth-child(11)::before { content: ''; position: absolute; left: 63%; width: 153px; height: 306%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -1680ms linear infinite; animation: light 5000ms -1680ms linear infinite; } .sea .wave:nth-child(11)::after { content: ''; position: absolute; left: 40%; width: 151px; height: 84%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -1881ms linear infinite; animation: light 5000ms -1881ms linear infinite; } .sea .wave:nth-child(12) { -webkit-animation: wavey 2500ms -3600ms ease-in-out infinite alternate; animation: wavey 2500ms -3600ms ease-in-out infinite alternate; } .sea .wave:nth-child(12)::before { content: ''; position: absolute; left: 44%; width: 193px; height: 309%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -409ms linear infinite; animation: light 5000ms -409ms linear infinite; } .sea .wave:nth-child(12)::after { content: ''; position: absolute; left: 61%; width: 116px; height: 143%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -1234ms linear infinite; animation: light 5000ms -1234ms linear infinite; } .sea .wave:nth-child(13) { -webkit-animation: wavey 2500ms -3900ms ease-in-out infinite alternate; animation: wavey 2500ms -3900ms ease-in-out infinite alternate; } .sea .wave:nth-child(13)::before { content: ''; position: absolute; left: 75%; width: 155px; height: 262%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -1660ms linear infinite; animation: light 5000ms -1660ms linear infinite; } .sea .wave:nth-child(13)::after { content: ''; position: absolute; left: 22%; width: 159px; height: 178%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -5818ms linear infinite; animation: light 5000ms -5818ms linear infinite; } .sea .wave:nth-child(14) { -webkit-animation: wavey 2500ms -4200ms ease-in-out infinite alternate; animation: wavey 2500ms -4200ms ease-in-out infinite alternate; } .sea .wave:nth-child(14)::before { content: ''; position: absolute; left: 12%; width: 133px; height: 312%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -9853ms linear infinite; animation: light 5000ms -9853ms linear infinite; } .sea .wave:nth-child(14)::after { content: ''; position: absolute; left: 44%; width: 178px; height: 244%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -5356ms linear infinite; animation: light 5000ms -5356ms linear infinite; } .sea .wave:nth-child(15) { -webkit-animation: wavey 2500ms -4500ms ease-in-out infinite alternate; animation: wavey 2500ms -4500ms ease-in-out infinite alternate; } .sea .wave:nth-child(15)::before { content: ''; position: absolute; left: 88%; width: 193px; height: 132%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -1877ms linear infinite; animation: light 5000ms -1877ms linear infinite; } .sea .wave:nth-child(15)::after { content: ''; position: absolute; left: 74%; width: 179px; height: 344%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -3799ms linear infinite; animation: light 5000ms -3799ms linear infinite; } .sea .wave:nth-child(16) { -webkit-animation: wavey 2500ms -4800ms ease-in-out infinite alternate; animation: wavey 2500ms -4800ms ease-in-out infinite alternate; } .sea .wave:nth-child(16)::before { content: ''; position: absolute; left: 70%; width: 118px; height: 123%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -9056ms linear infinite; animation: light 5000ms -9056ms linear infinite; } .sea .wave:nth-child(16)::after { content: ''; position: absolute; left: 11%; width: 170px; height: 313%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -4078ms linear infinite; animation: light 5000ms -4078ms linear infinite; } .sea .wave:nth-child(17) { -webkit-animation: wavey 2500ms -5100ms ease-in-out infinite alternate; animation: wavey 2500ms -5100ms ease-in-out infinite alternate; } .sea .wave:nth-child(17)::before { content: ''; position: absolute; left: 10%; width: 154px; height: 208%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -7291ms linear infinite; animation: light 5000ms -7291ms linear infinite; } .sea .wave:nth-child(17)::after { content: ''; position: absolute; left: 48%; width: 162px; height: 150%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -4830ms linear infinite; animation: light 5000ms -4830ms linear infinite; } .sea .wave:nth-child(18) { -webkit-animation: wavey 2500ms -5400ms ease-in-out infinite alternate; animation: wavey 2500ms -5400ms ease-in-out infinite alternate; } .sea .wave:nth-child(18)::before { content: ''; position: absolute; left: 83%; width: 175px; height: 82%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -6625ms linear infinite; animation: light 5000ms -6625ms linear infinite; } .sea .wave:nth-child(18)::after { content: ''; position: absolute; left: 48%; width: 106px; height: 165%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -4565ms linear infinite; animation: light 5000ms -4565ms linear infinite; } .sea .wave:nth-child(19) { -webkit-animation: wavey 2500ms -5700ms ease-in-out infinite alternate; animation: wavey 2500ms -5700ms ease-in-out infinite alternate; } .sea .wave:nth-child(19)::before { content: ''; position: absolute; left: 45%; width: 116px; height: 336%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -7216ms linear infinite; animation: light 5000ms -7216ms linear infinite; } .sea .wave:nth-child(19)::after { content: ''; position: absolute; left: 79%; width: 180px; height: 200%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -9513ms linear infinite; animation: light 5000ms -9513ms linear infinite; } .sea .wave:nth-child(20) { -webkit-animation: wavey 2500ms -6000ms ease-in-out infinite alternate; animation: wavey 2500ms -6000ms ease-in-out infinite alternate; } .sea .wave:nth-child(20)::before { content: ''; position: absolute; left: 29%; width: 174px; height: 326%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -1524ms linear infinite; animation: light 5000ms -1524ms linear infinite; } .sea .wave:nth-child(20)::after { content: ''; position: absolute; left: 54%; width: 101px; height: 190%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -7981ms linear infinite; animation: light 5000ms -7981ms linear infinite; } .sea .wave:nth-child(21) { -webkit-animation: wavey 2500ms -6300ms ease-in-out infinite alternate; animation: wavey 2500ms -6300ms ease-in-out infinite alternate; } .sea .wave:nth-child(21)::before { content: ''; position: absolute; left: 84%; width: 111px; height: 262%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -8939ms linear infinite; animation: light 5000ms -8939ms linear infinite; } .sea .wave:nth-child(21)::after { content: ''; position: absolute; left: 63%; width: 137px; height: 60%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -9692ms linear infinite; animation: light 5000ms -9692ms linear infinite; } .sea .wave:nth-child(22) { -webkit-animation: wavey 2500ms -6600ms ease-in-out infinite alternate; animation: wavey 2500ms -6600ms ease-in-out infinite alternate; } .sea .wave:nth-child(22)::before { content: ''; position: absolute; left: 22%; width: 102px; height: 215%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -1517ms linear infinite; animation: light 5000ms -1517ms linear infinite; } .sea .wave:nth-child(22)::after { content: ''; position: absolute; left: 17%; width: 164px; height: 75%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -5971ms linear infinite; animation: light 5000ms -5971ms linear infinite; } .sea .wave:nth-child(23) { -webkit-animation: wavey 2500ms -6900ms ease-in-out infinite alternate; animation: wavey 2500ms -6900ms ease-in-out infinite alternate; } .sea .wave:nth-child(23)::before { content: ''; position: absolute; left: 45%; width: 182px; height: 60%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -6573ms linear infinite; animation: light 5000ms -6573ms linear infinite; } .sea .wave:nth-child(23)::after { content: ''; position: absolute; left: 86%; width: 194px; height: 181%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -2824ms linear infinite; animation: light 5000ms -2824ms linear infinite; } .sea .wave:nth-child(24) { -webkit-animation: wavey 2500ms -7200ms ease-in-out infinite alternate; animation: wavey 2500ms -7200ms ease-in-out infinite alternate; } .sea .wave:nth-child(24)::before { content: ''; position: absolute; left: 46%; width: 176px; height: 74%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -9346ms linear infinite; animation: light 5000ms -9346ms linear infinite; } .sea .wave:nth-child(24)::after { content: ''; position: absolute; left: 22%; width: 113px; height: 337%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -4697ms linear infinite; animation: light 5000ms -4697ms linear infinite; } .sea .wave:nth-child(25) { -webkit-animation: wavey 2500ms -7500ms ease-in-out infinite alternate; animation: wavey 2500ms -7500ms ease-in-out infinite alternate; } .sea .wave:nth-child(25)::before { content: ''; position: absolute; left: 64%; width: 173px; height: 262%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -8539ms linear infinite; animation: light 5000ms -8539ms linear infinite; } .sea .wave:nth-child(25)::after { content: ''; position: absolute; left: 74%; width: 169px; height: 320%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -8914ms linear infinite; animation: light 5000ms -8914ms linear infinite; } .sea .wave:nth-child(26) { -webkit-animation: wavey 2500ms -7800ms ease-in-out infinite alternate; animation: wavey 2500ms -7800ms ease-in-out infinite alternate; } .sea .wave:nth-child(26)::before { content: ''; position: absolute; left: 37%; width: 109px; height: 114%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -9481ms linear infinite; animation: light 5000ms -9481ms linear infinite; } .sea .wave:nth-child(26)::after { content: ''; position: absolute; left: 27%; width: 112px; height: 305%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -1769ms linear infinite; animation: light 5000ms -1769ms linear infinite; } .sea .wave:nth-child(27) { -webkit-animation: wavey 2500ms -8100ms ease-in-out infinite alternate; animation: wavey 2500ms -8100ms ease-in-out infinite alternate; } .sea .wave:nth-child(27)::before { content: ''; position: absolute; left: 16%; width: 149px; height: 88%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -3883ms linear infinite; animation: light 5000ms -3883ms linear infinite; } .sea .wave:nth-child(27)::after { content: ''; position: absolute; left: 79%; width: 163px; height: 106%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -5177ms linear infinite; animation: light 5000ms -5177ms linear infinite; } .sea .wave:nth-child(28) { -webkit-animation: wavey 2500ms -8400ms ease-in-out infinite alternate; animation: wavey 2500ms -8400ms ease-in-out infinite alternate; } .sea .wave:nth-child(28)::before { content: ''; position: absolute; left: 38%; width: 175px; height: 322%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -992ms linear infinite; animation: light 5000ms -992ms linear infinite; } .sea .wave:nth-child(28)::after { content: ''; position: absolute; left: 36%; width: 115px; height: 129%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -3279ms linear infinite; animation: light 5000ms -3279ms linear infinite; } .sea .wave:nth-child(29) { -webkit-animation: wavey 2500ms -8700ms ease-in-out infinite alternate; animation: wavey 2500ms -8700ms ease-in-out infinite alternate; } .sea .wave:nth-child(29)::before { content: ''; position: absolute; left: 23%; width: 182px; height: 120%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -1070ms linear infinite; animation: light 5000ms -1070ms linear infinite; } .sea .wave:nth-child(29)::after { content: ''; position: absolute; left: 1%; width: 126px; height: 317%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -628ms linear infinite; animation: light 5000ms -628ms linear infinite; } .sea .wave:nth-child(30) { -webkit-animation: wavey 2500ms -9000ms ease-in-out infinite alternate; animation: wavey 2500ms -9000ms ease-in-out infinite alternate; } .sea .wave:nth-child(30)::before { content: ''; position: absolute; left: 79%; width: 191px; height: 100%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -4220ms linear infinite; animation: light 5000ms -4220ms linear infinite; } .sea .wave:nth-child(30)::after { content: ''; position: absolute; left: 59%; width: 186px; height: 118%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -1951ms linear infinite; animation: light 5000ms -1951ms linear infinite; } .sea .wave:nth-child(31) { -webkit-animation: wavey 2500ms -9300ms ease-in-out infinite alternate; animation: wavey 2500ms -9300ms ease-in-out infinite alternate; } .sea .wave:nth-child(31)::before { content: ''; position: absolute; left: 76%; width: 183px; height: 113%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -5011ms linear infinite; animation: light 5000ms -5011ms linear infinite; } .sea .wave:nth-child(31)::after { content: ''; position: absolute; left: 71%; width: 130px; height: 334%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -3880ms linear infinite; animation: light 5000ms -3880ms linear infinite; } .sea .wave:nth-child(32) { -webkit-animation: wavey 2500ms -9600ms ease-in-out infinite alternate; animation: wavey 2500ms -9600ms ease-in-out infinite alternate; } .sea .wave:nth-child(32)::before { content: ''; position: absolute; left: 25%; width: 168px; height: 330%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -6987ms linear infinite; animation: light 5000ms -6987ms linear infinite; } .sea .wave:nth-child(32)::after { content: ''; position: absolute; left: 17%; width: 157px; height: 73%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -3320ms linear infinite; animation: light 5000ms -3320ms linear infinite; } .sea .wave:nth-child(33) { -webkit-animation: wavey 2500ms -9900ms ease-in-out infinite alternate; animation: wavey 2500ms -9900ms ease-in-out infinite alternate; } .sea .wave:nth-child(33)::before { content: ''; position: absolute; left: 66%; width: 116px; height: 55%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -7758ms linear infinite; animation: light 5000ms -7758ms linear infinite; } .sea .wave:nth-child(33)::after { content: ''; position: absolute; left: 28%; width: 130px; height: 111%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -2563ms linear infinite; animation: light 5000ms -2563ms linear infinite; } .sea .wave:nth-child(34) { -webkit-animation: wavey 2500ms -10200ms ease-in-out infinite alternate; animation: wavey 2500ms -10200ms ease-in-out infinite alternate; } .sea .wave:nth-child(34)::before { content: ''; position: absolute; left: 19%; width: 127px; height: 103%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -2781ms linear infinite; animation: light 5000ms -2781ms linear infinite; } .sea .wave:nth-child(34)::after { content: ''; position: absolute; left: 29%; width: 154px; height: 137%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -4241ms linear infinite; animation: light 5000ms -4241ms linear infinite; } .sea .wave:nth-child(35) { -webkit-animation: wavey 2500ms -10500ms ease-in-out infinite alternate; animation: wavey 2500ms -10500ms ease-in-out infinite alternate; } .sea .wave:nth-child(35)::before { content: ''; position: absolute; left: 47%; width: 138px; height: 51%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -6766ms linear infinite; animation: light 5000ms -6766ms linear infinite; } .sea .wave:nth-child(35)::after { content: ''; position: absolute; left: 73%; width: 159px; height: 109%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -7526ms linear infinite; animation: light 5000ms -7526ms linear infinite; } .sea .wave:nth-child(36) { -webkit-animation: wavey 2500ms -10800ms ease-in-out infinite alternate; animation: wavey 2500ms -10800ms ease-in-out infinite alternate; } .sea .wave:nth-child(36)::before { content: ''; position: absolute; left: 21%; width: 179px; height: 348%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -7042ms linear infinite; animation: light 5000ms -7042ms linear infinite; } .sea .wave:nth-child(36)::after { content: ''; position: absolute; left: 32%; width: 119px; height: 98%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 100%); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-animation: light 5000ms -3380ms linear infinite; animation: light 5000ms -3380ms linear infinite; } .sea .wave:nth-child(37) { -webkit-animation: wavey 2500ms -11100ms ease-in-out infinite alternate; animation: wavey 2500ms -11100ms ease-in-out infinite alternate; } .sea .wave:nth-child(37)::before { content: ''; position: absolute; left: 2%; width: 128px; height: 278%; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(30%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 30%, rgba(255, 255, 255, 0) 10.........完整代码请登录后点击上方下载按钮下载查看
网友评论0