web前端——美化效果總結

awkj 發布于2019-08-01 17:28 / 1810人閱讀

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

概述

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

1 圖片作為背景

要實現的效果是，任意一張圖片"img-page-background.png"，不需要調整圖片尺寸，圖片完全填充網頁背景。首先需在CSS代碼中創建.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%;完全占據背景

然后在HTML代碼中將背景與其他想要顯示的內容分兩個

來放置：

最終效果上圖，

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

2 背景圖片虛化

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

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

創建一個專用于虛化的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代碼中，同理，要把背景和實際內容分兩個

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

這里背景

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

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

3 透明效果

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

.glass {
    opacity:0.6; 
}

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

，HTML偽代碼：

給顯示的內容

增加glass類，實際效果如圖

動態過渡

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

前景淡入

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

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

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

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

背景逐漸虛化

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

setInterval("javascript function",milliseconds);

milliseconds是循環的周期，單位為毫秒，前面是一個函數，上HTML偽代碼：

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

圖片合并

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

CSS Sprite Generator

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

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

點擊其中一個圖標，在右側的設置區域可看到其坐標

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

stylesheet樣式文件內容如下

.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中就可以使用

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

未完待續

云服務器 GPU云服務器前端效果前端web前端前端web前端課程 web前端前端開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51163.html

上一篇：使用canvas實現圖片下載功能

下一篇：單頁面官網-平滑過渡到指的錨點

相關文章

web前端——美化效果總結

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

Scorpion 2019-08-20 18:56 評論0 收藏0

web前端——美化效果總結

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

DobbyKim 2019-08-29 13:13 評論0 收藏0

總結：如何修改美化radio、checkbox的默認樣式

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

asce1885 2019-08-02 12:09 評論0 收藏0

總結：如何修改美化radio、checkbox的默認樣式

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

Anshiii 2019-08-29 17:26 評論0 收藏0

發表評論

登陸后可評論

0條評論

awkj

男|高級講師

我要關注我要私信

TA的文章
閱讀更多

tensorflow

閱讀 2814·2023-04-26 02:00

用純css來實現一個優惠券

閱讀 2771·2019-08-30 15:54

vue中給window移除事件監聽失敗的問題

閱讀 860·2019-08-30 11:15

常見的pc端的兼容問題總結

閱讀 1502·2019-08-29 15:31

JS 實現文字滾動顯示

閱讀 917·2019-08-29 14:12

Flex布局使用過程

閱讀 489·2019-08-29 13:08

XML 解析 Xml Pull Parser 和 SAX

閱讀 838·2019-08-27 10:51

深入理解ES6筆記（四）擴展的對象功能

閱讀 2706·2019-08-26 12:17

最新活動

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

web前端——美化效果總結

相關文章

web前端——美化效果總結

web前端——美化效果總結

總結：如何修改美化radio、checkbox的默認樣式

總結：如何修改美化radio、checkbox的默認樣式

發表評論

0條評論

awkj

男|高級講師

TA的文章

tensorflow

用純css來實現一個優惠券

vue中給window移除事件監聽失敗的問題

常見的pc端的兼容問題總結

JS 實現文字滾動顯示

Flex布局使用過程

XML 解析 Xml Pull Parser 和 SAX

深入理解ES6筆記（四）擴展的對象功能

最新活動