css实现三维海面波浪帆船行驶动画效果代码-html代码-BFW代码库

代码语言：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 {
	-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:l.........完整代码请登录后点击上方下载按钮下载查看