CSS中,我們常常需要實(shí)現(xiàn)新聞上下輪番的效果。下面我們就來(lái)介紹一下如何用CSS實(shí)現(xiàn)這種效果。
.news { height: 200px; /*容器高度*/ overflow: hidden; /*隱藏超出區(qū)域的內(nèi)容*/ } .news ul { margin: 0; padding: 0; list-style: none; /*去除列表項(xiàng)的默認(rèn)樣式*/ position: relative; top: 0; } .news li { height: 50px; /*單個(gè)項(xiàng)的高度*/ line-height: 50px; /*垂直居中*/ border-bottom: 1px solid #999; /*分割線樣式*/ } .news li:last-child { border-bottom: none; /*最后一個(gè)項(xiàng)去除分割線*/ } .news li.active { background-color: #f0f0f0; /*當(dāng)前項(xiàng)的背景色*/ } .news li.move { -webkit-transition: all 0.5s ease; /*動(dòng)畫效果*/ transition: all 0.5s ease; position: absolute; top: -50px; /*向上移出容器*/ left: 0; width: 100%; /*占滿容器寬度*/ } .news .animating { pointer-events: none; /*禁止點(diǎn)擊事件*/ }
代碼解釋:
首先,我們需要一個(gè)容器來(lái)包含我們的新聞列表,設(shè)置它的高度和overflow屬性隱藏溢出內(nèi)容。
然后我們需要一些HTML代碼來(lái)表示我們的新聞列表,UL元素扮演了容器的角色,我們將所有的列表項(xiàng)都放在其中,用CSS去除UL默認(rèn)的樣式。
然后我們?yōu)槊總€(gè)列表項(xiàng)設(shè)置高度,線條樣式等等。其中,我們將最后一個(gè)列表項(xiàng)去除了分割線。
我們還為當(dāng)前選中的列表項(xiàng)設(shè)置了背景色。
接下來(lái),我們需要用到一些動(dòng)畫效果的CSS屬性。在列表項(xiàng)移動(dòng)的時(shí)候,我們每次將它移出容器,向上移動(dòng)一個(gè)單項(xiàng)的高度,同時(shí)用絕對(duì)定位讓它占據(jù)整個(gè)容器的位置。同時(shí),我們?cè)O(shè)置了一個(gè)selector來(lái)禁止它的點(diǎn)擊事件。
執(zhí)行動(dòng)畫時(shí),我們使用CSS的transition屬性讓它平移0.5秒,使用ease效果是為了視覺效果更加自然。
最后,將動(dòng)畫中的類添加到當(dāng)前項(xiàng),就可以實(shí)現(xiàn)輪番的新聞列表效果啦!