在座這網站的時候,上方有保留一塊區域打算放banner,一般來說banner都會用jquery跑馬燈的方式去做,但是對我來說那要做好幾張圖…好麻煩,所以我就做一張連續圖片(左右可以相連的圖片),讓他不斷的向右移動。
本篇重點
本篇會介紹如何用css寫出類似本站上方的banner。
CSS範例
準備圖片
一開始當然要先做一張圖,圖的重點是左右方可以相連的,如下圖最左方的chrome是被切一半,和右方的另一半chrome剛好可以接起來。另外這banner的寬度是”1122px”,等等會用到這寬度。
CSS
直接介紹CSS的寫法,會比較容易了解其原理,這是利用css3 Animation的語法製作,Animation 包含keyframes 及 animation,前者是物件運動的時間軸,相當於劇本;後者是keyframes所呈現的方式(directive),這兩者都是必要的,缺一不可。
首先介紹keyframes
@keyframes banner-slider {
/*banner-slider 是自訂義命名,本篇命名為banner-slider*/
from { /*開始*/
background-position: 0 0;
}
to { /*結束,在結束時background-position的x移動了1122px*/
background-position: 1122px 0;
}
}
介紹animation
animation: banner-slider 180s infinite linear;
/*banner-slider 是keyframe的名稱*/
/*180s 是整段keyframes的時間*/
/*infinite 無限次輪播*/
/*linear 播放速率是固定的(線性)*/
完成
CSS3是很麻煩的語法,要依瀏覽器寫入對應的前輟詞,如果有興趣的設計師,可以直接複製下方CSS,然後把圖片略做修改就可以玩看看囉。
.banner {
background: url('/images/banner-01.png') center repeat-x;
min-height: 300px;
-webkit-animation: banner-slider 180s infinite linear;
-moz-animation: banner-slider 180s infinite linear;
-o-animation: banner-slider 180s infinite linear;
animation: banner-slider 180s infinite linear;
}
@-webkit-keyframes banner-slider {
from {
background-position: 0 0;
}
to {
background-position: 1122px 0;
}
}
@-moz-keyframes banner-slider {
from {
background-position: 0 0;
}
to {
background-position: 1122px 0;
}
}
@-ms-keyframes banner-slider {
from {
background-position: 0 0;
}
to {
background-position: 1122px 0;
}
}
@keyframes banner-slider {
from {
background-position: 0 0;
}
to {
background-position: 1122px 0;
}
}
如果本篇有任何疑問,也歡迎在下方留言。