国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

DobbyKim / 3431人閱讀

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

概述

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

1 圖片作為背景

要實現(xiàn)的效果是，任意一張圖片"img-page-background.png"，不需要調(diào)整圖片尺寸，圖片完全填充網(wǎng)頁背景。首先需在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)容分兩個

來放置：




    ......


    ......
        
        
   
             
            

            
            

                ......
            

        


    ......

最終效果上圖，

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

2 背景圖片虛化

剛開始學攝影的時候也很喜歡玩大光圈虛化，感覺拍出來的靜物很漂亮，有一種朦朧夢幻感，而且虛實對比，突出主題，web設(shè)計中也是一樣的

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

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

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

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

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

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




    ......


    ......
        
        
   
             
            

            
            

                ......
            

        

    ......

這里背景

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

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

3 透明效果

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

.glass {
    opacity:0.6; 
}

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

，HTML偽代碼：




    ......


    ......
        
        
   
             
            

            
            

                ......
            

        

    ......

給顯示的內(nèi)容

增加glass類，實際效果如圖

動態(tài)過渡

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

前景淡入

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

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

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




    ......
    
    
    


    ......
        
        
   
             
            

            
            

                ......
            

        

    ......

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

背景逐漸虛化

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

setInterval("javascript function",milliseconds);

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




    ......
    
    
    


    ......
        
        
   
             
            

            
            

                ......
            

        

    ......

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

圖片合并

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

CSS Sprite Generator

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

做一個例子，如下圖加載進來一些圖片后，會自動對齊

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

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

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;
}

每個圖標有width、height和background-position三個屬性，這其實就是對應css樣式，可按如下格式建立一個刪除圖標的樣式

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

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

......>來完全顯示該圖標了

未完待續(xù)

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112449.html

相關(guān)文章

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

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

    awkj 評論0 收藏0

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

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

    Scorpion 評論0 收藏0

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

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

    asce1885 評論0 收藏0

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

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

    Anshiii 評論0 收藏0

發(fā)表評論

0條評論

DobbyKim

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<