鐵人賽快要結束了,今明兩天會介紹純CSS可以做些什麼特別的效果。今天要介紹的是專輯相簿的效果。
來源 : http://codepen.io/anon/pen/hixjL
建立html
<div class="cover"> <div class="coverflow-list"> <input type="checkbox" name="cover-item" id="cover-1"> <div class="coverflow-item"> <label for="cover-1"> <figure class="album-cover"> <img src="/images/mayday/001.jpg" alt=""> </figure> <figcaption class="album-name">為愛而生</figcaption> </label> </div> </div> </div> <div class="controllor"> <label for="cover-1">遠端遙控器</label> </div>
首先準備好需要的html,有些重點可以讓大家了解。
- checkbox 中的id記得設定
- id是唯一的
- label中的
for
的值會對應到checkbox的id
- label可以重複使用,
for
的值對應相同ID即可
設定基本樣式
這一部分只是先設定基本樣式,就不多闡述了。
.coverflow-item display: inline-block position: relative margin: 0 auto text-align: center .album-cover height: 150px width: 150px img opacity: 0.5 .album-name text-align: center display: block color: #777 label display: block
設定3D樣式
在先前的文章有依序介紹許多transform的樣式設定,如果仔細看其實都是前幾個章節介紹的。
.coverflow-list +perspective(900px) //設定3D景深距離 +transform-style(preserve-3d) +perspective-origin(100% 30%) //3D透視的視點 .coverflow-item +transition(all .3s ease) //transition動畫 +transform(rotateY(45deg)) //y軸旋轉45度,這邊都是用中心點都軸心
套用checkbox效果
這步驟有兩個重點一個是checked
(被選取)另一個則是+
(相鄰),所以要進行變化的元素必須緊貼著checkbox
元素。
input[type="checkbox"] display: none //隱藏checkbox &:checked //如果被選取時的效果 &+.coverflow-item //如果被選取時 其他相鄰元件效果 +transition(all .3s ease) +transform(rotateY(0.1deg)) margin: 0 auto img opacity: 1 .album-name color: #333
只要善用label
中的for
對應input
的ID,無論多遠的距離的可以控制,接下來只要就是控制checkbox的相鄰物件狀態,就可以達到這樣的效果。
Demo
這一個部分是用html+CSS構成,而其中的重點是上面所介紹的label
及checkbox
,在本區雖然把checkbox
換成了radio
,但概念上是差不多的;另外一個重點則是Css selector中的~
,他可以選取目前元素後方所有同層級的元素,讓這一個CD相簿有三種角度。
Html 原始碼
原始碼相當的長,我就只擷取部分作為範例。
<div class="test"> <div class="cover"> <ul class="coverflow-list"> <input type="radio" name="cover-item" id="cover-1"> <li class="coverflow-item"> <label for="cover-1"> <figure class="album-cover"> <img src="/images/mayday/001.jpg" alt=""> </figure> <figcaption class="album-name">為愛而生</figcaption> </label> </li> ...略 </ul> </div> <div class="controllor"> <label for="cover-1">1</label> <label for="cover-2">2</label> <label for="cover-3">3</label> <label for="cover-4">4</label> <label for="cover-5">5</label> <label for="cover-6">6</label> </div> </div>如果有少
Div
結尾,請不要太在意,只是我沒copy到而已...
這一段html和上次比較不同的地方,就是把checkbox改成了radio,radio
在用法上是屬於單選題,而checkbox
是屬於多選題;只要input屬性name
都是相同的,都算是一個群組,而這一個群組就只能一個被選擇。
Sass
.coverflow-item display: inline-block position: relative margin: 0 auto text-align: center margin: 0 -45px background-color: white .album-cover height: 150px width: 150px -webkit-box-reflect: below 22px -webkit-linear-gradient(rgba(255,255,255,0)85%, white 150%) box-reflect: below 22px linear-gradient(rgba(255,255,255,0) 85%, white 150%) //專輯反射 img opacity: 0.5 .album-name text-align: center display: block color: #777 label display: block .coverflow-list +perspective(900px) +transform-style(preserve-3d) +perspective-origin(100% 30%) .coverflow-item +transition(all .3s ease) +transform(rotateY(45deg)) input[type="radio"] display: none &:checked &+.coverflow-item +transition(all .3s ease) +transform(rotateY(0.1deg)) margin: 0 auto img opacity: 1 .album-name color: #555 &~.coverflow-item +transform(rotateY(-45deg)) //重點語法 將被選取的Radio後方全部都反方向轉45度 .controllor margin-top: 40px label cursor: pointer color: #999 padding: 8px border: 1px solid #ccc background-color: #fafafa +transition(all .3s) &:hover color: #555 border: 1px solid #555
這一部分可以著重的重點就是放在CSS selector的~
語法,再被選取的radio後方,進行反向Y軸旋轉的動作。