小編給大家分享一下CSS怎么實(shí)現(xiàn)滑動(dòng)門，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

循化網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),循化網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為循化成百上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的循化做網(wǎng)站的公司定做！

所謂的滑動(dòng)門技術(shù)，就是指盒子背景能夠自動(dòng)拉伸以適應(yīng)不同長(zhǎng)度的文本。即當(dāng)文字增多時(shí)，背景看起來(lái)也會(huì)變長(zhǎng)。

大多數(shù)應(yīng)用于導(dǎo)航欄之中，如微信導(dǎo)航欄:

具體實(shí)現(xiàn)方法如下：

1、首先每一塊文本內(nèi)容是由a標(biāo)簽與span標(biāo)簽組成

2、a標(biāo)簽只指定高度，而不指定寬度。

3、a標(biāo)簽 設(shè)置好背景圖后，指定一個(gè)padding-left值，大小與左側(cè)半圓大小相同，（這樣保證左邊背景不變，中間的背景進(jìn)行拉伸即可）。

4、span標(biāo)簽同樣指定該背景圖片，不指定寬度，并且指定padding-right值將圖片右半部分顯示出來(lái)（這是要是定圖片位置為右）

具體代碼如下：

a {
            color: white;
            line-height: 33px;
            margin: 100px;
            display: inline-block;
            text-decoration: none;
            /* a不能給寬度 */
            /*  */
            height: 33px;
            background: url(Images/vx.png) no-repeat;
            padding-left: 15px;
        }
        
        a span {
            display: inline-block;
            height: 33px;
            background: url(Images/vx.png) no-repeat right;
            padding-right: 15px;
        }

span 的背景要指定為right

 
        一
    
    
        一句
    
    
        一句話
    
    
        一句長(zhǎng)長(zhǎng)的話
    
    
        一句超級(jí)超級(jí)超級(jí)超級(jí)超級(jí)超級(jí)長(zhǎng)的話
    

顯示結(jié)果為

可以發(fā)現(xiàn)隨著span標(biāo)簽中文本長(zhǎng)度的變化將會(huì)帶動(dòng)背景圖片的拉伸。

以上是“CSS怎么實(shí)現(xiàn)滑動(dòng)門”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！