纯css3实现金鱼游动

版权：原创更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]
以下是纯css3实现金鱼游动的示例演示效果:
当前平台(PC电脑)
平台:
整屏预览
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>纯css3实现金鱼游动</title>
</head>
<body>
<div id='top'>
</div>
<div id='foot' style='position:relative;'>
<div id='main' style='position:relative;'>
<div id='div1'>
	
</div>
<div id='div2'>
	<span>.</span>
</div>
<div id='div10'>
	<div id='div8'>
	</div>
	<div id='div9'>
	</div>
</div>
<div id='div5'>
</div>
<div id='div11'>
	<div id='div6'>
	</div>
	<div id='div7'>
	</div>
</div>
<div class='wing'>
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
<div class='wing2'>
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
</div>

<div id='bottom' style='position:relative;'>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>
</div>
</body>
</html>

    	<style>*{padding:0;margin:0;}
body {
	position:relative;
	background:#b5f6f8;
	width:100%;
	height:100%;
	overflow:hidden;
}
@-webkit-keyframes move{
	100%{
		-webkit-transform:translate(-1000px,0px);
	}
}
#main {
	position:relative;
	height:500px;
	-webkit-transform:translate(1500px,0px);
	-webkit-animation:move 30s linear infinite;
}

#div1 {
	position:absolute;
	top:100px;
	left:20px;
	width:500px;
	height:500px;
	background:red;
	box-shadow:2px 40px 100px #fff inset;
	border-top-left-radius:400px;
	border-bottom-left-radius:400px;
	-webkit-border-top-left-radius:400px;
	-webkit-border-bottom-left-radius:400px;
	border-top-right-radius:500px;
	border-bottom-right-radius:500px;
	-webkit-border-top-right-radius:500px;
	-webkit-border-bottom-right-radius:500px;
	-webkit-transform:scale(1, 0.4);
	z-index:1000;
}
#div2{
	position:absolute;
	top:300px;
	left:90px;
	width:50px;
	height:50px;
	background:#fff;
	border:2px solid #ccc;
	border-radius:50px;
	-webkit-border-radius:50px;
	z-index:2000;
}
#div2 span{
	font-size:50px;
	line-height:50px;
}
@-webkit-keyframes myanimats{
	5%{
		top:340px;
		left:15px;
		border:1px solid #a0f7fa;
		background:#a0f7fa;
		width:10px;
		height:10px;
		border-radius:10px;
		box-shadow: 0 1px 5px #f5f6f6 inset;
		-webkit-box-shadow: 0 1px 5px #f5f6f6 inset;
	}
	20%{
		left:5px;
	}
	99%{
		top:-150px;
		border:1px solid #8df6fa;
		background:#c7fdff;
		width:100px;
		height:100px;
		border-radius:100px;
		box-shadow: 0 10px 50px #f5f6f6 inset;
		-webkit-box-shadow: 0 10px 50px #f5f6f6 inset;
	}
	100%{
		top:-200px;
		width:0px;
		height:0px;
		border:1px solid transparent;
		border-radius:0px;
	}
}
#div5{
	position:absolute;
	top:340px;
	left:15px;
	width:5px;
	height:5px;
	border:1px solid transparent;
	background:transparent;
	border-radius:10px;
	-webkit-border-radius:10px;
	z-index:1500;
	-webkit-animation:myanimats 10s ease-out infinite;
}
#div6 {
	position:absolute;
	left:-14px;
	top:-15px;
	width:0;
	height:0;
	border:20px solid transparent;
	border-left:20px solid red;
}
#div7 {
	position:absolute;
	left:-24px;
	top:-15px;
	width:0;
	height:0;
	border:20px solid transparent;
	border-left:20px solid #b5f6f8;
	z-index:2500;
}
@-webkit-keyframes tail{
	25%{
		-webkit-transform: skew(15deg, 20deg);
	}
	50%{
		-webkit-transform: skew(0deg, 0deg);
	}
	75%{
		-webkit-transform: skew(-15deg, -20deg);
	}
	100%{
		-webkit-transform: skew(0deg, 0deg);
	}
}
#div8 {
	position:absolute;
	top:-65px;
	left:-65px;
	width:0;
	height:0;
	border:70px solid transparent;
	border-right:170px solid red;
	-webkit-transform: skew(0deg, 0deg);
	-webkit-transform-origin:center center;
}

#div9{
	position:absolute;
	top:-65px;
	left:100px;
	width:150px;
	height:150px;
	background:#b5f6f8;
	border-radius:150px;
	-webkit-border-radius:150px;
	-webkit-transform: scale(0.5, 1) skew(0deg, 0deg);
	z-index:500;
}
#div10 {
	position:absolute;
	top:342px;
	left:503px;
	width:10px;
	height:10px;
	background:transparent;
	border:1px solid #000;
	-webkit-animation:tail 5s linear infinite;
}
@-webkit-keyframes eyes {
	25%{
		top:-35px;
		left:10px
	}
	50%{
		top:0px;
		left:40px
	}
	75%{
		top:8px;
		left:10px
	}
	100%{
		top:0px;
		left:0px
	}
}
#div2 span {
	position:absolute;
	top:0px;
	left:0px;
	display:block;
	width:5px;
	height:5px;
	-webkit-animation:eyes 5s linear infinite;
}
@-webkit-keyframes mouse {
	50%{
		-webkit-transform:scale(1,0.2);
	}
	100%{
		-webkit-transform:scale(1);
	}
}
#div11 {
	position:absolute;
	top:345px;
	left:34px;
	z-index:3000;
	width:10px;
	height:10px;
	-webkit-transform:scale(1);
	-webkit-animation:mouse 7s linear infinite;
}
#top{
	width:100%;
	height:100px;
	background:#fff;
}
#bottom{
	position:relative;
	width:100%;
	height:200px;
	background:#4b3934;
}
#bottom ul {
	position:absolute;
	top:-20px;
	z-index:2000;
}
#bottom ul:first-child li,#bottom ul:last-child li{
	width:100px;
	height:80px;
	display:inline-block;
	background:#989898;
	-webkit-transform:skew(-20deg);
}
#bottom ul:first-child li:nth-of-type(2n), #bottom ul:last-child li:nth-of-type(2n){
	margin-left:70px;
	border-top-left-radius: 100px;
	border-top-right-radius: 60px;
	border-bottom-left-radius: 60px;
	border-bottom-right-radius: 150px;
	-webkit-transform:scale(0.5);
	margin-top:10px;
	
}
#bottom ul:first-child li:nth-of-type(2n+1), #bottom ul:last-child li:nth-of-type(2n+1){
	margin-left:20px;
	border-top-left-radius: 60px;
	border-top-right-radius: 100px;
	border-bottom-left-radius: 100px;
	border-bottom-right-radius: 60px;
}
#bottom ul:last-child li:nth-of-type(2n+1) {
	-webkit-transform: scale(0.5, 0.1) translate(15px, -340px);
	box-shadow:2px 5px 20px #fff inset;
}
@-webkit-keyframes wings{
	25%{
		-webkit-transform:translate(10px,100px) scale(0.6, 0.3) skew(0deg, -20deg);
	}
	50%{
		-webkit-transform:translate(10px,100px) scale(0.6, 0.3) skew(0deg, 0deg);
	}
	75%{
		-webkit-transform:translate(10px,100px) scale(0.6, 0.3) skew(0deg, 20deg);
	}
	100%{
		-webkit-transform:translate(10px,100px) scale(0.6, 0.3) skew(0deg, 0deg);
	}
}
.wing, .wing2{
	position:absolute;
	top:200px;
	left:200px;
}
.wing {
	-webkit-transform:translate(-100px,0px);
}
.wing2 {
	-webkit-transform:translate(10px,100px) scale(0.6, 0.3);
	-webkit-animation:wings 5s linear infinite;
	z-index:3000;
}
.wing ul li, .wing2 ul li{
	position:absolute;
	display:inline-block;
	width:300px;
	height:150px;
	border-top-left-radius:150px;
	border-bottom-right-radius:150px;
	background:red;
	-webkit-transform-origin: bottom left;
}
.wing ul li {
	box-shadow:1px 5px 10px #fff inset;
}
.wing2 ul li {
	box-shadow:1px 10px 40px #fff inset;
}
.wing ul li:nth-of-type(1), .wing2 ul li:nth-of-type(1){
	-webkit-transform:skew(-10deg,10deg);
}
.wing ul li:nth-of-type(2), .wing2 ul li:nth-of-type(2){
	-webkit-transform:skew(-10deg,20deg) scale(0.9, 0.9);
}
.wing ul li:nth-of-type(3), .wing2 ul li:nth-of-type(2){
	-webkit-transform:skew(-10deg,30deg) scale(0.8, 0.8);
}</style>
附件:下载该文件资源,减少时间成本(增值服务)