以下是 纯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;}