css3小船水面游动动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3小船水面游动动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css3小船水面游动动画特效</title>
<style>
*{padding:0;margin:0;}
body{
	position:relative;
	background:#0cc;
	overflow:hidden;
}
.land{
	height:100px;
	width:100%;
	position:absolute;
	top:270px;
	background:#afa;
}
.land_01{
	width:0;
	height:0;
	border-left:300px solid transparent;
	border-bottom:120px solid #afa;
	position:absolute;
	left:0px;
	top:-120px;
}
.land_01:after{
	content:"";
	width:0;
	height:0;
	border-right:150px solid transparent;
	border-bottom:120px solid #afa;
	position:absolute;
}
.land_02{
	width:0;
	height:0;
	border-left:300px solid transparent;
	border-bottom:100px solid #afa;
	position:absolute;
	left:150px;
	top:-100px;
}
.land_02:after{
	content:"";
	width:0;
	height:0;
	border-right:350px solid transparent;
	border-bottom:100px solid #afa;
	position:absolute;
	left:0px;
}
.land_03{
	width:0;
	height:0;
	border-left:200px solid transparent;
	border-bottom:20px solid #afa;
	position:absolute;
	left:700px;
	top:-20px;
}
.land_03:after{
	content:"";
	width:0;
	height:0;
	border-right:150px solid transparent;
	border-bottom:20px solid #afa;
	position:absolute;
	left:0px;
}
.land_04{
	width:0;
	height:0;
	border-left:200px solid transparent;
	border-bottom:50px solid #afa;
	position:absolute;
	left:1000px;
	top:-50px;
}
.land_04:after{
	content:"";
	width:0;
	height:0;
	border-right:150px solid transparent;
	border-bottom:50px solid #afa;
	position:absolute;
	left:0px;
}
.ship{
	position:absolute;
	width:400px;
	height:370px;
	top:100px;
	left:0%;
	animation:boat 20s infinite;
	-webkit-animation:boat 20s infinite;
}
.ship_01{
	width:0;
	height:0;
	border-left:150px solid transparent;
	border-bottom:300px solid #ff5d89;
	position:absolute;
	left:140px;
}
.ship_01:before{
	content:"";
	width:0px;
	height:0px;
	border-left:80px solid transparent;
	border-bottom:180px solid #FF5D89;
	position:absolute;
	left:-275px;
	top:120px;
}
.ship_02{
	width:250px;
	height:40px;
	background:#ff5d89;
	position:absolute;
	top:300px;
	left:100px;
}
.ship_02:before,.ship_02:after{
	content:"";
	width:0;
	height:0;
	border-top:40px solid #ff5d89;
	position:absolute;
	
}
.ship_02:before{border-left:40px solid transparent;left:-40px;}
.ship_02:after{border-right:40px solid transparent;right:-40px;}
.ship_03{
	width:0;
	height:0;
	border-right:90px solid transparent;
	border-bottom:280px solid #ff5d89;
	position:absolute;
	left:300px;
	top:20px
}
.ship_03:before{
	content:"";
	width:0px;
	height:0px;
	border-right:90px solid transparent;
	border-bottom:25px solid #0cc;
	position:absolute;
	top:255px;
}
@keyframes boat{
	0%{left:0%;}
	100%{left:90%;}
}
@-webkit-keyframes boat{
	0%{left:0%;}
	100%{left:90%;}
}
</style>
</head>
<body>

<div class="land">
	<div class="land_01"></div>
	<div class="land_02"></div>
	<div class="land_03"></div>
	<div class="land_04"></div>
</div>

<div class="ship">
	<div class="ship_01"></div>
	<div class="ship_02"></div>
	<div class="ship_03"></div>
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)