利用 css3 給自家喵主子製作一個輪播圖

溫馨提示：文章底部，有福利鏈接哦！

各位小夥伴

今天我們就用上次分享的

css 的內容製作簡易輪播圖了

沒看過的小夥伴可以去看一下

那麼開始我們今天的分享

css3 製作簡易的輪播圖

要製作輪播圖，首先準備好想要輪播的圖片素材，夥伴們可以放上女神的照片哦~我沒有女神，只好找點喵主子的圖片了~

首先創建一個 img 的文件夾把圖片放到一起。

然後就是寫代碼了！不知道大家知不知道這些標籤的作用，不清楚的夥伴可以看一下我之前寫的文章哦~

定義輪播圖的樣式：

這個就是我們的頁面效果:

你以為這麼簡單就結束了嗎？我們上面只是把所有的圖片定位到了一起，並且讓所有圖片變透明，只顯示第一張圖片。

我們實現輪播效果的原理，就是 5 張圖片都是透明的，選擇那一張，就讓哪一張變得不透明，顯示出來。還實現不了自動更換的功能哦~不然也不會叫簡易輪播圖了

下面是定義按鈕，以及錨點。

設置按鈕的樣式，最重要的輪播效果實現，就是最下面的那一行代碼，這個輪播我們當初 js 也是很麻煩才弄好的。現在就只用一行代碼就實現了，你就說6不6

看一下完整的輪播效果吧！

GIF

這要是換成女神的照片，那是多麼賞心悅目的景色呀！

完整代碼：

Title

*{margin:;padding:;}

body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:;}

a{text-decoration:none;color: inherit;}

img{display: block;border:none;}

ol,ul{list-style:none;}

.clearfix:after{content:"";display: block;clear: both;}

.banner{position: relative;width:800px;height:450px;margin:100pxauto;box-shadow:10px#000; }

.banner.picimg{width:800px;height:450px;}

.banner.pica{position: absolute;left:;top:;opacity:;transition:1s;}

.banner.pica:nth-child(1){opacity:1; }

.banner.dot{position: absolute;bottom:10px;left:calc(50% - 100px);width:200px;height:30px; }

.banner.dota{float: left;width:30px;height:30px;border-radius:50%;box-shadow:10px#000;margin-left:12px; }

.banner.dota:nth-child(1){margin-left:;}

.banner.dota:hover{background: deeppink;}

.banner.pica:target{opacity:1; }

知道大家時間緊迫，源代碼奉上，只要把圖片換了就可以用了，使用的時候注意圖片路徑問題。

那麼今天就到這裡了

小夥伴們自己動手試一下吧！

我去給喵主子餵食去了

拜拜~

有任何問題都可以在文章留言，娜姐都看著的呢！

合作,投稿,轉載，版權問題請聯繫 李娜：Lina_Java

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！