css实现夏日海中冲浪划船动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现夏日海中冲浪划船动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #fff; height: 100vh; overflow: hidden; display: flex; font-family: "Anton", sans-serif; justify-content: center; align-items: center; perspective: 500px; } div { transform-style: preserve-3d; } .sea { position: absolute; left: -300px; top: -300px; } .sea .surface { position: absolute; height: 600px; width: 600px; background: #2BE3FA; overflow: hidden; -webkit-animation: surface 13000ms ease-in-out infinite alternate, rotateZ 20000ms linear infinite; animation: surface 13000ms ease-in-out infinite alternate, rotateZ 20000ms linear infinite; } .sea .surface .inner { width: 600px; height: 600px; animation: rotateZ 20000ms linear infinite reverse; } .ship { position: absolute; top: -15px; left: -50px; filter: drop-shadow(-30px 40px 0 rgba(0, 0, 0, 0.1)); } .ship .rotate { transform: rotateZ(10deg); -webkit-animation: ship 30000ms linear infinite alternate; animation: ship 30000ms linear infinite alternate; } .ship .human { position: absolute; top: 0; left: 40px; } .ship .human .hat { position: absolute; width: 30px; height: 30px; background: #F0F09E; border-radius: 100%; -webkit-animation: hat 1000ms ease-in-out infinite alternate; animation: hat 1000ms ease-in-out infinite alternate; } .ship .human .hat::before { content: ""; position: absolute; top: 7px; left: 7px; width: 16px; height: 16px; border: 1px solid #D9845D; border-radius: 100%; box-sizing: border-box; transform: translateZ(5px); transform-style: preserve-3d; } .ship .human .leg { position: absolute; width: 20px; height: 8px; background: #0849A3; border-radius: 40%; } .ship .human .leg::before { content: ""; position: absolute; left: -4px; width: 5px; height: 7px; background: #fff; border-radius: 40%; } .ship .human .leg.-left { top: 16px; left: -10px; transform: rotateZ(-5deg); } .ship .human .leg.-left::before { top: 1px; } .ship .human .leg.-right { top: 6px; left: -10px; transform: rotateZ(5deg); } .ship .human .leg.-right::before { top: -1px; } .ship .body { position: relative; } .ship .body .base { width: 100px; height: 30px; background: #D9845D; border-radius: 45% 45% 45% 45%; } .ship .body .base::before { content: ""; position: absolute; top: 2px; left: 2px; width: 96px; height: 26px; background: #DEAD5E; border-radius: 100%; border-radius: 45% 45% 45% 45%; } .ship .body .board { position: absolute; top: 5px; width: 10px; height: 20px; background: #D9845D; border-radius: 2px; } .ship .body .board.-front { right: 20px; } .ship .body .board.-back { left: 20px; } .ship .body .waves { position: absolute; } .ship .body .waves .wave { position: absolute; -webkit-animation: wave 2000ms linear infinite; animation: wave 2000ms linear infinite; } .ship .body .waves .wave .graphic { background: #fff; -webkit-animation: surface 2000ms ease-in-out infinite alternate, rotateZ 6000ms linear infinite; animation: surface 2000ms ease-in-out infinite alternate, rotateZ 6000ms linear infinite; } .ship .body .waves .bodywaves .wave:nth-child(1) { top: 2px; left: 13px; -webkit-animation-delay: -1597ms; animation-delay: -1597ms; } .ship .body .waves .bodywaves .wave:nth-child(1) .graphic { width: 11px; height: 12px; } .ship .body .waves .bodywaves .wave:nth-child(2) { top: -1px; left: 37px; -webkit-animation-delay: -1835ms; animation-delay: -1835ms; } .ship .body .waves .bodywaves .wave:nth-child(2) .graphic { width: 18px; height: 12px; } .ship .body .waves .bodywaves .wave:nth-child(3) { top: 11px; left: 43px; -webkit-animation-delay: -797ms; animation-delay: -797ms; } .ship .body .waves .bodywaves .wave:nth-child(3) .graphic { width: 11px; height: 12px; } .ship .body .waves .bodywaves .wave:nth-child(4) { top: 7px; left: 25px; -webkit-animation-delay: -3146ms; animation-delay: -3146ms; } .ship .body .waves .bodywaves .wave:nth-child(4) .graphic { width: 9px; height: 17px; } .ship .body .waves .bodywaves .wave:nth-child(5) { top: -2px; left: 47px; -webkit-animation-delay: -3741ms; animation-delay: -3741ms; } .ship .body .waves .bodywaves .wave:nth-child(5) .graphic { width: 11px; height: 14px; } .ship .body .waves .bodywaves .wave:nth-child(6) { top: 15px; left: 49px; -webkit-animation-delay: -3107ms; animation-delay: -3107ms; } .ship .body .waves .bodywaves .wave:nth-child(6) .graphic { width: 11px; height: 16px; } .ship .body .waves .bodywaves .wave:nth-child(7) { top: 13px; left: 27px; -webkit-animation-delay: -2166ms; animation-delay: -2166ms; } .ship .body .waves .bodywaves .wave:nth-child(7) .graphic { width: 13px; height: 11px; } .ship .body .waves .bodywaves .wave:nth-child(8) { top: 10px; left: 54px; -webkit-animation-delay: -3821ms; animation-delay: -3821ms; } .ship .body .waves .bodywaves .wave:nth-child(8) .graphic { width: 13px; height: 14px; } .ship .body .waves .bodywaves .wave:nth-child(9) { top: 9px; left: 45px; -webkit-animation-delay: -3382ms; animation-delay: -3382ms; } .ship .body .waves .bodywaves .wave:nth-child(9) .graphic { width: 16px; height: 16px; } .ship .body .waves .bodywaves .wave:nth-child(10) { top: -2px; left: 37px; -webkit-animation-delay: -1815ms; animation-delay: -1815ms; } .ship .body .waves .bodywaves .wave:nth-child(10) .graphic { width: 11px; height: 15px; } .ship .body .waves .bodywaves .wave:nth-child(11) { top: -2px; left: 46px; -webkit-animation-delay: -3339ms; animation-delay: -3339ms; } .ship .body .waves .bodywaves .wave:nth-child(11) .graphic { width: 11px; height: 9px; } .ship .body .waves .bodywaves .wave:nth-child(12) { top: 4px; left: 30px; -webkit-animation-delay: -2773ms; animation-delay: -2773ms; } .ship .body .waves .bodywaves .wave:nth-child(12) .graphic { width: 14px; height: 18px; } .ship .body .waves .bodywaves .wave:nth-child(13) { top: 9px; left: 38px; -webkit-animation-delay: -70ms; animation-delay: -70ms; } .ship .body .waves .bodywaves .wave:nth-child(13) .graphic { width: 13px; height: 11px; } .ship .body .waves .bodywaves .wave:nth-child(14) { top: 4px; left: 25px; -webkit-animation-delay: -2333ms; animation-delay: -2333ms; } .ship .body .waves .bodywaves .wave:nth-child(14) .graphic { width: 18px; height: 17px; } .ship .body .waves .bodywaves .wave:nth-child(15) { top: 12px; left: 30px; -webkit-animation-delay: -1178ms; animation-delay: -1178ms; } .ship .body .waves .bodywaves .wave:nth-child(15) .graphic { width: 18px; height: 14px; } .ship .body .waves .bodywaves .wave:nth-child(16) { top: 4px; left: 59px; -webkit-animation-delay: -1625ms; animation-delay: -1625ms; } .ship .body .waves .bodywaves .wave:nth-child(16) .graphic { width: 15px; height: 12px; } .ship .body .waves .bodywaves .wave:nth-child(17) { top: 4px; left: 29px; -webkit-animation-delay: -3097ms; animation-delay: -3097ms; } .ship .body .waves .bodywaves .wave:nth-child(17) .graphic { width: 16px; height: 15px; } .ship .body .waves .bodywaves .wave:nth-child(18) { top: 1px; left: 47px; -webkit-animation-delay: -1838ms; animation-delay: -1838ms; } .ship .body .waves .bodywaves .wave:nth-child(18) .graphic { width: 12px; height: 10px; } .ship .body .waves .bodywaves .wave:nth-child(19) { top: 16px; left: 32px; -webkit-animation-delay: -2615ms; animation-delay: -2615ms; } .ship .body .waves .bodywaves .wave:nth-child(19) .graphic { width: 15px; height: 16px; } .ship .body .waves .bodywaves .wave:nth-child(20) { top: 1px; left: 30px; -webkit-animation-delay: -988ms; animation-delay: -988ms; } .ship .body .waves .bodywaves .wave:nth-child(20) .graphic { width: 17px; height: 17px; } .ship .body .waves .bodywaves .wave:nth-child(21) { top: 8px; left: 55px; -webkit-animation-delay: -2783ms; animation-delay: -2783ms; } .ship .body .waves .bodywaves .wave:nth-child(21) .graphic { width: 18px; height: 12px; } .ship .body .waves .bodywaves .wave:nth-child(22) { top: 1px; left: 17px; -webkit-animation-delay: -512ms; animation-delay: -512ms; } .ship .body .waves .bodywaves .wave:nth-child(22) .graphic { width: 13px; height: 14px; } .ship .body .waves .bodywaves .wave:nth-child(23) { top: 12px; left: 46px; -webkit-animation-delay: -1875ms; animation-delay: -1875ms; } .ship .body .waves .bodywaves .wave:nth-child(23) .graphic { width: 13px; height: 10px; } .ship .body .waves .bodywaves .wave:nth-child(24) { top: 11px; left: 13px; -webkit-animation-delay: -2327ms; animation-delay: -2327ms; } .ship .body .waves .bodywaves .wave:nth-child(24) .graphic { width: 16px; height: 17px; } .ship .body .waves .bodywaves .wave:nth-child(25) { top: 16px; left: 59px; -webkit-animation-delay: -3560ms; animation-delay: -3560ms; } .ship .body .waves .bodywaves .wave:nth-child(25) .graphic { width: 16px; height: 9px; } .ship .body .waves .bodywaves .wave:nth-child(26) { top: 13px; left: 57px; -webkit-animation-delay: -3630ms; animation-delay: -3630ms; } .ship .body .waves .bodywaves .wave:nth-child(26) .graphic { width: 11px; height: 11px; } .ship .body .waves .bodywaves .wave:nth-child(27) { top: -1px; left: 38px; -webkit-animation-delay: -2488ms; animation-delay: -2488ms; } .ship .body .waves .bodywaves .wave:nth-child(27) .graphic { width: 13px; height: 16px; } .ship .body .waves .bodywaves .wave:nth-child(28) { top: 8px; left: 18px; -webkit-animation-delay: -3214ms; animation-delay: -3214ms; } .ship .body .waves .bodywaves .wave:nth-child(28) .graphic { width: 17px; height: 11px; } .ship .body .waves .bodywaves .wave:nth-child(29) { top: 15px; left: 49px; -webkit-animation-delay: -288ms; animation-delay: -288ms; } .ship .body .waves .bodywaves .wave:nth-child(29) .graphic { width: 17px; height: 15px; } .ship .body .waves .bodywaves .wave:nth-child(30) { top: 10px; left: 59px; -webkit-animation-delay: -3917ms; animation-delay: -3917ms; } .ship .body .waves .bodywaves .wave:nth-child(30) .graphic { width: 14px; height: 15px; } .ship .body .waves .bodywaves .wave:nth-child(31) { top: 8px; left: 14px; -webkit-animation-delay: -2976ms; animation-delay: -2976ms; } .ship .body .waves .bodywaves .wave:nth-child(31) .graphic { width: 14px; height: 15px; } .ship .body .waves .bodywaves .wave:nth-child(32) { top: 15px; left: 41px; -webkit-animation-delay: -370ms; animation-delay: -370ms; } .ship .body .waves .bodywaves .wave:nth-child(32) .graphic { width: 9px; height: 9px; } .ship .body .waves .bodywaves .wave:nth-child(33) { top: 16px; left: 54px; -webkit-animation-delay: -3035ms; animation-delay: -3035ms; } .ship .body .waves .bodywaves .wave:nth-child(33) .graphic { width: 13px; height: 9px; } .ship .body .waves .bodywaves .wave:nth-child(34) { top: 7px; left: 54px; -webkit-animation-delay: -3440ms; animation-delay: -3440ms; } .ship .body .waves .bodywaves .wave:nth-child(34) .graphic { width: 17px; height: 18px; } .ship .body .waves .bodywaves .wave:nth-child(35) { top: 5px; left: 24px; -webkit-animation-delay: -1800ms; animation-delay: -1800ms; } .ship .body .waves .bodywaves .wave:nth-child(35) .graphic { width: 12px; height: 9px; } .ship .body .waves .bodywaves .wave:nth-child(36) { top: 7px; left: 27px; -webkit-animation-delay: -2200ms; animation-delay: -2200ms; } .ship .body .waves .bodywaves .wave:nth-child(36) .graphic { width: 13px; height: 17px; } .ship .body .waves .bodywaves .wave:nth-child(37) { top: 13px; left: 35px; -webkit-animation-delay: -2391ms; animation-delay: -2391ms; } .ship .body .waves .bodywaves .wave:nth-child(37) .graphic { width: 11px; height: 16px; } .ship .body .waves .bodywaves .wave:nth-child(38) { top: 15px; left: 41px; -webkit-animation-delay: -2384ms; animation-delay: -2384ms; } .ship .body .waves .bodywaves .wave:nth-child(38) .graphic { width: 15px; height: 9px; } .ship .body .waves .bodywaves .wave:nth-child(39) { top: 7px; left: 36px; -webkit-animation-delay: -2884ms; animation-delay: -2884ms; } .ship .body .waves .bodywaves .wave:nth-child(39) .graphic { width: 15px; height: 18px; } .ship .body .waves .bodywaves .wave:nth-child(40) { top: 7px; left: 41px; -webkit-animation-delay: -1961ms; animation-delay: -1961ms; } .ship .body .waves .bodywaves .wave:nth-child(40) .graphic { width: 12px; height: 9px; } .ship .body .waves .bodywaves .wave:nth-child(41) { top: 14px; left: 51px; -webkit-animation-delay: -34ms; animation-delay: -34ms; } .ship .body .waves .bodywaves .wave:nth-child(41) .graphic { width: 14px; height: 14px; } .ship .body .waves .bodywaves .wave:nth-child(42) { top: 11px; left: 49px; -webkit-animation-delay: -2030ms; animation-delay: -2030ms; } .ship .body .waves .bodywaves .wave:nth-child(42) .graphic { width: 10px; height: 18px; } .ship .body .waves .bodywaves .wave:nth-child(43) { top: 11px; left: 13px; -webkit-animation-delay: -1931ms; animation-delay: -1931ms; } .ship .body .waves .bodywaves .wave:nth-child(43) .graphic { width: 9px; height: 18px; } .ship .body .waves .bodywaves .wave:nth-child(44) { top: 4px; left: 28px; -webkit-animation-delay: -693ms; animation-delay: -693ms; } .ship .body .waves .bodywaves .wave:nth-child(44) .graphic { width: 14px; height: 13px; } .ship .body .waves .bodywaves .wave:nth-child(45) { top: 5px; left: 32px; -webkit-animation-delay: -3542ms; animation-delay: -3542ms; } .ship .body .waves .bodywaves .wave:nth-child(45) .graphic { width: 15px; height: 15px; } .ship .body .waves .bodywaves .wave:nth-child(46) { top: 16px; left: 43px; -webkit-animation-delay: -3617ms; animation-delay: -3617ms; } .ship .body .waves .bodywaves .wave:nth-child(46) .graphic { width: 12px; height: 18px; } .ship .body .waves .bodywaves .wave:nth-child(47) { top: 5px; left: 42px; -webkit-animation-delay: -1112ms; animation-delay: -1112ms; } .ship .body .waves .bodywaves .wave:nth-child(47) .graphic { width: 16px; height: 11px; } .ship .body .waves .bodywaves .wave:nth-child(48) { top: 4px; left: 21px; -webkit-animation-delay: -2109ms; animation-delay: -2109ms; } .ship .body .waves .bodywaves .wave:nth-child(48) .graphic { width: 12px; height: 13px; } .ship .body .waves .bodywaves .wave:nth-child(49) { top: 6px; left: 31px; -webkit-animation-delay: -375ms; animation-delay: -375ms; } .ship .body .waves .bodywaves .wave:nth-child(49) .graphic { width: 11px; height: 10px; } .ship .body .waves .bodywaves .wave:nth-child(50) { top: 3px; left: 17px; -webkit-animation-delay: -2642ms; animation-delay: -2642ms; } .ship .body .waves .bodywaves .wave:nth-child(50) .graphic { width: 17px; height: 14px; } .ship .body .waves .oarwaves.-left .wave:nth-child(1) { top: -15px; left: 49px; -webkit-animation-delay: -1149ms; animation-delay: -1149ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(1) .graphic { width: 10px; height: 7px; } .ship .body .waves .oarwaves.-left .wave:nth-child(2) { top: -16px; left: 45px; -webkit-animation-delay: -1031ms; animation-delay: -1031ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(2) .graphic { width: 6px; height: 6px; } .ship .body .waves .oarwaves.-left .wave:nth-child(3) { top: -29px; left: 45px; -webkit-animation-delay: -1508ms; animation-delay: -1508ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(3) .graphic { width: 9px; height: 7px; } .ship .body .waves .oarwaves.-left .wave:nth-child(4) { top: -12px; left: 47px; -webkit-animation-delay: -1412ms; animation-delay: -1412ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(4) .graphic { width: 10px; height: 6px; } .ship .body .waves .oarwaves.-left .wave:nth-child(5) { top: -21px; left: 46px; -webkit-animation-delay: -1056ms; animation-delay: -1056ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(5) .graphic { width: 7px; height: 9px; } .ship .body .waves .oarwaves.-left .wave:nth-child(6) { top: -21px; left: 41px; -webkit-animation-delay: -1331ms; animation-delay: -1331ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(6) .graphic { width: 6px; height: 9px; } .ship .body .waves .oarwaves.-left .wave:nth-child(7) { top: -16px; left: 49px; -webkit-animation-delay: -1083ms; animation-delay: -1083ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(7) .graphic { width: 6px; height: 6px; } .ship .body .waves .oarwaves.-left .wave:nth-child(8) { top: -19px; left: 50px; -webkit-animation-delay: -1414ms; animation-delay: -1414ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(8) .graphic { width: 6px; height: 10px; } .ship .body .waves .oarwaves.-left .wave:nth-child(9) { top: -21px; left: 43px; -webkit-animation-delay: -1750ms; animation-delay: -1750ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(9) .graphic { width: 10px; height: 10px; } .ship .body .waves .oarwaves.-left .wave:nth-child(10) { top: -27px; left: 49px; -webkit-animation-delay: -1304ms; animation-delay: -1304ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(10) .graphic { width: 10px; height: 7px; } .ship .body .waves .oarwaves.-left .wave:nth-child(11) { top: -17px; left: 42px; -webkit-animation-delay: -1068ms; animation-delay: -1068ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(11) .graphic { width: 10px; height: 8px; } .ship .body .waves .oarwaves.-left .wave:nth-child(12) { top: -29px; left: 50px; -webkit-animation-delay: -1623ms; animation-delay: -1623ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(12) .graphic { width: 6px; height: 6px; } .ship .body .waves .oarwaves.-left .wave:nth-child(13) { top: -23px; left: 45px; -webkit-animation-delay: -1168ms; animation-delay: -1168ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(13) .graphic { width: 7px; height: 10px; } .ship .body .waves .oarwaves.-left .wave:nth-child(14) { top: -25px; left: 47px; -webkit-animation-delay: -1290ms; animation-delay: -1290ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(14) .graphic { width: 6px; height: 10px; } .ship .body .waves .oarwaves.-left .wave:nth-child(15) { top: -16px; left: 50px; -webkit-animation-delay: -1487ms; animation-delay: -1487ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(15) .graphic { width: 10px; height: 7px; } .ship .body .waves .oarwaves.-left .wave:nth-child(16) { top: -12px; left: 43px; -webkit-animation-delay: -1264ms; animation-delay: -1264ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(16) .graphic { width: 7px; height: 6px; } .ship .body .waves .oarwaves.-left .wave:nth-child(17) { top: -13px; left: 45px; -webkit-animation-delay: -1473ms; animation-delay: -1473ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(17) .graphic { width: 8px; height: 6px; } .ship .body .waves .oarwaves.-left .wave:nth-child(18) { top: -28px; left: 49px; -webkit-animation-delay: -1747ms; animation-delay: -1747ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(18) .graphic { width: 10px; height: 7px; } .ship .body .waves .oarwaves.-left .wave:nth-child(19) { top: -16px; left: 42px; -webkit-animation-delay: -1656ms; animation-delay: -1656ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(19) .graphic { width: 9px; height: 10px; } .ship .body .waves .oarwaves.-left .wave:nth-child(20) { top: -18px; left: 44px; -webkit-animation-delay: -1158ms; animation-delay: -1158ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(20) .graphic { width: 10px; height: 10px; } .ship .body .waves .oarwaves.-left .wave:nth-child(21) { top: -27px; left: 42px; -webkit-animation-delay: -1563ms; animation-delay: -1563ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(21) .graphic { width: 9px; height: 9px; } .ship .body .waves .oarwaves.-left .wave:nth-child(22) { top: -26px; left: 47px; -webkit-animation-delay: -1214ms; animation-delay: -1214ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(22) .graphic { width: 7px; height: 10px; } .ship .body .waves .oarwaves.-left .wave:nth-child(23) { top: -12px; left: 47px; -webkit-animation-delay: -1590ms; animation-delay: -1590ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(23) .graphic { width: 8px; height: 7px; } .ship .body .waves .oarwaves.-left .wave:nth-child(24) { top: -12px; left: 45px; -webkit-animation-delay: -1439ms; animation-delay: -1439ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(24) .graphic { width: 10px; height: 7px; } .ship .body .waves .oarwaves.-left .wave:nth-child(25) { top: -12px; left: 42px; -webkit-animation-delay: -1407ms; animation-delay: -1407ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(25) .graphic { width: 6px; height: 8px; } .ship .body .waves .oarwaves.-left .wave:nth-child(26) { top: -12px; left: 44px; -webkit-animation-delay: -1449ms; animation-delay: -1449ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(26) .graphic { width: 9px; height: 6px; } .ship .body .waves .oarwaves.-left .wave:nth-child(27) { top: -25px; left: 42px; -webkit-animation-delay: -1085ms; animation-delay: -1085ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(27) .graphic { width: 7px; height: 9px; } .ship .body .waves .oarwaves.-left .wave:nth-child(28) { top: -26px; left: 41px; -webkit-animation-delay: -1548ms; animation-delay: -1548ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(28) .graphic { width: 6px; height: 10px; } .ship .body .waves .oarwaves.-left .wave:nth-child(29) { top: -25px; left: 47px; -webkit-animation-delay: -1733ms; animation-delay: -1733ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(29) .graphic { width: 10px; height: 8px; } .ship .body .waves .oarwaves.-left .wave:nth-child(30) { top: -23px; left: 47px; -webkit-animation-delay: -1488ms; animation-delay: -1488ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(30) .graphic { width: 9px; height: 9px; } .ship .body .waves .oarwaves.-left .wave:nth-child(31) { top: -23px; left: 42px; -webkit-animation-delay: -1053ms; animation-delay: -1053ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(31) .graphic { width: 10px; height: 10px; } .ship .body .waves .oarwaves.-left .wave:nth-child(32) { top: -27px; left: 49px; -webkit-animation-delay: -1426ms; animation-delay: -1426ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(32) .graphic { width: 9px; height: 10px; } .ship .body .waves .oarwaves.-left .wave:nth-child(33) { top: -14px; left: 43px; -webkit-animation-delay: -1326ms; animation-delay: -1326ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(33) .graphic { width: 10px; height: 10px; } .ship .body .waves .oarwaves.-left .wave:nth-child(34) { top: -12px; left: 42px; -webkit-animation-delay: -1141ms; animation-delay: -1141ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(34) .graphic { width: 10px; height: 7px; } .ship .body .waves .oarwaves.-left .wave:nth-child(35) { top: -27px; left: 50px; -webkit-animation-delay: -1563ms; animation-delay: -1563ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(35) .graphic { width: 8px; height: 9px; } .ship .body .waves .oarwaves.-left .wave:nth-child(36) { top: -21px; left: 49px; -webkit-animation-delay: -1140ms; animation-delay: -1140ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(36) .graphic { width: 8px; height: 9px; } .ship .body .waves .oarwaves.-left .wave:nth-child(37) { top: -23px; left: 43px; -webkit-animation-delay: -1623ms; animation-delay: -1623ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(37) .graphic { width: 6px; height: 9px; } .ship .body .waves .oarwaves.-left .wave:nth-child(38) { top: -19px; left: 42px; -webkit-animation-delay: -1068ms; animation-delay: -1068ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(38) .graphic { width: 9px; height: 9px; } .ship .body .waves .oarwaves.-left .wave:nth-child(39) { top: -17px; left: 48px; -webkit-animation-delay: -1016ms; animation-delay: -1016ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(39) .graphic { width: 7px; height: 6px; } .ship .body .waves .oarwaves.-left .wave:nth-child(40) { top: -14px; left: 46px; -webkit-animation-delay: -1382ms; animation-delay: -1382ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(40) .graphic { width: 8px; height: 6px; } .ship .body .waves .oarwaves.-left .wave:nth-child(41) { top: -12px; left: 48px; -webkit-animation-delay: -1154ms; animation-delay: -1154ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(41) .graphic { width: 10px; height: 8px; } .ship .body .waves .oarwaves.-left .wave:nth-child(42) { top: -17px; left: 44px; -webkit-animation-delay: -1650ms; animation-delay: -1650ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(42) .graphic { width: 6px; height: 10px; } .ship .body .waves .oarwaves.-left .wave:nth-child(43) { top: -17px; left: 50px; -webkit-animation-delay: -1014ms; animation-delay: -1014ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(43) .graphic { width: 8px; height: 8px; } .ship .body .waves .oarwaves.-left .wave:nth-child(44) { top: -22px; left: 48px; -webkit-animation-delay: -1062ms; animation-delay: -1062ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(44) .graphic { width: 7px; height: 10px; } .ship .body .waves .oarwaves.-left .wave:nth-child(45) { top: -12px; left: 49px; -webkit-animation-delay: -1390ms; animation-delay: -1390ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(45) .graphic { width: 10px; height: 7px; } .ship .body .waves .oarwaves.-left .wave:nth-child(46) { top: -25px; left: 46px; -webkit-animation-delay: -1374ms; animation-delay: -1374ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(46) .graphic { width: 8px; height: 9px; } .ship .body .waves .oarwaves.-left .wave:nth-child(47) { top: -26px; left: 44px; -webkit-animation-delay: -1787ms; animation-delay: -1787ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(47) .graphic { width: 9px; height: 9px; } .ship .body .waves .oarwaves.-left .wave:nth-child(48) { top: -12px; left: 43px; -webkit-animation-delay: -1660ms; animation-delay: -1660ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(48) .graphic { width: 7px; height: 9px; } .ship .body .waves .oarwaves.-left .wave:nth-child(49) { top: -19px; left: 43px; -webkit-animation-delay: -1652ms; animation-delay: -1652ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(49) .graphic { width: 8px; height: 8px; } .ship .body .waves .oarwaves.-left .wave:nth-child(50) { top: -29px; left: 47px; -webkit-animation-delay: -1643ms; animation-delay: -1643ms; } .ship .body .waves .oarwaves.-left .wave:nth-child(50) .graphic { width: 10px; height: 6px; } .ship .body .waves .oarwaves.-right .wave:nth-child(1) { top: 42px; left: 48px; -webkit-animation-delay: -1066ms; animation-delay: -1066ms; } .ship .body .waves .oarwaves.-right .wave:nth-child(1) .graphic { width: 9px; height: 8px; } .ship .body .waves .oarwaves.-right .wave:nth-child(2) { top: 55px; left: 46px; -webkit-animation-delay: -1058ms; animation-delay: -1058ms; } .ship .body .waves .oarwaves.-right .wave:nth-child(2) .graphic { width: 9px; height: 6px; } .ship .body .waves .oarwaves.-right .wave:nth-child(3) { top: 47px; left: 42px; -webkit-animation-delay: -1480ms; animation-delay: -1480ms; } .ship .body .waves .oarwaves.-right .wave:nth-child(3) .graphic { width: 8px; height: 6px; } .ship .body .waves .oarwaves.-right .wave:nth-child(4) { top: 50px; left: 48px; -webkit-animation-delay: -1750ms; animation-delay: -1750ms; } .ship .body .waves .oarwaves.-right .wave:nth-child(4) .graphic { width: 6px; height: 7px; } .ship .body .waves .oarwaves.-right .wave:nth-child(5) { top: 51px; left: 43px; -webkit-animation-delay: -1709ms; animation-delay: -1709ms; } .ship .body .waves .oarwaves.-right .wave:nth-child(5) .graphic { width: 6px; height: 9px; } .ship .body .waves .oarwaves.-right .wave:nth-child(6) { top: 47px; left: 47px; -webkit-animation-delay: -1672ms; animation-delay: -1672ms; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0