纯CSS实现图片百叶窗展示效果
純CSS圖片百葉窗
首先給大家看一下完成效果
主要思路：其實(shí)這個(gè)百葉窗還是利用了一種障眼法，我們看上去是鼠標(biāo)移動(dòng)上去之后，圖片展開了，其實(shí)這些圖片在原地根本沒有動(dòng)，只不過是我們把這些圖片放在了一個(gè)列表里，相互疊加，鼠標(biāo)移動(dòng)的同時(shí)改變列表的寬度。
第一步：構(gòu)建一個(gè)百葉窗框架
html代碼：
<div class="container"><ul><li></li><li></li><li></li><li></li><li></li></ul></div>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可能需要手動(dòng)計(jì)算等分的寬度，雖然可以用彈性盒子實(shí)現(xiàn)自動(dòng)等分，但是我后面加了hover之后發(fā)現(xiàn)會(huì)有BUG，大家可以試試，這里就不使用彈性盒子了
現(xiàn)在得到如下框架：
第二步：插入圖片，使用hover做出特效
我這里插入了五張油畫
這里我們可以發(fā)現(xiàn)圖片超過了我們?nèi)萜鞯姆秶?br />
此時(shí)我們?cè)谕馊萜髦刑砑?#xff0c;做一個(gè)溢出隱藏
overflow: hidden;
這樣一個(gè)百葉窗就出具規(guī)模了
如何讓圖片和演示GIF一樣動(dòng)起來呢？
這里涉及到一段核心代碼
這個(gè)Demo 其實(shí)是對(duì)：hover屬性靈活運(yùn)用的一個(gè)練習(xí)，
首先要注意，兩行代碼的順序不可以更換
首先鼠標(biāo)移入 ul 的大容器內(nèi)時(shí)，我們首先要讓 li 的寬度變小，緊接著觸發(fā)下一行的hover ，移入到每一個(gè) li 的時(shí)候，讓 li 的寬度變大
第三步：細(xì)節(jié)處理
完成以上之后，我們看到整個(gè)過程非常的生硬
這里可以加入過渡屬性，讓變化變得更加平滑 ，同時(shí)給每一個(gè) li 的左邊框加上一點(diǎn)陰影效果，讓他看起來更加的立體
最后就完成啦
這里是完整代碼：
總結(jié)
以上是生活随笔為你收集整理的纯CSS实现图片百叶窗展示效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Cent OS 7.4 1708 下载安
- 下一篇： 精简高效的CSS命名准则/方法