纯CSS3海边飞翔的小鸟动画特效代码

版权:原创 更新时间:1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 纯CSS3海边飞翔的小鸟动画特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:

部分效果截图:

纯CSS3海边飞翔的小鸟动画特效代码

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>
<link href="css/zzsc.css" rel="stylesheet" type="text/css">

</head>
<body>
<div id="datouwang">
	<div id="air">
		<div class="rope1crop">
			<div class="rope1"></div>
		</div>

		<div class="rope2crop">
			<div class="rope2"></div>
		</div>

		<div class="rope3crop">
			<div class="rope3"></div>
		</div>

		<div class="rope4crop">
			<div class="rope4"></div>
		</div>

		<div class="rope5crop">
			<div class="rope5"></div>
		</div>

		<div class="rope5acrop">
			<div class="rope5a"></div>
		</div>

		<div class="rope6crop">
			<div class="rope6"></div>
		</div>

		<div class="rope6acrop">
			<div class="rope6a"></div>
		</div>

		<div class="rope7crop">
			<div class="rope7"></div>
		</div>

		<div class="rope7acrop">
			<div class="rope7a"></div>
		</div>

		<div class="rope8crop">
			<div class="rope8"></div>
		</div>

		<div class="rope9crop">
			<div class="rope9"></div>
		</div>

		<div class="rope10crop">
			<div class="rope10"></div>
		</div>

		<div class="rope11crop">
			<div class="rope11"></div>
		</div>

		<div class="rope12crop">
			<div class="rope12"></div>
		</div>

		<div class="rope13crop">
			<div class="rope13"></div>
		</div>

		<div class="rope14crop">
			<div class="rope14"></div>
		</div>

		<div class="rope15crop">
			<div class="rope15"></div>
		</div>

		<div class="rope16crop">
			<div class="rope16"></div>
		</div>

		<div class="rope17crop">
			<div class="rope17"></div>
		</div>

		<div class="rope18crop">
			<div class="rope18"></div>
		</div>

		<div class="rope19crop">
			<div class="rope19"></div>
		</div>

		<div class="rope20crop">
			<div class="rope20"></div>
		</div>
		<div class="bird right" style="top: 5px; left: 112px;">
			<div class="body1"></div>
			<div class="body2"></div>
			<div class="body3"></div>
			<div class="body4"></div>
			<div class="body5"></div>

			<div class="wing">
				<div class="wing1"></div>
				<div class="wing2"></div>
				<div class="wing3crop">
					<div class="wing3"></div>
				</div>
				<div class="wing4"></div>
			</div>

			<div class="eye"></div>
		</div>

		<div class="bird right" style="top: 31px; left: 72px;">
			<div class="body1"></div>
			<div class="body2"></div>
			<div class="body3"></div>
			<div class="body4"></div>
			<div class="body5"></div>

			<div class="wing">
				<div class="wing1"></div>
				<div class="wing2"></div>
				<div class="wing3crop">
					<div class="wing3"></div>
				</div>
				<div class="wing4"></div>
			</div>

			<div class="eye"></div>
		</div>

		<div class="bird right" style="top: 66px; left: 176px;">
			<div class="body1"></div>
			<div class="body2"></div>
			<div class="body3"></div>
			<div class="body4"></div>
			<div class="body5"></div>

			<div class="wing">
				<div class="wing1"></div>
				<div class="wing2"></div>
				<div class="wing3crop">
					<div class="wing3"></div>
				</div>
				<div class="wing4"></div>
			</div>

			<div class="eye"></div>
		</div>

		<div class="bird right" style="top: 35px; left: 262px;">
			<div class="body1"></div>
			<div class="body2"></div>
			<div class="body3"></div>
			<div class="body4"></div>
			<div class="body5"></div>

			<div class="wing">
				<div class="wing1"></div>
				<div class="wing2"></div>
				<div class="wing3crop">
					<div class="wing3"></div>
				</div>
				<div class="wing4"></div>
			</div>

			<div class="eye"></div>
		</div>

		<div class="bird left" style="top: 17px; left: 173px;">
			<div class="body1"></div>
			<div class="body2"></div>
			<div class="body3"></div>
			<div class="body4"></div>
			<div class="body5"></div>

			<div class="wing">
				<div class="wing1"></div>
				<div class="wing2"></div>
				<div class="wing3crop">
					<div class="wing3"></div>
				</div>
				<div class="wing4"></div>
			</div>

			<div class="eye"></div>
		</div>

		<div class="bird left" style="top: 47px; left: 230px;">
			<div class="body1"></div>
			<div class="body2"></div>
			<div class="body3"></div>
			<div class="body4"></div>
			<div class="body5"></div>

			<div class="wing">
				<div class="wing1"></div>
				<div class="wing2"></div>
				<div class="wing3crop">
					<div class="wing3"></div>
				</div>
				<div class="wing4"></div>
			</div>

			<div class="eye"></div>
		</div>

		<div class="bird left" style="top: 94px; left: 250px;">
			<div class="body1"></div>
			<div class="body2"></div>
			<div class="body3"></div>
			<div class="body4" style="margin-top: 6px; height: 10px; left: 9px;"></div>
			<div class="body5"></div>

			<div class="wing">
				<div class="wing1"></div>
				<div class="wing2"></div>
				<div class="wing3crop">
					<div class="wing3"></div>
				</div>
				<div class="wing4"></div>
			</div>

			<div class="eye"></div>
		</div>

		<div class="bird left" style="top: 135px; left: 277px;">
			<div class="body1"></div>
			<div class="body2"></div>
			<div class="body3"></div>
			<div class="body4"></div>
			<div class="body5"></div>

			<div class="wing">
				<div class="wing1"></div>
				<div class="wing2"></div>
				<div class="wing3crop">
					<div class="wing3"></div>
				</div>
				<div class="wing4"></div>
			</div>

			<div class="eye"></div>
		</div>

		<div id="whale">
			<div id="whale1"></div>
			<div id="whale2"></div>
			<div id="whale3-crop">
				<div id="whale3"></div>
			</div>
			<div id="whale4"></div>
			<div id="whale5crop">
				<div id="whale5"></div>
			</div>
			<div id="whale6"></div>
			<div id="whale7"></div>

			<div id="whaletail1"></div>
			<div id="whaletail2"></div>
			<div id="whaletail3"></div>
			<div id="whaletail4"></div>
			<div id="whaletail5"></div>
			<div id="whaletail6"></div>
			<div id="whaletail7"></div>
			<div id="whaletail8"></div>

			<div id="eye1"></div>
			<div id="eye2"></div>

		</div>
	</div>
	<div id="wavecontainer">
	<div class="waves fore">
		<div class="waveleft"><div class="inner"></div></div>
		<div class="waveright"><div class="inner"></div></div>
		<div class="waveleft"><div class="inner"></div></div>
		<div class="waveright"><div class="inner"></div></div>
		<div class="waveleft"><div class="inner"></div></div>
		<div class="waveright"><div class="inner"></div></div>
		<div class="waveleft"><div class="inner"></div></div>
		<div class="waveright"><div class="inner"></div></div>
		<div class="waveleft"><div class="inner"></div></div>
		<div class="waveright"><div class="inner"></div></div>
		<div class="waveleft"><div class="inner"></div></div>
		<div class="waveright"><div class="inner"></div></div>
		<div class="waveleft"><div class="inner"></div></div>
		<div class="waveright"><div class="inner"></div></div>
		<div class="waveleft"><div class="inner"></div></div>
		<div class="waveright"><div class="inner"></div></div>
		<div class="waveleft"><div class="inner"></div></div>
		<div class="waveright"><div class="inner"></div></div>
		<div class="waveleft"><div class="inner"></div></div>
		<div class="waveright"><div class="inner"></div></div>
		<div class="waveleft"><div class="inner"></div></div>
		<div class="waveright"><div class="inner"></div></div>
		<div class="waveleft"><div class="inner"></div></div>
	</div>
	<div class="waves back">
		<div class="waveright"><div class="inner"></div></div>
		<div class="waveleft"><div class="inner"></div></div>
		<div class="waveright"><div class="inner"></div></div>
		<div class="waveleft"><div class="inner"></div></div>
		<div class="waveright"><div class="inner"></div></div>
		<div class="waveleft"><div class="inner"></div></div>
		<div class="waveright"><div class="inner"></div></div>
		<div class="waveleft"><div class="inner"></div></div>
		<div class="waveright"><div class="inner"></div></div>
		<div class="waveleft"><div class="inner"></div></div>
		<div class="waveright"><div class="inner"></div></div>
		<div class="waveleft"><div class="inner"></div></div>
		<div class="waveright"><div class="inner"></div></div>
		<div class="waveleft"><div class="inner"></div></div>
		<div class="waveright"><div class="inner"></div></div>
		<div class="waveleft"><div class="inner"></div></div>
		<div class="waveright"><div class="inner"></div></div>
		<div class="waveleft"><div class="inner"></div></div>
		<div class="waveright"><div class="inner"></div></div>
		<div class="waveleft"><div class="inner"></div></div>
		<div class="waveright"><div class="inner"></div></div>
		<div class="waveleft"><div class="inner"></div></div>
	</div>
	</div>
</div>
</body>
</html>







CSS代码(zzsc.css):

/* 代码整理:大头网 www.datouwang.com */
body{margin:0;padding:40px;background:#fff;}
#credit{font-family:Arial,Sans-serif;font-size:14px;text-align:center;color:black;}
a,a:hover,a:visited,a:focus{color:black;text-decoration:none;}
#datouwang{padding-top:15px;background:#6cc5c3;overflow:hidden;position:relative;height:300px;width:690px;margin-bottom:15px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;margin:0 auto;}
#air{position:relative;left:140px;-webkit-animation:'hover' 4s ease-in-out;-webkit-animation-iteration-count:infinite;-o-transition-property:top;-o-transition-duration:4s;}
@-webkit-keyframes hover{0%{top:0;}
50%{top:-10px;}
100%{top:0;}
}
#whale{display:;position:absolute;top:0;left:0;}
#whale div{position:absolute;background:#fff;z-index:10;}
#whale1{width:55px;height:63px;top:145px;left:72px;-webkit-border-top-left-radius:53px 63px;-moz-border-radius-topleft:53px 63px;border-top-left-radius:53px 63px;}
#whale2{width:95px;height:63px;top:145px;left:127px;-webkit-border-top-right-radius:98px 70px;-moz-border-radius-topright:98px 70px;border-top-right-radius:98px 70px;}
#whale3-crop{overflow:hidden;background:transparent !important;width:140px;height:31px;top:208px;left:72px;}
#whale3{width:147px;height:51px;top:-15px;left:-6px;-webkit-border-bottom-left-radius:230px 75px;-moz-border-radius-bottomleft:230px 75px;border-bottom-left-radius:230px 75px;}
#whale4{background:#6cc5c3 !important;z-index:9 !important;width:135px;height:31px;top:208px;left:71px;-webkit-border-bottom-left-radius:250px 100px;-moz-border-radius-bottomleft:250px 100px;border-bottom-left-radius:250px 100px;-webkit-border-bottom-right-radius:150px 90px;-moz-border-radius-bottomright:150px 90px;border-bottom-right-radius:150px 90px;}
#whale5crop{background:transparent !important;overflow:hidden;z-index:8 !important;width:148px;height:64px;top:208px;left:74px;}
#whale5{z-index:8 !important;width:347px;height:66px;top:0px;left:0;-webkit-border-bottom-left-radius:550px 170px;-moz-border-radius-bottomleft:550px 170px;border-bottom-left-radius:550px 170px;}
#eye1{background:#6cc5c3 !important;width:20px;height:20px;top:204px;left:137px;-webkit-border-radius:60px;-moz-border-radius:60px;border-radius:60px;}
#eye2{width:30px;height:30px;top:191px;left:133px;-webkit-border-radius:60px;-moz-border-radius:60px;border-radius:60px;}
#whale6{width:91px;height:52px;top:219px;left:200px;-webkit-border-bottom-left-radius:40px 10px;-moz-border-radius-bottomleft:40px 10px;border-bottom-left-radius:40px 10px;-webkit-border-bottom-right-radius:80px 80px;-moz-border-radius-bottomright:80px 80px;border-bottom-right-radius:80px 80px;}
#whale7{background:#6cc5c3 !important;width:60px;height:30px;top:219px;left:222px;-webkit-border-bottom-left-radius:80px 80px;-moz-border-radius-bottomleft:80px 80px;border-bottom-left-radius:80px 80px;-webkit-border-bottom-right-radius:70px 70px;-moz-border-radius-bottomright:70px 70px;border-bottom-right-radius:70px 70px;-webkit-border-top-right-radius:15px 15px;-moz-border-radius-topright:15px 15px;border-top-right-radius:15px 15px;}
#whaletail1{width:55px;height:33px;top:186px;left:237px;-webkit-border-bottom-left-radius:80px 80px;-moz-border-radius-bottomleft:80px 80px;border-bottom-left-radius:80px 80px;-webkit-border-top-right-radius:50px 50px;-moz-border-radius-topright:50px 50px;border-top-right-radius:50px 50px;}
#whaletail2{width:33px;height:39px;top:147px;left:237px;-webkit-border-top-left-radius:60px 70px;-moz-border-radius-topleft:60px 70px;border-top-left-radius:60px 70px;}
#whaletail3{background:#6cc5c3 !important;width:33px;height:42px;top:144px;left:252px;-webkit-border-top-left-radius:60px 70px;-moz-border-radius-topleft:60px 70px;border-top-left-radius:60px 70px;-webkit-border-bottom-left-radius:60px 70px;-moz-border-radius-bottomleft:60px 70px;border-bottom-left-radius:60px 70px;}
#whaletail4{width:37px;height:32px;top:195px;left:289px;-webkit-border-top-left-radius:70px 70px;-moz-border-radius-topleft:70px 70px;border-top-left-radius:70px 70px;-webkit-border-top-right-radius:70px 70px;-moz-border-radius-topright:70px 70px;border-top-right-radius:70px 70px;}
#whaletail5{background:#6cc5c3 !important;z-index:11 !important;width:32px;height:35px;top:169px;left:315px;-webkit-border-bottom-left-radius:70px 70px;-moz-border-radius-bottomleft:70px 70px;border-bottom-left-radius:70px 70px;-webkit-border-bottom-right-radius:70px 100px;-moz-border-radius-bottomright:70px 100px;border-bottom-right-radius:70px 100px;}
#whaletail6{width:58px;height:33px;top:201px;left:294px;-webkit-border-top-left-radius:70px 70px;-moz-border-radius-topleft:70px 70px;border-top-left-radius:70px 70px;-webkit-border-bottom-left-radius:90px 70px;-moz-border-radius-bottomleft:90px 70px;border-bottom-left-radius:90px 70px;-webkit-border-bottom-right-radius:140px 140px;-moz-border-radius-bottomright:140px 140px;border-bottom-right-radius:140px 140px;}
#whaletail7{width:18px;height:32px;top:169px;left:334px;-webkit-border-top-right-radius:60px 100px;-moz-border-radius-topright:60px 100px;border-top-right-radius:60px 100px;}
#whaletail8{background:#6cc5c3 !important;z-index:11 !important;width:10px;height:10px;top:225px;left:289px;-webkit-border-top-right-radius:60px 60px;-moz-border-radius-topright:60px 60px;border-top-right-radius:60px 60px;-webkit-border-top-left-radius:40px 60px;-moz-border-radius-topleft:40px 60px;border-top-left-radius:40px 60px;}
.right div,.left div{position:absolute;opacity:1;z-index:20;background:#f15a22;}
.right,.left{position:absolute;background:transparent !important;width:33px;height:30px;}
.right .body1{top:10px;left:1px;width:16px;height:19px;-webkit-border-bottom-left-radius:50px 60px;-moz-border-radius-bottomleft:50px 60px;border-bottom-left-radius:50px 60px;}
.right .body2{top:17px;left:17px;width:12px;height:12px;-webkit-border-bottom-right-radius:50px 50px;-moz-border-radius-bottomright:50px 50px;border-bottom-right-radius:50px 50px;}
.right .body3{top:12px;left:19px;width:13px;height:9px;-webkit-border-top-right-radius:50px 50px;-moz-border-radius-topright:50px 50px;border-top-right-radius:50px 50px;-webkit-border-top-left-radius:50px 50px;-moz-border-radius-topleft:50px 50px;border-top-left-radius:50px 50px;}
.right .body4{background:#6cc5c3 !important;z-index:21 !important;top:1px;left:0px;width:26px;height:16px;-webkit-border-bottom-right-radius:50px 50px;-moz-border-radius-bottomright:50px 50px;border-bottom-right-radius:50px 50px;-webkit-border-bottom-left-radius:50px 50px;-moz-border-radius-bottomleft:50px 50px;border-bottom-left-radius:50px 50px;}
.right .body5{background:transparent !important;top:12px;left:22px;width:4px;height:1px;border:4px solid transparent;border-bottom:4px solid #f15a22;}
.right .eye{background:#fff !important;top:15px;left:26px;width:3px;height:3px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
@-webkit-keyframes flutter1{0%{-webkit-transform:rotate(0deg)}
50%{-webkit-transform:rotate(-25deg)}
100%{-webkit-transform:rotate(0deg)}
}
@-webkit-keyframes flutter2{0%{-webkit-transform:rotate(0deg)}
50%{-webkit-transform:rotate(25deg)}
100%{-webkit-transform:rotate(0deg)}
}
.right .wing{background:transparent !important;z-index:22 !important;width:15px;height:18px;bottom:4px;left:8px;-webkit-animation:'flutter1' 0.1s linear;-webkit-animation-iteration-count:infinite;}
.right .wing1{width:12px;height:12px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
.right .wing2{width:4px;height:12px;margin-top:-6px;-webkit-border-top-left-radius:5px 15px;-moz-border-radius-topleft:5px 15px;border-top-left-radius:5px 15px;}
.right .wing3crop{background:transparent !important;overflow:hidden;width:4px;height:8px;margin-top:-6px;margin-left:4px;}
.right .wing3{background:transparent !important;width:10px;height:10px;margin-top:-8px;margin-left:-4px;border:4px solid #f15a22;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;}
.right .wing4{background:#fff;width:6px;height:7px;margin-left:3px;margin-top:3px;-webkit-border-radius:2px 6px;-moz-border-radius:2px 6px;border-radius:2px 6px;}
/* Bird other way */
.left .body1{top:10px;right:1px;width:16px;height:19px;-webkit-border-bottom-right-radius:50px 60px;-moz-border-radius-bottomright:50px 60px;border-bottom-right-radius:50px 60px;}
.left .body2{top:17px;right:17px;width:12px;height:12px;-webkit-border-bottom-left-radius:50px 50px;-moz-border-radius-bottomleft:50px 50px;border-bottom-left-radius:50px 50px;}
.left .body3{top:12px;right:19px;width:13px;height:9px;-webkit-border-top-left-radius:50px 50px;-moz-border-radius-topleft:50px 50px;border-top-left-radius:50px 50px;-webkit-border-top-right-radius:50px 50px;-moz-border-radius-topright:50px 50px;border-top-right-radius:50px 50px;}
.left .body4{background:#6cc5c3 !important;z-index:21 !important;top:1px;right:0px;width:26px;height:16px;-webkit-border-bottom-left-radius:50px 50px;-moz-border-radius-bottomleft:50px 50px;border-bottom-left-radius:50px 50px;-webkit-border-bottom-right-radius:50px 50px;-moz-border-radius-bottomright:50px 50px;border-bottom-right-radius:50px 50px;}
.left .body5{background:transparent !important;top:12px;right:22px;width:4px;height:1px;border:4px solid transparent;border-bottom:4px solid #f15a22;}
.left .eye{background:#fff !important;top:15px;right:26px;width:3px;height:3px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
.left .wing{background:transparent !important;z-index:22 !important;width:15px;height:18px;bottom:4px;right:5px;-webkit-animation:'flutter2' 0.1s linear;-webkit-animation-iteration-count:infinite;}
.left .wing1{width:12px;height:12px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
.left .wing2{width:4px;height:12px;margin-top:-6px;margin-left:8px;-webkit-border-top-right-radius:5px 15px;-moz-border-radius-topright:5px 15px;border-top-right-radius:5px 15px;}
.left .wing3crop{background:transparent !important;overflow:hidden;width:4px;height:8px;margin-top:-6px;margin-left:4px;}
.left .wing3{background:transparent !important;width:10px;height:10px;margin-top:-8px;margin-left:-10px;border:4px solid #f15a22;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;}
.left .wing4{background:#fff;width:6px;height:7px;margin-left:3px;margin-top:3px;-webkit-border-radius:6px 2px;-moz-border-radius:6px 2px;border-radius:6px 2px;}
.rope1crop{z-index:5 !important;position:absolute;overflow:hidden;top:40px;left:94px;height:150px;width:10px;}
.rope1{position:absolute;border:1px solid #fff;height:150px;width:20px;-webkit-border-top-left-radius:50px 200px;-moz-border-radius-topleft:50px 200px;border-top-left-radius:50px 200px;-webkit-border-bottom-left-radius:50px 200px;-moz-border-radius-bottomleft:50px 200px;border-bottom-left-radius:50px 200px;}
.rope2crop{z-index:5 !important;position:absolute;overflow:hidden;top:17px;left:129px;height:190px;width:15px;}
.rope2{position:absolute;border:1px solid #fff;height:190px;width:28px;-webkit-border-top-left-radius:50px 200px;-moz-border-radius-topleft:50px 200px;border-top-left-radius:50px 200px;-webkit-border-bottom-left-radius:50px 200px;-moz-border-radius-bottomleft:50px 200px;border-bottom-left-radius:50px 200px;}
.rope3crop{z-index:5 !important;position:absolute;overflow:hidden;top:31px;left:152px;height:190px;width:22px;}
.rope3{position:absolute;border:1px solid #fff;height:250px;width:50px;-webkit-border-top-left-radius:50px 200px;-moz-border-radius-topleft:50px 200px;border-top-left-radius:50px 200px;-webkit-border-bottom-left-radius:50px 200px;-moz-border-radius-bottomleft:50px 200px;border-bottom-left-radius:50px 200px;}
.rope4crop{z-index:12 !important;position:absolute;overflow:hidden;top:156px;left:209px;height:90px;width:72px;}
.rope4{position:absolute;border:1px solid #fff;height:150px;width:120px;right:0;top:-40px;-webkit-border-bottom-right-radius:120px 200px;-moz-border-radius-bottomright:120px 200px;border-bottom-right-radius:120px 200px;}
.rope5crop{z-index:12 !important;position:absolute;overflow:hidden;top:113px;left:179px;height:156px;width:72px;}
.rope5{position:absolute;border:1px solid #fff;height:200px;width:120px;right:0;top:-1px;-webkit-border-bottom-right-radius:150px 250px;-moz-border-radius-bottomright:150px 250px;border-bottom-right-radius:150px 250px;}
.rope5acrop{z-index:12 !important;position:absolute;overflow:hidden;top:234px;left:179px;height:35px;width:72px;}
.rope5a{position:absolute;border:1px solid #6cc5c3;height:200px;width:120px;right:0;top:-122px;-webkit-border-bottom-right-radius:150px 250px;-moz-border-radius-bottomright:150px 250px;border-bottom-right-radius:150px 250px;}
.rope6crop{z-index:12 !important;position:absolute;overflow:hidden;top:66px;left:139px;height:198px;width:92px;}
.rope6{position:absolute;border:1px solid #fff;height:250px;width:143px;right:0;top:-1px;-webkit-border-bottom-right-radius:160px 290px;-moz-border-radius-bottomright:160px 290px;border-bottom-right-radius:160px 290px;}
.rope6acrop{z-index:12 !important;position:absolute;overflow:hidden;top:181px;left:139px;height:83px;width:92px;}
.rope6a{position:absolute;border:1px solid #6cc5c3;height:250px;width:143px;right:0;top:-116px;-webkit-border-bottom-right-radius:160px 290px;-moz-border-radius-bottomright:160px 290px;border-bottom-right-radius:160px 290px;}
.rope7crop{z-index:12 !important;position:absolute;overflow:hidden;top:86px;left:118px;height:172px;width:92px;}
.rope7{position:absolute;border:1px solid #fff;height:250px;width:133px;right:0;top:-40px;-webkit-border-bottom-right-radius:160px 290px;-moz-border-radius-bottomright:160px 290px;border-bottom-right-radius:160px 290px;}
.rope7acrop{z-index:12 !important;position:absolute;overflow:hidden;top:163px;left:118px;height:172px;width:92px;}
.rope7a{position:absolute;border:1px solid #6cc5c3;height:250px;width:133px;right:0;top:-117px;-webkit-border-bottom-right-radius:160px 290px;-moz-border-radius-bottomright:160px 290px;border-bottom-right-radius:160px 290px;}
.rope8crop{z-index:12 !important;position:absolute;overflow:hidden;top:229px;left:157px;height:30px;width:27px;}
.rope8{position:absolute;border:1px solid #6cc5c3;height:25px;width:50px;right:-17px;top:-1px;-webkit-border-bottom-right-radius:100px 100px;-moz-border-radius-bottomright:100px 100px;border-bottom-right-radius:100px 100px;-webkit-border-bottom-left-radius:100px 100px;-moz-border-radius-bottomleft:100px 100px;border-bottom-left-radius:100px 100px;}
.rope9crop{z-index:12 !important;position:absolute;overflow:hidden;top:213px;left:167px;height:30px;width:26px;}
.rope9{position:absolute;border:1px solid #6cc5c3;height:25px;width:50px;right:-17px;top:-1px;-webkit-border-bottom-right-radius:100px 100px;-moz-border-radius-bottomright:100px 100px;border-bottom-right-radius:100px 100px;-webkit-border-bottom-left-radius:100px 100px;-moz-border-radius-bottomleft:100px 100px;border-bottom-left-radius:100px 100px;}
.rope10crop{z-index:12 !important;position:absolute;overflow:hidden;top:221px;left:162px;height:30px;width:27px;}
.rope10{position:absolute;border:1px solid #6cc5c3;height:25px;width:50px;right:-17px;top:-1px;-webkit-border-bottom-right-radius:100px 100px;-moz-border-radius-bottomright:100px 100px;border-bottom-right-radius:100px 100px;-webkit-border-bottom-left-radius:100px 100px;-moz-border-radius-bottomleft:100px 100px;border-bottom-left-radius:100px 100px;}
.rope11crop{z-index:12 !important;position:absolute;overflow:hidden;top:220px;left:193px;height:30px;width:28px;}
.rope11{position:absolute;border:1px solid #6cc5c3;height:25px;width:50px;right:-17px;top:-1px;-webkit-border-bottom-right-radius:100px 100px;-moz-border-radius-bottomright:100px 100px;border-bottom-right-radius:100px 100px;-webkit-border-bottom-left-radius:100px 100px;-moz-border-radius-bottomleft:100px 100px;border-bottom-left-radius:100px 100px;}
.rope12crop{z-index:12 !important;position:absolute;overflow:hidden;top:228px;left:189px;height:30px;width:28px;}
.rope12{position:absolute;border:1px solid #6cc5c3;height:25px;width:50px;right:-17px;top:-1px;-webkit-border-bottom-right-radius:100px 100px;-moz-border-radius-bottomright:100px 100px;border-bottom-right-radius:100px 100px;-webkit-border-bottom-left-radius:100px 100px;-moz-border-radius-bottomleft:100px 100px;border-bottom-left-radius:100px 100px;}
.rope13crop{z-index:12 !important;position:absolute;overflow:hidden;top:236px;left:184px;height:30px;width:28px;}
.rope13{position:absolute;border:1px solid #6cc5c3;height:25px;width:50px;right:-17px;top:-1px;-webkit-border-bottom-right-radius:100px 100px;-moz-border-radius-bottomright:100px 100px;border-bottom-right-radius:100px 100px;-webkit-border-bottom-left-radius:100px 100px;-moz-border-radius-bottomleft:100px 100px;border-bottom-left-radius:100px 100px;}
.rope14crop{z-index:12 !important;position:absolute;overflow:hidden;top:240px;left:212px;height:30px;width:28px;}
.rope14{position:absolute;border:1px solid #6cc5c3;height:25px;width:50px;right:-13px;top:-1px;-webkit-border-bottom-right-radius:100px 100px;-moz-border-radius-bottomright:100px 100px;border-bottom-right-radius:100px 100px;-webkit-border-bottom-left-radius:100px 100px;-moz-border-radius-bottomleft:100px 100px;border-bottom-left-radius:100px 100px;}
.rope15crop{z-index:12 !important;position:absolute;overflow:hidden;top:233px;left:216px;height:30px;width:26px;}
.rope15{position:absolute;border:1px solid #6cc5c3;height:25px;width:50px;right:-17px;top:-1px;-webkit-border-bottom-right-radius:100px 100px;-moz-border-radius-bottomright:100px 100px;border-bottom-right-radius:100px 100px;-webkit-border-bottom-left-radius:100px 100px;-moz-border-radius-bottomleft:100px 100px;border-bottom-left-radius:100px 100px;}
.rope16crop{z-index:12 !important;position:absolute;overflow:hidden;top:227px;left:221px;height:30px;width:28px;}
.rope16{position:absolute;border:1px solid #6cc5c3;height:25px;width:50px;right:-17px;top:-1px;-webkit-border-bottom-right-radius:100px 100px;-moz-border-radius-bottomright:100px 100px;border-bottom-right-radius:100px 100px;-webkit-border-bottom-left-radius:100px 100px;-moz-border-radius-bottomleft:100px 100px;border-bottom-left-radius:100px 100px;}
.rope17crop{z-index:12 !important;position:absolute;overflow:hidden;top:250px;left:239px;height:60px;width:26px;}
.rope17{position:absolute;border:1px solid #6cc5c3;height:25px;width:35px;right:-18px;top:-11px;-webkit-border-bottom-left-radius:100px 100px;-moz-border-radius-bottomleft:100px 100px;border-bottom-left-radius:100px 100px;}
.rope18crop{z-index:12 !important;position:absolute;overflow:hidden;top:251px;left:242px;height:30px;width:14px;}
.rope18{position:absolute;border:1px solid #6cc5c3;height:10px;width:20px;right:-6px;top:-1px;-webkit-border-bottom-right-radius:100px 100px;-moz-border-radius-bottomright:100px 100px;border-bottom-right-radius:100px 100px;-webkit-border-bottom-left-radius:100px 100px;-moz-border-radius-bottomleft:100px 100px;border-bottom-left-radius:100px 100px;}
.rope19crop{z-index:12 !important;position:absolute;overflow:hidden;top:257px;left:240px;height:30px;width:18px;}
.rope19{position:absolute;border:1px solid #6cc5c3;height:10px;width:20px;right:-2px;top:-1px;-webkit-border-bottom-right-radius:100px 100px;-moz-border-radius-bottomright:100px 100px;border-bottom-right-radius:100px 100px;-webkit-border-bottom-left-radius:100px 100px;-moz-border-radius-bottomleft:100px 100px;border-bottom-left-radius:100px 100px;}
.rope20crop{z-index:11 !important;position:absolute;overflow:hidden;top:41px;left:250px;height:210px;width:44px;}
.rope20{position:absolute;border:1px solid #fff;height:250px;width:70px;-webkit-border-top-left-radius:70px 200px;-moz-border-radius-topleft:70px 200px;border-top-left-radius:70px 200px;}
.waves{position:absolute;height:40px;bottom:-15px;left:0;width:100%;}
.fore{z-index:20;}
.back{position:absolute;left:0;z-index:11;-webkit-animation:'wave' 2s linear;-webkit-animation-iteration-count:infinite;}
.back .waveleft{-webkit-animation:'wave2' 2s linear;-webkit-animation-iteration-count:infinite;}
.back .waveright{-webkit-animation:'wave2' 2s linear;-webkit-animation-iteration-count:infinite;}
.fore .waveleft{-webkit-animation:'wave2' 2s linear;-webkit-animation-iteration-count:infinite;}
.fore .waveright{-webkit-animation:'wave2' 2s linear;-webkit-animation-iteration-count:infinite;}
@-webkit-keyframes wave{0%{margin-left:0;}
25%{margin-left:-15px;}
50%{margin-left:0;}
75%{margin-left:15px;}
100%{margin-left:0;}
}
@-webkit-keyframes wave2{0%{margin-top:0;}
50%{margin-top:5px;}
100%{margin-top:0;}
}
.fore .waveleft .inner{border-color:#f15a22;border-style:solid;}
.fore .waveright .inner{border-color:#f15a22;border-style:solid;}
.back .waveleft .inner{border-color:#fff;border-style:solid;}
.back .waveright .inner{border-color:#fff;border-style:solid;}
.waveleft{float:left;position:relative;overflow:hidden;width:30px;height:30px;}
.waveleft .inner{position:absolute;top:-45px;left:-34px;width:60px;height:30px;border-width:30px;-webkit-border-radius:60px 120px;-moz-border-radius:60px 120px;border-radius:60px 120px;}
.waveright{float:left;position:relative;overflow:hidden;width:30px;height:30px;}
.waveright .inner{position:absolute;top:-45px;left:-56px;width:60px;height:30px;border-width:30px;-webkit-border-radius:120px 60px;-moz-border-radius:120px 60px;border-radius:120px 60px;}
#wavecontainer{position:absolute;width:100%;height:30px;bottom:0;overflow:hidden;margin-left:0px;z-index:30;}
h1{font-family:Arial,Helvetica,Sans-serif;font-size:18px;color:#f15a22;font-weight:normal;}
.return{font-family:Arial,Helvetica,Sans-serif;font-size:12px;color:#6cc5c3;}
.flattr{position:absolute;left:740px;top:85px;}
附件:下载该文件资源,减少时间成本(增值服务)
留言
该资源可下载
File Source
.rar
3.96 KB
Html 动画效果3
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31¥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29¥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害,或使用了您的版权,请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
联系我们
  • QQ:21499807
  • 邮箱:sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章