成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

web前端——美化效果總結(jié)

Scorpion / 1646人閱讀

摘要：概述項(xiàng)目開(kāi)發(fā)過(guò)程中使用到了不少前端美化效果的方法，總結(jié)一下圖片作為背景要實(shí)現(xiàn)的效果是，任意一張圖片，不需要調(diào)整圖片尺寸，圖片完全填充網(wǎng)頁(yè)背景。

概述

項(xiàng)目開(kāi)發(fā)過(guò)程中使用到了不少web前端美化效果的方法，總結(jié)一下

1 圖片作為背景

要實(shí)現(xiàn)的效果是，任意一張圖片"img-page-background.png"，不需要調(diào)整圖片尺寸，圖片完全填充網(wǎng)頁(yè)背景。首先需在CSS代碼中創(chuàng)建.page-bg類：

.page-bg {
  width: 100%;
  height: 100%;
  background: url("img-page-background.png") no-repeat;
  background-size: 100% 100%;  
}

url指定圖片路徑，no-repeat指定圖片不平鋪，background-size: 100% 100%;完全占據(jù)背景

然后在HTML代碼中將背景與其他想要顯示的內(nèi)容分兩個(gè)

來(lái)放置：




    ......


    ......
        
        
   
             
            

            
            

                ......
            

        


    ......

最終效果上圖，

瀏覽器F12進(jìn)入調(diào)試模式，將屏幕分辨率任意修改，背景圖都會(huì)100%填充，但是會(huì)改變圖像的縱橫比

2 背景圖片虛化

剛開(kāi)始學(xué)攝影的時(shí)候也很喜歡玩大光圈虛化，感覺(jué)拍出來(lái)的靜物很漂亮，有一種朦朧夢(mèng)幻感，而且虛實(shí)對(duì)比，突出主題，web設(shè)計(jì)中也是一樣的

要實(shí)現(xiàn)的效果是將背景的圖片虛化掉，背景之上的內(nèi)容清晰顯示，仍以"img-page-background.png"作為背景圖片，CSS樣式同“1 圖片作為背景”

創(chuàng)建一個(gè)專用于虛化的CSS類：

.gauss {
    -webkit-filter: blur(10px); 
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);    
    filter: blur(10px);
}

因?yàn)镻S中喜歡使用高斯模糊做后期，故取名gauss；-webkit-、-moz-等前綴用于對(duì)各種瀏覽器支持；屬性的取值為blur(npx)，其中的n取值越大，模糊程度越大

在HTML代碼中，同理，要把背景和實(shí)際內(nèi)容分兩個(gè)

來(lái)處理，如果虛化效果加在了父容器上，那么父容器以下所有內(nèi)容都會(huì)被虛化，我入過(guò)這個(gè)坑，HTML偽代碼如下




    ......


    ......
        
        
   
             
            

            
            

                ......
            

        

    ......

這里背景

上引用page-bg和gauss兩個(gè)類，虛化參數(shù)選的10px，實(shí)際效果如圖

上圖中只有背景被虛化，背景之上的文字依然清晰

3 透明效果

在背景之上做一個(gè)透明的區(qū)域，會(huì)有一種懸浮感，更顯得神秘莫測(cè)，透明效果使用CSS的opacity屬性，其值的范圍是0.0~1.0，數(shù)值越小，透明度越高，創(chuàng)建一個(gè)CSS類：

.glass {
    opacity:0.6; 
}

在HTML代碼中，依然選取背景圖片img-page-background.png，在其上方制作一個(gè)半透明顏色為#555的矩形

，HTML偽代碼：




    ......


    ......
        
        
   
             
            

            
            

                ......
            

        

    ......

給顯示的內(nèi)容

增加glass類，實(shí)際效果如圖

動(dòng)態(tài)過(guò)渡

要實(shí)現(xiàn)的效果是在背景虛化和前景透明的基礎(chǔ)上，前景淡入，背景逐漸虛化，要做兩件事：前景淡入和背景逐漸虛化
仍然使用上文中的資源

前景淡入

淡入效果jQuery就可以支持，使用淡入淡出效果中的fadeIn()方法，語(yǔ)法為：

$(selector).fadeIn(speed,callback);

speed是從隱藏到顯示完全所用的時(shí)間長(zhǎng)度，單位毫秒，也可取slow和fast，callback是效果執(zhí)行完后的回調(diào)函數(shù)，可不使用，上HTML偽代碼：




    ......
    
    
    


    ......
        
        
   
             
            

            
            

                ......
            

        

    ......

這里在執(zhí)行js腳本之前要確保加載了jQuery庫(kù)文件，腳本中首先要講淡入元素隱藏，淡入時(shí)間設(shè)置為3秒

背景逐漸虛化

因?yàn)樘摶褂玫氖荂SS屬性filter設(shè)置blur(npx)參數(shù)，要實(shí)現(xiàn)逐漸虛化的效果，需要讓blur(npx)參數(shù)動(dòng)態(tài)增加，網(wǎng)上有第三方j(luò)s庫(kù)可以實(shí)現(xiàn)動(dòng)畫(huà)效果，我沒(méi)有使用第三方庫(kù)，怎么辦？用定時(shí)器做
javascript自帶兩種定時(shí)器方法setInterval()和setTimeout()，前者是周期性循環(huán)定時(shí)并觸發(fā)回調(diào)函數(shù)，后者是定一個(gè)時(shí)間，到時(shí)間觸發(fā)回調(diào)函數(shù)；要實(shí)現(xiàn)逐漸的效果，就要不斷改變blur(npx)的n的值，很明顯需要多次調(diào)用函數(shù)，所以使用setInterval()，格式為

setInterval("javascript function",milliseconds);

milliseconds是循環(huán)的周期，單位為毫秒，前面是一個(gè)函數(shù)，上HTML偽代碼：




    ......
    
    
    


    ......
        
        
   
             
            

            
            

                ......
            

        

    ......

在CSS中首先將blur類的filter屬性值設(shè)置為blur(0px)，也就是初始不虛化，然后創(chuàng)建定時(shí)器myTimer，指定每250毫秒執(zhí)行一次立即函數(shù)，函數(shù)中調(diào)用jQuery的css()方法為blur類設(shè)置其filter屬性的值，該值為一個(gè)字符串變量blur_css，會(huì)隨著counter的遞增而改變，從"blur(0px)"遞增到"blur(20px)"，從而實(shí)現(xiàn)了逐漸虛化的效果，最終效果如圖

圖片合并

Web前端需要做的漂亮，必定引入很多圖片和圖標(biāo)來(lái)美化界面，但是嵌入式設(shè)備Flash有限，總共就那么幾M空間，可用于Web資源存放區(qū)域很受限制，這里記錄一種用于Web前端的圖片壓縮與合并方法，將多個(gè)制作好的圖片和圖標(biāo)合并到一張圖片中，既減小了占用Flash大小，又使得瀏覽器一次加載便可加載到所有圖片

CSS Sprite Generator

要使用一個(gè)在線圖片壓縮合并工具，CSS Sprite Generator，鏈接地址：http://spritegen.website-performance.org/
進(jìn)入后在網(wǎng)頁(yè)左上方一片區(qū)域，有open、Setting、Clear、Downloads和About，點(diǎn)擊open打開(kāi)所需合并的圖片，該工具會(huì)自動(dòng)優(yōu)化對(duì)齊

做一個(gè)例子，如下圖加載進(jìn)來(lái)一些圖片后，會(huì)自動(dòng)對(duì)齊

點(diǎn)擊其中一個(gè)圖標(biāo)，在右側(cè)的設(shè)置區(qū)域可看到其坐標(biāo)

這坐標(biāo)怎么用？回到左邊的區(qū)域，點(diǎn)擊Downloads，右邊區(qū)域會(huì)更改為下載選擇，點(diǎn)擊spritesheet會(huì)下載合并后的圖片，點(diǎn)擊stylesheet會(huì)下載所有圖標(biāo)的樣式，如下圖是合并后的圖片

stylesheet樣式文件內(nèi)容如下

.sprite {
    background-image: url(spritesheet.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-icon-delete-normal {
    width: 50px;
    height: 50px;
    background-position: -5px -5px;
}

.sprite-icon-modify-normal {
    width: 50px;
    height: 50px;
    background-position: -5px -65px;
}

每個(gè)圖標(biāo)有width、height和background-position三個(gè)屬性，這其實(shí)就是對(duì)應(yīng)css樣式，可按如下格式建立一個(gè)刪除圖標(biāo)的樣式

.icon-delete-normal {
    width:50px;
    height:50px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-image: url("../img/spritesheet.png");
    background-position: -5px -5px;
}

其中url中為從這個(gè)工具下載的spritesheet合并圖片，HTML中就可以使用

......>來(lái)完全顯示該圖標(biāo)了

未完待續(xù)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/84904.html

相關(guān)文章

  • web前端——美化效果總結(jié)

    摘要：概述項(xiàng)目開(kāi)發(fā)過(guò)程中使用到了不少前端美化效果的方法，總結(jié)一下圖片作為背景要實(shí)現(xiàn)的效果是，任意一張圖片，不需要調(diào)整圖片尺寸，圖片完全填充網(wǎng)頁(yè)背景。 概述 項(xiàng)目開(kāi)發(fā)過(guò)程中使用到了不少web前端美化效果的方法，總結(jié)一下 1 圖片作為背景 要實(shí)現(xiàn)的效果是，任意一張圖片img-page-background.png，不需要調(diào)整圖片尺寸，圖片完全填充網(wǎng)頁(yè)背景。首先需在CSS代碼中創(chuàng)建.page-bg...

    awkj 評(píng)論0 收藏0

  • web前端——美化效果總結(jié)

    摘要：概述項(xiàng)目開(kāi)發(fā)過(guò)程中使用到了不少前端美化效果的方法，總結(jié)一下圖片作為背景要實(shí)現(xiàn)的效果是，任意一張圖片，不需要調(diào)整圖片尺寸，圖片完全填充網(wǎng)頁(yè)背景。 概述 項(xiàng)目開(kāi)發(fā)過(guò)程中使用到了不少web前端美化效果的方法，總結(jié)一下 1 圖片作為背景 要實(shí)現(xiàn)的效果是，任意一張圖片img-page-background.png，不需要調(diào)整圖片尺寸，圖片完全填充網(wǎng)頁(yè)背景。首先需在CSS代碼中創(chuàng)建.page-bg...

    DobbyKim 評(píng)論0 收藏0

  • 總結(jié)：如何修改美化radio、checkbox的默認(rèn)樣式

    摘要：現(xiàn)在前端頁(yè)面效果日益豐富，默認(rèn)的組件樣式顯然不能滿足設(shè)計(jì)需求。前段時(shí)間開(kāi)發(fā)項(xiàng)目中剛好接觸到相關(guān)的需求，在此特地整理下修改樣式的方法。它使用純編寫(xiě)，沒(méi)有任何的文件。 現(xiàn)在前端頁(yè)面效果日益豐富，默認(rèn)的input組件樣式顯然不能滿足設(shè)計(jì)需求。前段時(shí)間開(kāi)發(fā)項(xiàng)目中剛好接觸到相關(guān)的需求，在此特地整理下修改radio、CheckBox樣式的方法。 原理：大致原理都是使用原生的checkbox或inp...

    asce1885 評(píng)論0 收藏0

  • 總結(jié)：如何修改美化radio、checkbox的默認(rèn)樣式

    摘要：現(xiàn)在前端頁(yè)面效果日益豐富，默認(rèn)的組件樣式顯然不能滿足設(shè)計(jì)需求。前段時(shí)間開(kāi)發(fā)項(xiàng)目中剛好接觸到相關(guān)的需求，在此特地整理下修改樣式的方法。它使用純編寫(xiě)，沒(méi)有任何的文件。 現(xiàn)在前端頁(yè)面效果日益豐富，默認(rèn)的input組件樣式顯然不能滿足設(shè)計(jì)需求。前段時(shí)間開(kāi)發(fā)項(xiàng)目中剛好接觸到相關(guān)的需求，在此特地整理下修改radio、CheckBox樣式的方法。 原理：大致原理都是使用原生的checkbox或inp...

    Anshiii 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<