當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

纯CSS实现图片百叶窗展示效果

發布時間：2024/1/8 CSS 49 豆豆

生活随笔收集整理的這篇文章主要介紹了纯CSS实现图片百叶窗展示效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

純CSS圖片百葉窗

首先給大家看一下完成效果
主要思路：其實這個百葉窗還是利用了一種障眼法，我們看上去是鼠標移動上去之后，圖片展開了，其實這些圖片在原地根本沒有動，只不過是我們把這些圖片放在了一個列表里，相互疊加，鼠標移動的同時改變列表的寬度。

第一步：構建一個百葉窗框架

html代碼：

css代碼：

*{margin: 0;padding: 0;}.container{margin: 100px auto;border: 2px solid #568bc7;width: 800px;height: 300px;}.container ul{display: flex;}.container li{width: 160px;height: 300px;list-style: none;border-left: 1px solid #194b8d;}.container li img{display: block;width: 800px;height: 300px;}

需要注意一下：這里的li可能需要手動計算等分的寬度，雖然可以用彈性盒子實現自動等分，但是我后面加了hover之后發現會有BUG，大家可以試試，這里就不使用彈性盒子了
現在得到如下框架：

第二步：插入圖片，使用hover做出特效

我這里插入了五張油畫

這里我們可以發現圖片超過了我們容器的范圍

此時我們在外容器中添加，做一個溢出隱藏
overflow: hidden;

這樣一個百葉窗就出具規模了
如何讓圖片和演示GIF一樣動起來呢？
這里涉及到一段核心代碼

.container ul:hover li{width: 40px;}.container ul li:hover{width: 600px;}

這個Demo 其實是對：hover屬性靈活運用的一個練習，
首先要注意，兩行代碼的順序不可以更換
首先鼠標移入 ul 的大容器內時，我們首先要讓 li 的寬度變小，緊接著觸發下一行的hover ，移入到每一個 li 的時候，讓 li 的寬度變大

第三步：細節處理

完成以上之后，我們看到整個過程非常的生硬
這里可以加入過渡屬性，讓變化變得更加平滑，同時給每一個 li 的左邊框加上一點陰影效果，讓他看起來更加的立體

box-shadow: 0 0 25px #000;transition: all 0.5s;

最后就完成啦

這里是完整代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.container{margin: 100px auto;border: 2px solid #568bc7;width: 800px;height: 300px;overflow: hidden;}.container ul{display: flex;}.container li{width: 160px;height: 300px;list-style: none;border-left: 1px solid #194b8d;box-shadow: 0 0 25px #000;transition: all 0.5s;}.container li img{display: block;width: 800px;height: 300px;}.container ul:hover li{width: 40px;}.container ul li:hover{width: 600px;}</style> </head> <body><div class="container"><ul><li><img src="./img/tq1.jpg" alt=""></li><li><img src="./img/tq2.jpg" alt=""></li><li><img src="./img/tq3.jpg" alt=""></li><li><img src="./img/tq4.jpg" alt=""></li><li><img src="./img/tq5.jpg" alt=""></li></ul></div> </body> </html>

總結

以上是生活随笔為你收集整理的纯CSS实现图片百叶窗展示效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Cent OS 7.4 1708 下载安
下一篇：精简高效的CSS命名准则/方法