利用CSS3實現制作網頁Banner動畫



21 83 28



特效描述:利用CSS3實現 制作網頁 Banner動畫,利用CSS3實現制作網頁Banner動畫

代碼結構

1. 引入CSS

<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'>

2. HTML代碼

        <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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 加載動畫 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 h5按鈕動畫 html5按鈕動畫 h5動畫導航 h5動畫菜單 html5動畫導航 html5動畫菜單 全屏切換
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表