欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

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

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

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

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

主要思路：其實(shí)這個(gè)百葉窗還是利用了一種障眼法，我們看上去是鼠標(biāo)移動(dòng)上去之后，圖片展開(kāi)了，其實(shí)這些圖片在原地根本沒(méi)有動(dòng)，只不過(guò)是我們把這些圖片放在了一個(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)在得到如下框架：

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

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

我這里插入了五張油畫(huà)

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

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

此時(shí)我們?cè)谕馊萜髦刑砑樱鲆粋€(gè)溢出隱藏
overflow: hidden;

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

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

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

這個(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è)過(guò)程非常的生硬
這里可以加入過(guò)渡屬性，讓變化變得更加平滑 ，同時(shí)給每一個(gè) li 的左邊框加上一點(diǎn)陰影效果，讓他看起來(lái)更加的立體

  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)容，如果改文章對(duì)你有所幫助并覺(jué)得寫(xiě)得不錯(cuò)，勞請(qǐng)分享給你的好友一起學(xué)習(xí)新知識(shí)，若想了解更多相關(guān)知識(shí)內(nèi)容，請(qǐng)多多關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

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

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

廣告

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

成都定制網(wǎng)站建設(shè)