DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS3實例應用:制作照片長廊
CSS3實例應用:制作照片長廊
編輯:CSS詳解     

CSS3動畫盡管目前只有webkit內核的一些浏覽器才支持,但是作為一個前端從業者,應該有長遠的目光,盡早的去熟悉,今天就用CSS3做了一個照片長廊的應用,效果圖:

Demo地址:請使用safari或者Chrome猛擊
制作步驟如下:
1.首先我們鋪設一個漸變的背景色:

DaimaRen.cn © 2009-2010 by TomIE Zhang
background:  -webkit-gradIEnt(linear, 0 0, 0 100%, from(#F9F9F9), to(#5F5F5F));

這是webkit內核的浏覽器的寫法(注由於CSS3動畫其他內核浏覽器暫時不能完全支持,所以本例沒有考慮兼容,只針對webkit),意思是讓body的背景從上往下漸變,漸變色從F9F9F9到5F5F5F。

2.設置一個容器來放置照片:

DaimaRen.cn © 2009-2010 by TomIE Zhang
.player {
	width:1500px;
	position:absolute;
	left:0px;
	top:0px;
	-webkit-animation-name: goleft;/*關鍵幀名稱*/
	-webkit-animation-duration: 15s;/*播放間隔時間*/
	-webkit-animation-iteration-count:infinite;/*循環次數*/
	-webkit-animation-direction:alternate;/*動畫方向*/
}

因為我設置的單個圖片寬是300px,一共放了5張,所以總寬度設置為1500,並讓它浮起來,最關鍵的是下面的那幾句,也是給它設置動畫效果。每一句的作用見代碼注釋,如果想詳細了解,可以查閱W3C的草案

3.設置關鍵幀動作。
這個是重點,你的動畫想有什麼效果就在這裡設置:

DaimaRen.cn © 2009-2010 by TomIE Zhang
@-webkit-keyframes goleft {
	from {
		left: 0;
		-webkit-animation-timing-function:ease-in-out;
	}
	25% {
		left: -300px;
		-webkit-animation-timing-function:ease-in-in;
	}
	50% {
		left: -600px;
		-webkit-animation-timing-function:ease-in-out;
	}
	75% {
		left: -900px;
		-webkit-animation-timing-function:ease-in-in;
	}
	to {
		left: -1200px;
	}
}

這裡就是對goleft的關鍵幀的描述,其實也就是每一步步進的距離。
還不夠炫,再加點東西:

DaimaRen.cn © 2009-2010 by TomIE Zhang
.player a:hover img {
	-webkit-animation-name: zoomIn;
	-webkit-animation-duration: 5s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;
}

設置當鼠標移到圖片上時,這張圖片放大,這裡我們又設置了一個叫zoomIn的關鍵幀,下面是它的描述:

DaimaRen.cn © 2009-2010 by TomIE Zhang
@-webkit-keyframes zoomIn {
	from {
		-webkit-transform: scale(1);
	}
	25% {
		-webkit-transform: scale(1.2);
	}
	50% {
		-webkit-transform: scale(1.4);
	}
	to {
		-webkit-transform: scale(1.6);
	}
}

這裡用到了CSS的轉換屬性裡的放大效果,定義了每一步的放大尺寸,使得圖片能夠平穩的放大。
光看圖似乎不夠哦,加點音樂吧:

DaimaRen.cn © 2009-2010 by TomIE Zhang
<div id="mbox"><audio src="http://nio.name/content/mp3/09.mp3" autoplay="false" controls="true"></audio></div>

用Html5的音頻標簽添加一個播放器,聽著歌看著X圖。。。。。囧
最後再加個假的音樂均衡器吧:

DaimaRen.cn © 2009-2010 by TomIE Zhang
<div id="mBar">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
</div>

先寫幾個空的標簽,然後我們繼續用CSS3來控制它:

DaimaRen.cn © 2009-2010 by TomIE Zhang
#mBar span:nth-child(1){
	-webkit-animation-name: bar;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;
	background: -webkit-gradIEnt(linear, 0 0, 0 100%, from(#FF00CC), to(#E8E8E8));
}
#mBar span:nth-child(2){
	-webkit-animation-name: bar;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;
	background: -webkit-gradIEnt(linear, 0 0, 0 100%, from(#66FF00), to(#E8E8E8));
}
#mBar span:nth-child(3){
	-webkit-animation-name: bar;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;
	background: -webkit-gradIEnt(linear, 0 0, 0 100%, from(#FF3300), to(#E8E8E8));
}
#mBar span:nth-child(4){
	-webkit-animation-name: bar;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;
}
#mBar span:nth-child(5){
	-webkit-animation-name: bar;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;;
}

用CSS3選擇器很方便的給不同的標簽定義不同時常的關鍵幀(這樣就可以讓它們出現錯落的伸縮狀態,以模擬一個音頻波的效果),定義關鍵幀:

DaimaRen.cn © 2009-2010 by TomIE Zhang
@-webkit-keyframes bar {
	from {
		height:10px;		
	}
	to {
		height:80px;
	}
}

OK,這樣一個完全無需JS的照片長廊就大功告成了,是不是很簡單呢?發揮你的想象力也來CSS3吧!
附送一個使用CSS3的游戲:http://icefox.net/anigma/

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved