使用css實(shí)現(xiàn)圖片抽屜式效果應(yīng)該怎樣做-創(chuàng)新互聯(lián)

使用css實(shí)現(xiàn)圖片抽屜式效果應(yīng)該怎樣做？相信有很多人都不太了解，今天小編為了讓大家更加了解css實(shí)現(xiàn)圖片抽屜式效果的方法，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。

成都網(wǎng)站制作、網(wǎng)站建設(shè)的開發(fā)，更需要了解用戶，從用戶角度來建設(shè)網(wǎng)站，獲得較好的用戶體驗(yàn)。創(chuàng)新互聯(lián)建站多年互聯(lián)網(wǎng)經(jīng)驗(yàn)，見的多，溝通容易、能幫助客戶提出的運(yùn)營建議。作為成都一家網(wǎng)絡(luò)公司，打造的就是網(wǎng)站建設(shè)產(chǎn)品直銷的概念。選擇創(chuàng)新互聯(lián)建站，不只是建站，我們把建站作為產(chǎn)品，不斷的更新、完善，讓每位來訪用戶感受到浩方產(chǎn)品的價值服務(wù)。

首先，我們來看一下效果：

這個效果實(shí)現(xiàn)原理很簡單：只要你掌握css3動畫和過渡相關(guān)知識就行，不用js代碼；

HTML代碼：

<div>
        <ul id="list">
            <li >
                <a href="">國際美妝搶先看</a>
                <img src="images/1.jpg" />
            </li>
            <li>
                <a href="">女神標(biāo)準(zhǔn)大討論</a>
                <img src="images/2.jpg" />
            </li>
            <li class="select">
                <a href="">吃貨也能越吃越瘦</a>
                <img src="images/3.jpg" />
            </li>
            <li>
                <a href="">連衣裙搶頭條</a>
                <img src="images/4.jpg" />
            </li>
            <li>
                <a href="">宮三女主美妝對決</a>
                <img src="images/5.jpg" />
            </li>
        </ul>
    </div>

CSS代碼：

*{ margin:0;padding:0; }
    ul{ list-style:none; }
    a{ font-size:16px;text-decoration:none;color:#666; }
    div{ width:300px;margin:20px auto; }
    #list li{ line-height:40px;height:40px;background:#efefef;text-indent:1em; margin-bottom:3px;overflow:hidden;-webkit-transition:height 0.3s ease;-moz-transition:height 0.3s ease-ms-transition:height 0.3s ease;-o-transition:height 0.3s ease;transition:height 0.3s ease;}
    #list li img{ width:300px;height:200px;}
    #list li:nth-child(1){height:240px;background:#F36;}
    #list li:nth-child(1) a{ color:#fff; }
    #list:hover li{ height:40px;background:#efefef; }
    #list:hover li a{color:#666;}
    #list li:hover{ height:240px; background:#F36;}
    #list li:hover a{ color:#fff; }

以上就是使用css實(shí)現(xiàn)圖片抽屜式效果應(yīng)該怎樣做的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎來創(chuàng)新互聯(lián)行業(yè)資訊！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前名稱：使用css實(shí)現(xiàn)圖片抽屜式效果應(yīng)該怎樣做-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://muchs.cn/article0/djeioo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、電子商務(wù)、搜索引擎優(yōu)化、域名注冊、網(wǎng)站排名、移動網(wǎng)站建設(shè)

廣告

聲明：本網(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)