CSS3 animation實現圖片輪播效果自動顯示無需使用js 含代碼（圖片輪播效果一）

時間 2019-11-26

標籤 css3 css animation 實現圖片效果自動顯示無需使用代碼欄目 CSS 简体版

原文原文鏈接

首先來看一下效果：（這些個電影畫風好溫柔...）css

0、先講一個CSS3的動畫用法web

animation基本用法是：animation: name keeping-time animate-function delay times iteration final;ide

第一個參數：name (animation-name)：

　　動畫的名字，CSS3採用「關鍵幀 keyframes」來定義動畫,以下第4個步驟展現；動畫

1 @keyframes image{
2     0%{opacity: 0;}
3     100%{opacity:1;}
4 }    
5 /*或者*/
6 @keyframes image{
7     from{opacity: 0;}
8     to{opacity: 1;}
9 }

第二個參數 keeping-time (animation-duration)：

　　　　動畫的持續時間，單位s或者ms（必定要帶時間單位）；spa

第三個參數 animate-function (animation-timing-function)：

　　　　（動畫方式）的貝賽爾曲線，可取值有：ease、ease-in、ease-out、linear、ease-in-out、cubic-bezier(num1,num2,num3,num4)；3d

第四個參數 delay (animation-delay)：

　　　　動畫延遲執行的時間，單位爲s或者ms{即便延遲時間爲0，也必須加上時間單位，若是寫成直接寫成0，在Chrome和Safari(webkit)下是沒問題的，可是在FF(gecko)下無效}；code

第五個參數 times (animation-iteration-count)：

　　　　動畫循環執行的次數，使用infinite值爲無限循環；orm

第六個參數 iteration (animation-direction)：

　　　　若是動畫循環，循環的方式有：alternate(偶數次向前播放，奇數次向後播放)和normal(每次都向前播放)；blog

第七個參數 final (animation-fill-mode)：

　　　　動畫達到100%時的狀態，取值有：backward（回到初始狀態）、forwards（停在最終狀態）、none、both。token

以上7個參數不定要所有都有，不須要的效果能夠不寫，如我這裏只用到4個參數：

1 animation: image 24s linear infinite;

一、先在<body>裏把圖片貼進來，每一個li下面再給一個標題

 1 <ul class="name">
 2             <li>
 3                 <span><img src="img/img01.jpg" alt="" /></span>
 4                 <div><h3>哈爾的移動城堡</h3></div>
 5             </li>
 6             <li>
 7                 <span><img src="img/img02.jpg" alt="" /></span>
 8                 <div><h3>火隱忍者</h3></div>
 9             </li>
10             <li>
11                 <span><img src="img/img03.jpg" alt="" /></span>
12                 <div><h3>海賊王</h3></div>
13             </li>
14             <li>
15                 <span><img src="img/img04.jpg" alt="" /></span>
16                 <div><h3>紅豬</h3></div>
17             </li>
18             <li>
19                 <span><img src="img/img05.jpg" alt="" /></span>
20                 <div><h3>起風了</h3></div>
21             </li>
22             <li>
23                 <span><img src="img/img06.jpg" alt="" /></span>
24                 <div><h3>龍貓</h3></div>
25             </li>
26         </ul>

View Code

二、給樣式，本身給一個寬度、高度(我這裏直接滿屏顯示，^_^懶...),給圖片一個動畫名稱image；

給標題一個動畫名稱title。

 1 ody{
 2                 background: #222;
 3                 font-size: 16px;
 4                 color: #999;
 5                 font-weight: 400;
 6                 overflow: hidden;
 7             }
 8             ul{
 9                 list-style: none;
10             }
11             .name{
12                 position: fixed;
13                 width: 100%;
14                 height: 100%;
15                 top: 0;
16                 left: 0;
17             }
18             .name li span{
19                 width: 100%;
20                 height: 100%;
21                 position: absolute;
22                 top: 0;
23                 left: 0;
24                 opacity: 0;
25                 animation: image 24s linear infinite; /*infinite無限循環*/
26                 -webkit-animation: image 24s linear infinite;
27             }
28             .name li span img{
29                 width: 100%;
30                 height: auto;100%
31             }
32             .name li div{
33                 z-index: 10;
34                 position: absolute;
35                 bottom: 100px;
36                 width: 100%;
37                 text-align: center;
38                 opacity: 0;
39                 color: #fff;
40                 animation: title 24s linear infinite;
41                 -webkit-animation: title 24s linear infinite;;
42             }

View Code

【注】：

　　別忘了內外邊距置0，*{margin: 0;padding: 0;}

　　因爲每一個圖片的背景顏色塊的值不一樣，因此咱們選擇title顏色的時，很難保證不會與背景融合，顯示效果會差，咱們有不少種方法解決這個問題，很少說，我這裏給title一個隨機位置效果，top和left值根據本身圖片調整，調整時將以前設置的opacity透明度設爲1下調整效果，再置爲0，也能夠解決這個問題：

 1 /*title位置*/
 2             .name li:nth-child(2) div{
 3                 top: 100px;
 4                 left: -500px;
 5             }
 6             .name li:nth-child(3) div{
 7                 top: 320px;
 8                 left: 400px;
 9             }
10             .name li:nth-child(4) div{
11                 top: 400px;
12                 left: -100px;
13             }
14             .name li:nth-child(5) div{
15                 top: 190px;
16                 left: 200px;
17             }
18             .name li:nth-child(6) div{
19                 top: 200px;
20                 left: -100px;
21             }
22             .name li div h3{
23                 font-size: 40px;
24                 line-height: 100px;
25             }

效果顯示：

三、設置每張圖片和對應title的延時顯示時間

 1 /*延時顯示*/
 2             .name li:nth-child(1) span,
 3             .name li:nth-child(1) div{
 4                 animation-delay: 0s;
 5                 -webkit-animation-delay: 0s;
 6             }
 7             .name li:nth-child(2) span,
 8             .name li:nth-child(2) div{
 9                 animation-delay: 4s;
10                 -webkit-animation-delay: 4s;
11             }
12             .name li:nth-child(3) span,
13             .name li:nth-child(3) div{
14                 animation-delay: 8s;
15                 -webkit-animation-delay: 8s;
16             }
17             .name li:nth-child(4) span,
18             .name li:nth-child(4) div{
19                 animation-delay: 12s;
20                 -webkit-animation-delay: 12s;
21             }
22             .name li:nth-child(5) span,
23             .name li:nth-child(5) div{
24                 animation-delay: 16s;
25                 -webkit-animation-delay: 16s;
26             }
27             .name li:nth-child(6) span,
28             .name li:nth-child(6) div{
29                 animation-delay: 20s;
30                 -webkit-animation-delay: 20s;
31             }

四、給出關鍵幀動畫

 1 @keyframes image{
 2                 0%{opacity: 0;}
 3                 8%{opacity: 1;}
 4                 16%{opacity: 1;}
 5                 26%{opacity: 0;}
 6                 100%{opacity: 0;}
 7             }
 8             @-webkit-keyframes image{
 9                 0%{opacity: 0;}
10                 8%{opacity: 1;}
11                 16%{opacity: 1;}
12                 26%{opacity: 0;}
13                 100%{opacity: 0;}
14             }
15             @keyframes title{
16                 0%{opacity: 0;}
17                 8%{opacity: 1;}
18                 16%{opacity: 1;}
19                 26%{opacity: 0;}
20                 100%{opacity: 0;}
21             }
22             @-webkit-keyframes title{
23                 0%{opacity: 0;}
24                 8%{opacity: 1;}
25                 16%{opacity: 1;}
26                 26%{opacity: 0;}
27                 100%{opacity: 0;}
28             }