CSS3制作网页Banner动画

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

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

以下是 CSS3制作网页Banner动画的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Animated Web Banners With CSS3</title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Animated Web Banners With CSS3 - Exploring ways to spice up our web banners with CSS3 animations." />
        <meta name="keywords" content="css3, animation, animated, ads, ad, banner, content" />
        <meta name="author" content="Caleb Jacob for Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Boogaloo' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div class="container">
            <div class="codrops-top">
                <a href="http://tympanus.net/Tutorials/CSS3FilterFunctionality/">
					<strong>&laquo; Previous Demo: </strong>Filter Functionality with CSS3
				</a>
				<span class="right">
					<a href="http://tympanus.net/codrops/2012/01/10/animated-web-banners-with-css3/">
						<strong>Back to the Codrops Article</strong>
					</a>
				</span>
				<div class="clr"></div>
            </div>
			<header>
				<h1>Animated Web Banners With CSS3</h1>
				<h2>Exploring ways to spice up our web banners with CSS3 animations.</h2>
				<p class="codrops-demos">
					<a class="current-demo"  href="index.html">Horizontal</a>
					<a href="index2.html">Vertical</a>
				</p>
			</header>
            <section class="wrapper">
				<div id="ad-1">
					<div id="content">
						<h2>Lost at sea?</h2>
						<h3>Relax - we've got your rudder.</h3>
						<form>
							<input type="text" id="email" value="Email address..." />
							<input type="submit" id="submit" value="Guide me" />
						</form>
					</div>
					<div id="clouds">
						<ul id="cloud-group-1">
							<li class="cloud-1"></li>
							<li class="cloud-2"></li>
							<li class="cloud-3"></li>
						</ul>
						<ul id="cloud-group-2">
							<li class="cloud-1"></li>
							<li class="cloud-2"></li>
							<li class="cloud-3"></li>
						</ul>
					</div>
					<ul id="boat">
						<li>
							<div id="question-mark"></div>
						</li>
					</ul>
					<ul id="water">
						<li id="water-back"></li>
						<li id="water-front"></li>
					</ul>
				</div>
            </section> 
        </div>
    </body>
</html>

HTML代码(index2.html):

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Animated Web Banners With CSS3</title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Animated Web Banners With CSS3 - Exploring ways to spice up our web banners with CSS3 animations." />
        <meta name="keywords" content="css3, animation, animated, ads, ad, banner, content" />
        <meta name="author" content="Caleb Jacob for Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Boogaloo' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div class="container">
            <div class="codrops-top">
                <a href="http://tympanus.net/Tutorials/CSS3FilterFunctionality/">
					<strong>&laquo; Previous Demo: </strong>Filter Functionality with CSS3
				</a>
				<span class="right">
					<a href="http://tympanus.net/codrops/2012/01/10/animated-web-banners-with-css3/">
						<strong>Back to the Codrops Article</strong>
					</a>
				</span>
				<div class="clr"></div>
            </div>
			<header>
				<h1>Animated Web Banners With CSS3</h1>
				<h2>Exploring ways to spice up our web banners with CSS3 animations.</h2>
				<p class="codrops-demos">
					<a href="index.html">Horizontal</a>
					<a class="current-demo" href="index2.html">Vertical</a>
				</p>
			</header>
            <section class="wrapper">
				<div id="ad-2">
					<h2>Lost<br />at<br />sea?</h2>
					<ul id="boat">
						<li>
							<div id="question-mark"></div>
						</li>
					</ul>
					<ul id="water">
						<li id="water-back"></li>
						<li id="water-front"></li>
					</ul>
					<div id="content">
						<h3>Relax.<br />We've got your rudder.</h3>
						<a href="#">Guide me!</a>
					</div>
				</div>
            </section> 
        </div>
    </body>
</html>

CSS代码(demo.css):

/* CSS reset */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
fieldset,img{border:0;}
ol,ul{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
/* General Demo Style */
body{font-family:Constantia,Palatino,"Palatino Linotype","Palatino LT STD",Georgia,serif;background:#fbf8f4 url(../images/wood_pattern.jpg) repeat top left;font-weight:400;font-size:15px;color:#936a46;overflow-y:scroll;overflow-x:hidden;}
.ie7 body{overflow:hidden;}
a{color:#333;text-decoration:none;}
.container{position:relative;text-align:center;}
.clr{clear:both;}
.container > header{padding:20px 30px 10px 30px;margin:0px 20px 10px 20px;position:relative;display:block;text-shadow:1px 1px 1px rgba(0,0,0,0.2);text-align:center;}
.container > header h1{font-family:'Alfa Slab One','Arial Narrow',Arial,sans-serif;font-size:35px;line-height:35px;position:relative;font-weight:400;color:#333;text-shadow:1px 1px 1px rgba(255,255,255,0.8);padding:0px 0px 5px 0px;}
.container > header h1 span{color:#008dc1;text-shadow:0px 1px 1px rgba(255,255,255,0.8);}
.container > header h2,p.info{font-family:'Boogaloo','Arial Narrow',Arial,sans-serif;font-size:22px;font-style:italic;color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.3);}
.container > header h2 a{color:#936a46;text-shadow:0px 1px 1px rgba(255,255,255,0.8);}
.container > header h2 a:hover{color:#614429;}
/* Header Style */
.codrops-top{font-family:'Arial Narrow',Arial,sans-serif;line-height:24px;font-size:11px;width:100%;background:#000;opacity:0.9;text-transform:uppercase;z-index:9999;position:relative;-moz-box-shadow:1px 0px 2px #000;-webkit-box-shadow:1px 0px 2px #000;box-shadow:1px 0px 2px #000;}
.codrops-top a{padding:0px 10px;letter-spacing:1px;color:#ddd;display:block;float:left;}
.codrops-top a:hover{color:#fff;}
.codrops-top span.right{float:right;}
.codrops-top span.right a{float:none;display:inline;}
p.codrops-demos{text-align:center;display:block;padding:14px;font-family:'Alfa Slab One','Arial Narrow',Arial,sans-serif;}
p.codrops-demos a,p.codrops-demos a.current-demo,p.codrops-demos a.current-demo:hover{display:inline-block;border:1px solid #ddd;border-color:#ddd #aaa #aaa #ddd;padding:4px 10px 3px;font-size:15px;line-height:18px;margin:0px 3px;-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.1);-moz-box-shadow:0px 1px 1px rgba(0,0,0,0.1);box-shadow:0px 1px 1px rgba(0,0,0,0.1);color:#29abe1;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;background:#fff;text-shadow:0px 1px 1px rgba(255,255,255,0.9);background:-moz-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffffff),color-stop(47%,#f6f6f6),color-stop(100%,#ededed));background:-webkit-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);background:-o-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);background:-ms-linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);background:linear-gradient(top,#ffffff 0%,#f6f6f6 47%,#ededed 100%);}
p.codrops-demos a:hover{background:#fff;color:#29abe1;}
p.codrops-demos a:active{background:#e5e5e5;background:-moz-linear-gradient(top,#e5e5e5 0%,#ffffff 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#e5e5e5),color-stop(100%,#ffffff));background:-webkit-linear-gradient(top,#e5e5e5 0%,#ffffff 100%);background:-o-linear-gradient(top,#e5e5e5 0%,#ffffff 100%);background:-ms-linear-gradient(top,#e5e5e5 0%,#ffffff 100%);background:linear-gradient(top,#e5e5e5 0%,#ffffff 100%);-webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.9);-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.9);box-shadow:0px 1px 1px rgba(255,255,255,0.9);}
p.codrops-demos a.current-demo,p.codrops-demos a.current-demo:hover{color:#fff;background:#29abe1;border-color:#29abe1;text-shadow:1px 1px 1px rgba(0,0,0,0.3);}
/* Media Queries */
@media screen and (max-width:767px){.container > header{text-align:center;}
p.codrops-demos{position:relative;top:auto;left:auto;}
}

CSS代码(style.css):

/* Begin Ad 1 */
#ad-1{width:720px;height:300px;margin:40px auto 0;background-image:url(../images/ad-1/background.png);background-position:center;background-repeat:no-repeat;overflow:hidden;position:relative;box-shadow:1px 1px 4px rgba(0,0,0,0.4);}
#ad-1 #content{width:325px;float:right;margin:40px;text-align:center;z-index:4;position:relative;overflow:visible;}
#ad-1 #content h2{font-family:'Alfa Slab One',cursive;color:#137dd5;font-size:50px;line-height:50px;text-shadow:0px 0px 4px #fff;-webkit-animation:h2-animation 7s 1 ease-in-out;-moz-animation:h2-animation 7s 1 ease-in-out;-o-animation:h2-animation 7s 1 ease-in-out;-ms-animation:h2-animation 7s 1 ease-in-out;animation:h2-animation 7s 1 ease-in-out;}
#ad-1 #content h3{font-family:'Boogaloo',cursive;color:#202224;font-size:31px;line-height:31px;text-shadow:0px 0px 4px #fff;-webkit-animation:h3-animation 10s 1 ease-in-out;-moz-animation:h3-animation 10s 1 ease-in-out;-o-animation:h3-animation 10s 1 ease-in-out;-ms-animation:h3-animation 10s 1 ease-in-out;animation:h3-animation 10s 1 ease-in-out;}
#ad-1 #content form{margin:30px 0 0 6px;position:relative;-webkit-animation:form-animation 12s 1 ease-in-out;-moz-animation:form-animation 12s 1 ease-in-out;-o-animation:form-animation 12s 1 ease-in-out;-ms-animation:form-animation 12s 1 ease-in-out;animation:form-animation 12s 1 ease-in-out;}
#ad-1 #content #email{width:158px;height:48px;float:left;padding:0 20px;font-size:16px;font-family:'Lucida Grande',sans-serif;color:#fff;text-shadow:1px 1px 0px #a2917d;border-top-left-radius:5px;border-bottom-left-radius:5px;border:1px solid #a2917d;outline:none;box-shadow:-1px -1px 1px #fff;background-color:#c7b29b;background-image:linear-gradient(bottom,rgb(216,201,185) 0%,rgb(199,178,155) 100%);background-image:-o-linear-gradient(bottom,rgb(216,201,185) 0%,rgb(199,178,155) 100%);background-image:-moz-linear-gradient(bottom,rgb(216,201,185) 0%,rgb(199,178,155) 100%);background-image:-webkit-linear-gradient(bottom,rgb(216,201,185) 0%,rgb(199,178,155) 100%);background-image:-ms-linear-gradient(bottom,rgb(216,201,185) 0%,rgb(199,178,155) 100%);}
#ad-1 #content #email:focus{background-image:linear-gradient(bottom,rgb(199,178,155) 0%,rgb(199,178,155) 100%);background-image:-o-linear-gradient(bottom,rgb(199,178,155) 0%,rgb(199,178,155) 100%);background-image:-moz-linear-gradient(bottom,rgb(199,178,155) 0%,rgb(199,178,155) 100%);background-image:-webkit-linear-gradient(bottom,rgb(199,178,155) 0%,rgb(199,178,155) 100%);background-image:-ms-linear-gradient(bottom,rgb(199,178,155) 0%,rgb(199,178,155) 100%);}
#ad-1 #content #submit{height:50px;float:left;padding:0 20px;font-size:20px;font-family:'Boogaloo',cursive;color:#137dd5;text-shadow:1px 1px 0px #fff;border-top-right-radius:5px;border-bottom-right-radius:5px;border:1px solid #bcc0c4;border-left:none;background-color:#fff;background-image:linear-gradient(bottom,rgb(245,247,249) 0%,rgb(255,255,255) 100%);background-image:-o-linear-gradient(bottom,rgb(245,247,249) 0%,rgb(255,255,255) 100%);background-image:-moz-linear-gradient(bottom,rgb(245,247,249) 0%,rgb(255,255,255) 100%);background-image:-webkit-linear-gradient(bottom,rgb(245,247,249) 0%,rgb(255,255,255) 100%);background-image:-ms-linear-gradient(bottom,rgb(245,247,249) 0%,rgb(255,255,255) 100%);cursor:pointer;}
#ad-1 #content #submit:hover{background-image:linear-gradient(bottom,rgb(255,255,255) 0%,rgb(255,255,255) 100%);background-image:-o-linear-gradient(bottom,rgb(255,255,255) 0%,rgb(255,255,255) 100%);background-image:-moz-linear-gradient(bottom,rgb(255,255,255) 0%,rgb(255,255,255) 100%);background-image:-webkit-linear-gradient(bottom,rgb(255,255,255) 0%,rgb(255,255,255) 100%);background-image:-ms-linear-gradient(bottom,rgb(255,255,255) 0%,rgb(255,255,255) 100%);}
#ad-1 ul#water{}
#ad-1 li#water-back{width:1200px;height:84px;background-image:url(../images/ad-1/water-back.png);background-repeat:repeat-x;z-index:1;position:absolute;bottom:10px;left:-20px;-webkit-animation:water-back-animation 3s infinite ease-in-out;-moz-animation:water-back-animation 3s infinite ease-in-out;-o-animation:water-back-animation 3s infinite ease-in-out;-ms-animation:water-back-animation 3s infinite ease-in-out;animation:water-back-animation 3s infinite ease-in-out;}
#ad-1 li#water-front{width:1200px;height:158px;background-image:url(../images/ad-1/water-front.png);background-repeat:repeat-x;z-index:3;position:absolute;bottom:-70px;left:-30px;-webkit-animation:water-front-animation 2s infinite ease-in-out;-moz-animation:water-front-animation 2s infinite ease-in-out;-o-animation:water-front-animation 2s infinite ease-in-out;-ms-animation:water-front-animation 2s infinite ease-in-out;animation:water-front-animation 2s infinite ease-in-out;}
#ad-1 ul#boat{width:249px;height:215px;z-index:2;position:absolute;bottom:25px;left:20px;overflow:visible;-webkit-animation:boat-in-animation 3s 1 ease-out;-moz-animation:boat-in-animation 3s 1 ease-out;-o-animation:boat-in-animation 3s 1 ease-out;-ms-animation:boat-in-animation 3s 1 ease-out;animation:boat-in-animation 3s 1 ease-out;}
#ad-1 ul#boat li{width:249px;height:215px;background-image:url(../images/ad-1/boat.png);position:absolute;bottom:0px;left:0px;overflow:visible;-webkit-animation:boat-animation 2s infinite ease-in-out;-moz-animation:boat-animation 2s infinite ease-in-out;-o-animation:boat-animation 2s infinite ease-in-out;-ms-animation:boat-animation 2s infinite ease-in-out;animation:boat-animation 2s infinite ease-in-out;}
#ad-1 #question-mark{width:24px;height:50px;background-image:url(../images/ad-1/question-mark.png);position:absolute;right:34px;top:-30px;-webkit-animation:question-mark-animation 4s 1 ease-in-out;-moz-animation:question-mark-animation 4s 1 ease-in-out;-o-animation:question-mark-animation 4s 1 ease-in-out;-ms-animation:question-mark-animation 4s 1 ease-in-out;animation:question-mark-animation 4s 1 ease-in-out;}
#ad-1 #clouds{position:absolute;top:0px;z-index:0;}
#ad-1 #cloud-group-1{width:720px;position:absolute;left:0px;-webkit-animation:cloud-group-1-animation 30s infinite linear;-moz-animation:cloud-group-1-animation 30s infinite linear;-o-animation:cloud-group-1-animation 30s infinite linear;-ms-animation:cloud-group-1-animation 30s infinite linear;animation:cloud-group-1-animation 30s infinite linear;}
#ad-1 #cloud-group-2{width:720px;position:absolute;left:720px;-webkit-animation:cloud-group-2-animation 30s infinite linear;-moz-animation:cloud-group-2-animation 30s infinite linear;-o-animation:cloud-group-2-animation 30s infinite linear;-ms-animation:cloud-group-2-animation 30s infinite linear;animation:cloud-group-2-animation 30s infinite linear;}
#ad-1 .cloud-1{width:172px;height:121px;background-image:url(../images/ad-1/cloud-1.png);position:absolute;top:10px;left:40px;}
#ad-1 .cloud-2{width:121px;height:75px;background-image:url(../images/ad-1/cloud-2.png);position:absolute;top:-25px;left:300px;}
#ad-1 .cloud-3{width:132px;height:105px;background-image:url(../images/ad-1/cloud-3.png);position:absolute;top:-5px;left:530px;}
/* WebKit Animations */
@-webkit-keyframes h2-animation{0%{opacity:0;}
80%{opacity:0;}
100%{opacity:1;}
}
@-webkit-keyframes h3-animation{0%{opacity:0;}
80%{opacity:0;}
100%{opacity:1;}
}
@-webkit-keyframes form-animation{0%{opacity:0;right:-400px;}
90%{opacity:0;right:-400px;}
95%{opacity:0.5;right:20px;}
100%{opacity:1;right:0px;}
}
@-webkit-keyframes boat-in-animation{0%{left:-200px;}
100%{left:20px;}
}
@-webkit-keyframes boat-animation{0%{bottom:0px;left:0px;}
25%{bottom:-2px;left:-2px;}
70%{bottom:2px;left:-4px;}
100%{bottom:-1px;left:0px;}
}
@-webkit-keyframes question-mark-animation{0%{opacity:0;}
80%{opacity:0;}
100%{opacity:1;}
}
@-webkit-keyframes cloud-group-1-animation{0%{left:0px;}
99.9999%{left:-720px;}
100%{left:0px;}
}
@-webkit-keyframes cloud-group-2-animation{0%{left:720px;}
99.9999%{left:0px;}
100%{left:720px;}
}
@-webkit-keyframes water-back-animation{0%{bottom:10px;left:-20px;}
25%{bottom:8px;left:-22px;}
70%{bottom:12px;left:-24px;}
100%{bottom:9px;left:-20px;}
}
@-webkit-keyframes water-front-animation{0%{bottom:-70px;left:-30px;}
25%{bottom:-68px;left:-32px;}
70%{bottom:-72px;left:-34px;}
100%{bottom:-69px;left:-30px;}
}
/* FireFox Animations */
@-moz-keyframes h2-animation{0%{opacity:0;}
80%{opacity:0;}
100%{opacity:1;}
}
@-moz-keyframes h3-animation{0%{opacity:0;}
80%{opacity:0;}
100%{opacity:1;}
}
@-moz-keyframes form-animation{0%{opacity:0;right:-400px;}
90%{opacity:0;right:-400px;}
95%{opacity:0.5;right:20px;}
100%{opacity:1;right:0px;}
}
@-moz-keyframes boat-in-animation{0%{left:-200px;}
100%{left:20px;}
}
@-moz-keyframes boat-animation{0%{bottom:0px;left:0px;}
25%{bottom:-2px;left:-2px;}
70%{bottom:2px;left:-4px;}
100%{bottom:-1px;left:0px;}
}
@-moz-keyframes question-mark-animation{0%{opacity:0;}
80%{opacity:0;}
100%{opacity:1;}
}
@-moz-keyframes cloud-group-1-animation{0%{left:0px;}
99.9999%{left:-720px;}
100%{left:0px;}
}
@-moz-keyframes cloud-group-2-animation{0%{left:720px;}
99.9999%{left:0px;}
100%{left:720px;}
}
@-moz-keyframes water-back-animation{0%{bottom:10px;left:-20px;}
25%{bottom:8px;left:-22px;}
70%{bottom:12px;left:-24px;}
100%{bottom:9px;left:-20px;}
}
@-moz-keyframes water-front-animation{0%{bottom:-70px;left:-30px;}
25%{bottom:-68px;left:-32px;}
70%{bottom:-72px;left:-34px;}
100%{bottom:-69px;left:-30px;}
}
/* Opera Animations */
@-o-keyframes h2-animation{0%{opacity:0;}
80%{opacity:0;}
100%{opacity:1;}
}
@-o-keyframes h3-animation{0%{opacity:0;}
80%{opacity:0;}
100%{opacity:1;}
}
@-o-keyframes form-animation{0%{opacity:0;right:-400px;}
90%{opacity:0;right:-400px;}
95%{opacity:0.5;right:20px;}
100%{opacity:1;right:0px;}
}
@-o-keyframes boat-in-animation{0%{left:-200px;}
100%{left:20px;}
}
@-o-keyframes boat-animation{0%{bottom:0px;left:0px;}
25%{bottom:-2px;left:-2px;}
70%{bottom:2px;left:-4px;}
100%{bottom:-1px;left:0px;}
}
@-o-keyframes question-mark-animation{0%{opacity:0;}
80%{opacity:0;}
100%{opacity:1;}
}
@-o-keyframes cloud-group-1-animation{0%{left:0px;}
99.9999%{left:-720px;}
100%{left:0px;}
}
@-o-keyframes cloud-group-2-animation{0%{left:720px;}
99.9999%{left:0px;}
100%{left:720px;}
}
@-o-keyframes water-back-animation{0%{bottom:10px;left:-20px;}
25%{bottom:8px;left:-22px;}
70%{bottom:12px;left:-24px;}
100%{bottom:9px;left:-20px;}
}
@-o-keyframes water-front-animation{0%{bottom:-70px;left:-30px;}
25%{bottom:-68px;left:-32px;}
70%{bottom:-72px;left:-34px;}
100%{bottom:-69px;left:-30px;}
}
/* IE Animations */
@-ms-keyframes h2-animation{0%{opacity:0;}
80%{opacity:0;}
100%{opacity:1;}
}
@-ms-keyframes h3-animation{0%{opacity:0;}
80%{opacity:0;}
100%{opacity:1;}
}
@-ms-keyframes form-animation{0%{opacity:0;right:-400px;}
90%{opacity:0;right:-400px;}
95%{opacity:0.5;right:20px;}
100%{opacity:1;right:0px;}
}
@-ms-keyframes boat-in-animation{0%{left:-200px;}
100%{left:20px;}
}
@-ms-keyframes boat-animation{0%{bottom:0px;left:0px;}
25%{bottom:-2px;left:-2px;}
70%{bottom:2px;left:-4px;}
100%{bottom:-1px;left:0px;}
}
@-ms-keyframes question-mark-animation{0%{opacity:0;}
80%{opacity:0;}
100%{opacity:1;}
}
@-ms-keyframes cloud-group-1-animation{0%{left:0px;}
99.9999%{left:-720px;}
100%{left:0px;}
}
@-ms-keyframes cloud-group-2-animation{0%{left:720px;}
99.9999%{left:0px;}
100%{left:720px;}
}
@-ms-keyframes water-back-animation{0%{bottom:10px;left:-20px;}
25%{bottom:8px;left:-22px;}
70%{bottom:12px;left:-24px;}
100%{bottom:9px;left:-20px;}
}
@-ms-keyframes water-front-animation{0%{bottom:-70px;left:-30px;}
25%{bottom:-68px;left:-32px;}
70%{bottom:-72px;left:-34px;}
100%{bottom:-69px;left:-30px;}
}
/* Animations */
@keyframes h2-animation{0%{opacity:0;}
80%{opacity:0;}
100%{opacity:1;}
}
@keyframes h3-animation{0%{opacity:0;}
80%{opacity:0;}
100%{opacity:1;}
}
@keyframes form-animation{0%{opacity:0;right:-400px;}
90%{opacity:0;right:-400px;}
95%{opacity:0.5;right:20px;}
100%{opacity:1;right:0px;}
}
@keyframes boat-in-animation{0%{left:-200px;}
100%{left:20px;}
}
@keyframes boat-animation{0%{bottom:0px;left:0px;}
25%{bottom:-2px;left:-2px;}
70%{bottom:2px;left:-4px;}
100%{bottom:-1px;left:0px;}
}
@keyframes question-mark-animation{0%{opacity:0;}
80%{opacity:0;}
100%{opacity:1;}
}
@keyframes cloud-group-1-animation{0%{left:0px;}
99.9999%{left:-720px;}
100%{left:0px;}
}
@keyframes cloud-group-2-animation{0%{left:720px;}
99.9999%{left:0px;}
100%{left:720px;}
}
@keyframes water-back-animation{0%{bottom:10px;left:-20px;}
25%{bottom:8px;left:-22px;}
70%{bottom:12px;left:-24px;}
100%{bottom:9px;left:-20px;}
}
@keyframes water-front-animation{0%{bottom:-70px;left:-30px;}
25%{bottom:-68px;left:-32px;}
70%{bottom:-72px;left:-34px;}
100%{bottom:-69px;left:-30px;}
}
/* End Ad 1 */
/* Begin Ad 2 */
#ad-2{width:160px;height:600px;margin:40px auto 40px;background-image:url(../images/ad-2/background.png);background-position:center;background-repeat:no-repeat;overflow:hidden;position:relative;box-shadow:1px 1px 4px rgba(0,0,0,0.4);text-align:center;}
#ad-2 h2{font-family:'Alfa Slab One',cursive;color:#137dd5;font-size:50px;line-height:50px;text-shadow:0px 0px 4px #fff;margin-top:110px;-webkit-animation:h2-animation-2 10s 1 ease-in-out;-moz-animation:h2-animation-2 10s 1 ease-in-out;-o-animation:h2-animation-2 5s 1 ease-in-out;-ms-animation:h2-animation-2 5s 1 ease-in-out;animation:h2-animation-2 5s 1 ease-in-out;}
#ad-2 ul#boat{width:96px;height:84px;overflow:visible;z-index:2;position:absolute;top:326px;left:10px;-webkit-animation:boat-in-animation-2 15s 1 ease-in-out;-moz-animation:boat-in-animation-2 15s 1 ease-in-out;-o-animation:boat-in-animation-2 15s 1 ease-in-out;-ms-animation:boat-in-animation-2 15s 1 ease-in-out;animation:boat-in-animation-2 15s 1 ease-in-out;}
#ad-2 ul#boat li{width:96px;height:84px;z-index:2;position:relative;top:0px;left:0px;background-image:url(../images/ad-2/boat.png);-webkit-animation:boat-animation-2 2.5s infinite ease-out;-moz-animation:boat-animation-2 2.5s infinite ease-out;-o-animation:boat-animation-2 2.5s infinite ease-out;-ms-animation:boat-in-animation-2 2.5s infinite ease-out;animation:boat-animation-2 2.5s infinite ease-out;}
#ad-2 #water{position:absolute;top:382px;-webkit-animation:water-in-animation-2 2s 1 ease-out;-moz-animation:water-in-animation-2 2s 1 ease-out;-o-animation:water-in-animation-2 2s 1 ease-out;-ms-animation:water-in-animation-2 2s 1 ease-out;animation:water-in-animation-2 2s 1 ease-out;}
#ad-2 #water-back{width:200px;height:75px;background-image:url(../images/ad-2/water-back.png);background-repeat:repeat-x;z-index:1;position:absolute;top:0px;left:-22px;-webkit-animation:water-back-animation-2 3s infinite ease-in-out;-moz-animation:water-back-animation-2 3s infinite ease-in-out;-o-animation:water-back-animation-2 3s infinite ease-in-out;-ms-animation:water-back-animation-2 3s infinite ease-in-out;animation:water-back-animation-2 3s infinite ease-in-out;}
#ad-2 #water-front{width:200px;height:368px;background-image:url(../images/ad-2/water-front.png);background-repeat:repeat-x;z-index:3;position:absolute;top:2px;left:-30px;-webkit-animation:water-front-animation-2 2s infinite ease-in-out;-moz-animation:water-front-animation-2 2s infinite ease-in-out;-o-animation:water-front-animation-2 2s infinite ease-in-out;-ms-animation:water-front-animation-2 2s infinite ease-in-out;animation:water-front-animation-2 2s infinite ease-in-out;}
#ad-2 #content{width:100%;position:absolute;bottom:0px;z-index:4;-webkit-animation:content-in-animation-2 15s 1 ease-in-out;-moz-animation:content-in-animation-2 15s 1 ease-in-out;-o-animation:content-in-animation-2 15s 1 ease-in-out;-ms-animation:content-in-animation-2 15s 1 ease-in-out;animation:content-in-animation-2 15s 1 ease-in-out;}
#ad-2 #content h3{color:#fff;font-family:'Boogaloo',cursive;font-size:30px;line-height:32px;text-shadow:0px 0px 4px #137dd5;}
#ad-2 #content a:link,#ad-2 #content a:visited{display:inline-block;height:20px;padding:15px;font-family:'Boogaloo',cursive;font-size:20px;line-height:20px;color:#137dd5;text-shadow:1px 1px 0px #fff;background-color:#fff;border-radius:5px;margin:20px 0px;box-shadow:2px 2px 0px #137dd5;border:1px solid #fff;background-image:linear-gradient(bottom,rgb(238,238,238) 10%,rgb(255,255,255) 55%);background-image:-o-linear-gradient(bottom,rgb(238,238,238) 10%,rgb(255,255,255) 55%);background-image:-moz-linear-gradient(bottom,rgb(238,238,238) 10%,rgb(255,255,255) 55%);background-image:-webkit-linear-gradient(bottom,rgb(238,238,238) 10%,rgb(255,255,255) 55%);background-image:-ms-linear-gradient(bottom,rgb(238,238,238) 10%,rgb(255,255,255) 55%);}
#ad-2 #content a:hover,#ad-2 #content a:active{background-image:linear-gradient(bottom,rgb(255,255,255) 10%,rgb(255,255,255) 55%);background-image:-o-linear-gradient(bottom,rgb(255,255,255) 10%,rgb(255,255,255) 55%);background-image:-moz-linear-gradient(bottom,rgb(255,255,255) 10%,rgb(255,255,255) 55%);background-image:-webkit-linear-gradient(bottom,rgb(255,255,255) 10%,rgb(255,255,255) 55%);background-image:-ms-linear-gradient(bottom,rgb(255,255,255) 10%,rgb(255,255,255) 55%);}
/* WebKit Animations */
@-webkit-keyframes h2-animation-2{0%{opacity:0;font-size:0px;}
90%{opacity:0;font-size:0px;}
95%{opacity:1;font-size:60px;}
100%{font-size:50px;}
}
@-webkit-keyframes content-in-animation-2{0%{opacity:0;}
90%{opacity:0;}
95%{opacity:1;}
100%{opacity:1;}
}
@-webkit-keyframes water-in-animation-2{0%{top:600px;left:-10px;}
100%{top:380px;left:0px;}
}
@-webkit-keyframes water-front-animation-2{0%{top:2px;left:-30px;}
25%{top:0px;left:-32px;}
70%{top:4px;left:-34px;}
100%{top:1px;left:-30px;}
}
@-webkit-keyframes water-back-animation-2{0%{top:0px;left:-20px;}
25%{top:-2px;left:-22px;}
70%{top:2px;left:-24px;}
100%{top:-1px;left:-20px;}
}
@-webkit-keyframes boat-in-animation-2{0%{left:-150px;}
7%{left:-150px;}
75%{left:310px;}
75.0001%{left:-100px;}
90%{left:10px;}
100%{left:10px;}
}
@-webkit-keyframes boat-animation-2{0%{top:0px;left:0px;}
25%{top:-2px;left:-2px;}
70%{top:2px;left:-2px;}
100%{top:-1px;left:-1px;}
}
/* FireFox Animations */
@-moz-keyframes h2-animation-2{0%{opacity:0;font-size:0px;}
90%{opacity:0;font-size:0px;}
95%{opacity:1;font-size:60px;}
100%{font-size:50px;}
}
@-moz-keyframes content-in-animation-2{0%{opacity:0;}
90%{opacity:0;}
95%{opacity:1;}
100%{opacity:1;}
}
@-moz-keyframes water-in-animation-2{0%{top:600px;left:-10px;}
100%{top:380px;left:0px;}
}
@-moz-keyframes water-front-animation-2{0%{top:2px;left:-30px;}
25%{top:0px;left:-32px;}
70%{top:4px;left:-34px;}
100%{top:1px;left:-30px;}
}
@-moz-keyframes water-back-animation-2{0%{top:0px;left:-20px;}
25%{top:-2px;left:-22px;}
70%{top:2px;left:-24px;}
100%{top:-1px;left:-20px;}
}
@-moz-keyframes boat-in-animation-2{0%{left:-150px;}
7%{left:-150px;}
75%{left:310px;}
75.0001%{left:-100px;}
90%{left:10px;}
100%{left:10px;}
}
@-moz-keyframes boat-animation-2{0%{top:0px;left:0px;}
25%{top:-2px;left:-2px;}
70%{top:2px;left:-2px;}
100%{top:-1px;left:-1px;}
}
/* Opera Animations */
@-o-keyframes h2-animation-2{0%{opacity:0;font-size:0px;}
90%{opacity:0;font-size:0px;}
95%{opacity:1;font-size:60px;}
100%{font-size:50px;}
}
@-o-keyframes content-in-animation-2{0%{opacity:0;}
90%{opacity:0;}
95%{opacity:1;}
100%{opacity:1;}
}
@-o-keyframes water-in-animation-2{0%{top:600px;left:-10px;}
100%{top:380px;left:0px;}
}
@-o-keyframes water-front-animation-2{0%{top:2px;left:-30px;}
25%{top:0px;left:-32px;}
70%{top:4px;left:-34px;}
100%{top:1px;left:-30px;}
}
@-o-keyframes water-back-animation-2{0%{top:0px;left:-20px;}
25%{top:-2px;left:-22px;}
70%{top:2px;left:-24px;}
100%{top:-1px;left:-20px;}
}
@-o-keyframes boat-in-animation-2{0%{left:-150px;}
7%{left:-150px;}
75%{left:310px;}
75.0001%{left:-100px;}
90%{left:10px;}
100%{left:10px;}
}
@-o-keyframes boat-animation-2{0%{top:0px;left:0px;}
25%{top:-2px;left:-2px;}
70%{top:2px;left:-2px;}
100%{top:-1px;left:-1px;}
}
/* IE Animations */
@-ms-keyframes h2-animation-2{0%{opacity:0;font-size:0px;}
90%{opacity:0;font-size:0px;}
95%{opacity:1;font-size:60px;}
100%{font-size:50px;}
}
@-ms-keyframes content-in-animation-2{0%{opacity:0;}
90%{opacity:0;}
95%{opacity:1;}
100%{opacity:1;}
}
@-ms-keyframes water-in-animation-2{0%{top:600px;left:-10px;}
100%{top:380px;left:0px;}
}
@-ms-keyframes water-front-animation-2{0%{top:2px;left:-30px;}
25%{top:0px;left:-32px;}
70%{top:4px;left:-34px;}
100%{top:1px;left:-30px;}
}
@-ms-keyframes water-back-animation-2{0%{top:0px;left:-20px;}
25%{top:-2px;left:-22px;}
70%{top:2px;left:-24px;}
100%{top:-1px;left:-20px;}
}
@-ms-keyframes boat-in-animation-2{0%{left:-150px;}
7%{left:-150px;}
75%{left:310px;}
75.0001%{left:-100px;}
90%{left:10px;}
100%{left:10px;}
}
@-ms-keyframes boat-animation-2{0%{top:0px;left:0px;}
25%{top:-2px;left:-2px;}
70%{top:2px;left:-2px;}
100%{top:-1px;left:-1px;}
}
/* Animations */
@keyframes h2-animation-2{0%{opacity:0;font-size:0px;}
90%{opacity:0;font-size:0px;}
95%{opacity:1;font-size:60px;}
100%{font-size:50px;}
}
@keyframes content-in-animation-2{0%{opacity:0;}
90%{opacity:0;}
95%{opacity:1;}
100%{opacity:1;}
}
@keyframes water-in-animation-2{0%{top:600px;left:-10px;}
100%{top:380px;left:0px;}
}
@keyframes water-front-animation-2{0%{top:2px;left:-30px;}
25%{top:0px;left:-32px;}
70%{top:4px;left:-34px;}
100%{top:1px;left:-30px;}
}
@keyframes water-back-animation-2{0%{top:0px;left:-20px;}
25%{top:-2px;left:-22px;}
70%{top:2px;left:-24px;}
100%{top:-1px;left:-20px;}
}
@keyframes boat-in-animation-2{0%{left:-150px;}
7%{left:-150px;}
75%{left:310px;}
75.0001%{left:-100px;}
90%{left:10px;}
100%{left:10px;}
}
@keyframes boat-animation-2{0%{top:0px;left:0px;}
25%{top:-2px;left:-2px;}
70%{top:2px;left:-2px;}
100%{top:-1px;left:-1px;}
}
/* End Ad 2 */

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