純CSS如何實(shí)現(xiàn)圖片百葉窗展示效果-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了純CSS如何實(shí)現(xiàn)圖片百葉窗展示效果，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學(xué)習(xí)一下“純CSS如何實(shí)現(xiàn)圖片百葉窗展示效果”這篇文章吧。

創(chuàng)新互聯(lián)建站專注于上虞網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。熱誠為您提供上虞營銷型網(wǎng)站建設(shè)，上虞網(wǎng)站制作、上虞網(wǎng)頁設(shè)計、上虞網(wǎng)站官網(wǎng)定制、小程序制作服務(wù)，打造上虞網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供上虞網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

首先給大家看一下完成效果

純CSS如何實(shí)現(xiàn)圖片百葉窗展示效果

主要思路：其實(shí)這個百葉窗還是利用了一種障眼法，我們看上去是鼠標(biāo)移動上去之后，圖片展開了，其實(shí)這些圖片在原地根本沒有動，只不過是我們把這些圖片放在了一個列表里，相互疊加，鼠標(biāo)移動的同時改變列表的寬度。

第一步：構(gòu)建一個百葉窗框架

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可能需要手動計算等分的寬度，雖然可以用彈性盒子實(shí)現(xiàn)自動等分，但是我后面加了hover之后發(fā)現(xiàn)會有BUG，大家可以試試，這里就不使用彈性盒子了
現(xiàn)在得到如下框架：

純CSS如何實(shí)現(xiàn)圖片百葉窗展示效果

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

我這里插入了五張油畫

這里我們可以發(fā)現(xiàn)圖片超過了我們?nèi)萜鞯姆秶?/p>

純CSS如何實(shí)現(xiàn)圖片百葉窗展示效果

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

純CSS如何實(shí)現(xiàn)圖片百葉窗展示效果

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

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

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

第三步：細(xì)節(jié)處理

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

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

最后就完成啦

純CSS如何實(shí)現(xiàn)圖片百葉窗展示效果

這里是完整代碼：

<!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>

以上就是關(guān)于“純CSS如何實(shí)現(xiàn)圖片百葉窗展示效果”的內(nèi)容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學(xué)習(xí)新知識，若想了解更多相關(guān)知識內(nèi)容，請多多關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁名稱：純CSS如何實(shí)現(xiàn)圖片百葉窗展示效果-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://www.rwnh.cn/article32/dsohsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、關(guān)鍵詞優(yōu)化、標(biāo)簽優(yōu)化、App設(shè)計、虛擬主機(jī)、定制開發(fā)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

純CSS如何實(shí)現(xiàn)圖片百葉窗展示效果-創(chuàng)新互聯(lián)