怎么實現(xiàn)制作動態(tài)視覺差背景？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

創(chuàng)新互聯(lián)是專業(yè)的孟津網(wǎng)站建設(shè)公司，孟津接單;提供網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行孟津網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

制作網(wǎng)站時，可能會用到視覺差效果

如圖

視覺差在制作網(wǎng)頁時會有很炫酷的效果，今天要講的是如何呈現(xiàn)動態(tài)視覺差

效果如圖：

制作方法首先需要一個視覺差的插件

我所用的插件是一款較為大眾的視覺差插件

    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <link rel="stylesheet" type="text/css" href="css/style.css" />

導(dǎo)入這三個css文件后，在style中可以修改圖片

將圖片修改為指定gif即可

下面介紹不使用插件方法

        <div id="bei1">
            <img src="img/pubu1.gif"/>
        </div>
        <div id="bei2">
            <img src="img/pubu2.gif"/>
        </div>

選取了一個gif

通過PS將一張大的gif圖進(jìn)行簡單的裁剪，按照比例裁出兩個側(cè)邊

#bei1{
    position: fixed;  　　//首先進(jìn)行定位，相對瀏覽器定位，定在一左一右
    left: 0px;　　　　//通過調(diào)整左右距離定在屏幕左右
    z-index: -1;　　　　//調(diào)整z-index使其置入最底層
    width: 13%;　　　　//合理調(diào)整寬度，使圖片高度超過目前市面上絕大多數(shù)的屏幕高度
    img{
        width: 100%;　　　　//改變圖片寬度為100%
        min-height: 1080px;　　　　//這里是為了防止高度不足，設(shè)定的最小高度
    }
}
#bei2{
    position: fixed;
    right: 0px;
    z-index: -1;
    width: 13%;
    img{
        width: 100%;
        min-height: 1080px;
    }
}

將主要內(nèi)容顯示在屏幕中心，蓋住邊緣部分

#zuopinx{
    width: 80%;　　　　//主要內(nèi)容寬度
    background-color: #EEEEEE;
    position: relative;
    margin: 0 auto;　　　　//居中
    margin-top: 80px;
    z-index: 15;
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    flex-wrap:wrap;
    justify-content: space-around;
}

效果就直接可以表示出來了

看完上述內(nèi)容，你們掌握怎么實現(xiàn)制作動態(tài)視覺差背景的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章標(biāo)題：怎么實現(xiàn)制作動態(tài)視覺差背景
標(biāo)題來源：http://www.2m8n56k.cn/article40/jgecho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、建站公司、網(wǎng)站排名、面包屑導(dǎo)航、服務(wù)器托管

廣告

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