百度前端技術學院2018筆記 之 利用 CSS animation 製做一個炫酷的 Slider

前言

題目地址

利用 CSS animation 製做一個炫酷的 Slider

思路整理

首先頁面包含三種東西

• 一個是type爲radio的input其實就是單選框
• 二是每一個單選框對應的label
• 三是你要用做背景的每一個圖片

而後具體實現思路是你點擊每一個label而後出現對應的圖片

基本佈局

首先是對界面進行佈局

<div class="page">
<div class="slider">
<input id="img1" name="img" type="radio" class="view" checked>
<input id="img2" name="img" type="radio" class="view">
<input id="img3" name="img" type="radio" class="view">
<input id="img4" name="img" type="radio" class="view">
<input id="img5" name="img" type="radio" class="view">
<label for="img1" class="img1"></label>
<label for="img2" class="img2"></label>
<label for="img3" class="img3"></label>
<label for="img4" class="img4"></label>
<label for="img5" class="img5"></label>
<div class="image">
<img src="001.jpg">
<img src="002.jpg">
<img src="003.jpg">
<img src="004.jpg">
<img src="005.jpg">
</div>
</div>
</div>

* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
.page {
height: 100%;
width: 100%;
background-color: yellow;
}
.slider {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
}
.image img {
height: 100%;
width: 100%;
position: fixed;
left:0;
top: 0;
}
label {
width: 15%;
height: 130px;
background-color: red;
margin-bottom: 50px;
margin-left: 10px;
margin-right: 10px;
filter: brightness(0.8);
cursor: pointer;
z-index: 10;
}
/*去除單選框*/
.view{
display: none;
}

佈局沒什麼要說的，主要是注意一下幾點

• html設置成100%使整個頁面全屏
• 下面那些窗口我用的是flex佈局
• 而後全部的圖片都是100%而後相對瀏覽器定位一下
• label做爲咱們的選擇窗口，對input要設置display:none把他隱藏掉

而後大概的效果是

添加下面label的圖片

label.img1 {
background-image: url("001.jpg");
background-size: 100% 100%;
}
label.img2 { }
label.img3 { }
label.img4 { }
label.img5 { }

很簡單就是做爲背景圖片添加到label上面

效果 而後須要鼠標放上去的效果，很簡單

label:hover{
filter: brightness(1);
}

加動畫

開始重點了首先寫keyframes，這個根據excel表來寫就能夠了，篇幅太大，我只展現一個

@keyframes img1 {
from {
left: -500px;
}
to {
left: 0;
}
}
@keyframes img2 { }
@keyframes img3 { }
@keyframes img4 { }
@keyframes img5 { }

而後就是加checked效果，就是選擇了後就產生動畫

.view:nth-child(1):checked ~ .image img:nth-child(1) {
animation: img1 .5s ease-out;
display:block;
opacity: 1;
z-index: 4;
}
.view:nth-child(2):checked ~ .image img:nth-child(2) { }
.view:nth-child(3):checked ~ .image img:nth-child(3) { }
.view:nth-child(4):checked ~ .image img:nth-child(4) { }
.view:nth-child(5):checked ~ .image img:nth-child(5) { }

就是點擊了這個找到他兄弟節點image而後他的對應個數的子元素來添加動畫 而後大概的效果就出來了

你覺得這樣就成功了？

完成上面的後你就有了一個基本的實現了，可是在你玩的時候你會發現一個bug點擊一個新的label而後背景立刻變成最後一張圖而後在這張圖的基礎上出現新的圖片。按道理以前的那張圖應該保留而後出現新的圖片。因此還要加上

.view:not(:checked) ~ .image img{
animation: oncheck 1s linear;
}
@keyframes oncheck {
0% {
opacity: 1;
z-index: 3;
}
100% {
opacity: 1;
z-index: 3;
}
}

• 在最開始的時候全部層次都是3，初始選中的那個是4
• 在最開始全部沒選中的都經歷了下面的動畫，保持1s的z-index: 3， 過了一秒鐘後都保持到層次是2
• 而後你選擇一張圖片，這張圖片從2變成4，同時開始動畫
• 你以前選中的圖片從選中到未選中，由於是新來到未選中的，因此就會執行一次未選中的動畫，也就是保持1s的z-index: 3
• 這樣就實現了上一張圖片保持不動等新的圖片來了後再恢復

總結

在最開始本身動手寫的時候是用的div，而後div沒有點擊這個效果只有hover，因此之作了一個很是粗糙的。 而後交了做業後看到好多同窗是用的js來實現的，感受js實現是比較簡單，而後通常均可以寫出來的。 而後看了不少的做業後發現有位大佬採用單選框的特性來寫，打開了個人新世界，而後我就參考大佬的完成了做業。 附上個人代碼地址 代碼 附上個人效果地址 效果