web前端——美化效果總結

時間 2019-12-04

標籤 web 前端美化效果總結欄目 HTML 简体版

原文原文鏈接

概述

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

1 圖片做爲背景

要實現的效果是，任意一張圖片"img-page-background.png"，不須要調整圖片尺寸，圖片徹底填充網頁背景。首先需在CSS代碼中建立.page-bg類：css

.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

而後在HTML代碼中將背景與其餘想要顯示的內容分兩個<div>來放置：前端

<!DOCTYPE html>
<html>
<head>
    ......
</head>
<body>
    ......
        <!--父容器-->
        <div class="father-div">   
            <!--放背景圖片的容器--> 
            <div class="page-bg"></div>
            <!--要顯示在背景圖片之上的內容-->
            <div class="page-context">
                ......
            </div>
        </div>

    ......
</body>
</html>

最終效果上圖，
java

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

2 背景圖片虛化

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

要實現的效果是將背景的圖片虛化掉，背景之上的內容清晰顯示，仍以"img-page-background.png"做爲背景圖片，CSS樣式同「1 圖片做爲背景」瀏覽器

建立一個專用於虛化的CSS類：ide

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

由於PS中喜歡使用高斯模糊作後期，故取名gauss；-webkit-、-moz-等前綴用於對各類瀏覽器支持；屬性的取值爲blur(npx)，其中的n取值越大，模糊程度越大函數

在HTML代碼中，同理，要把背景和實際內容分兩個<div>來處理，若是虛化效果加在了父容器上，那麼父容器如下全部內容都會被虛化，我入過這個坑，HTML僞代碼以下

<!DOCTYPE html>
<html>
<head>
    ......
</head>
<body>
    ......
        <!--父容器-->
        <div class="father-div">   
            <!--放背景圖片帶有虛化效果的容器--> 
            <div class="page-bg gauss"></div>
            <!--要顯示在背景圖片之上的內容-->
            <div class="page-context">
                ......
            </div>
        </div>
    ......
</body>
</html>

這裏背景<div>上引用page-bg和gauss兩個類，虛化參數選的10px，實際效果如圖

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

3 透明效果

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

.glass {
    opacity:0.6; 
}

在HTML代碼中，依然選取背景圖片img-page-background.png，在其上方製做一個半透明顏色爲#555的矩形<div>，HTML僞代碼：

<!DOCTYPE html>
<html>
<head>
    ......
</head>
<body>
    ......
        <!--父容器-->
        <div class="father-div">   
            <!--放背景圖片帶有虛化效果的容器--> 
            <div class="page-bg"></div>
            <!--要顯示在背景圖片之上的內容-->
            <div class="page-context glass">
                ......
            </div>
        </div>
    ......
</body>
</html>

給顯示的內容<div>增長glass類，實際效果如圖

動態過渡

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

前景淡入

淡入效果jQuery就能夠支持，使用淡入淡出效果中的fadeIn()方法，語法爲：

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

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

<!DOCTYPE html>
<html>
<head>
    ......
    <!--要使用jQuery效果，則要先加載了jQuery庫!-->
    <script type="text/javascript" src="/scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
       $(function(){
           $("#fade_page").hide();
           $("#fade_page").fadeIn(3000);
       });
    </script>
</head>
<body>
    ......
        <!--父容器-->
        <div class="father-div">   
            <!--放背景圖片帶有虛化效果的容器--> 
            <div class="page-bg"></div>
            <!--要顯示在背景圖片之上的內容-->
            <div class="page-context glass" id="fade_page">
                ......
            </div>
        </div>
    ......
</body>
</html>

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

背景逐漸虛化

由於虛化使用的是CSS屬性filter設置blur(npx)參數，要實現逐漸虛化的效果，須要讓blur(npx)參數動態增長，網上有第三方js庫能夠實現動畫效果，我沒有使用第三方庫，怎麼辦？用定時器作
javascript自帶兩種定時器方法setInterval()和setTimeout()，前者是週期性循環定時並觸發回調函數，後者是定一個時間，到時間觸發回調函數；要實現逐漸的效果，就要不斷改變blur(npx)的n的值，很明顯須要屢次調用函數，因此使用setInterval()，格式爲

setInterval("javascript function",milliseconds);

milliseconds是循環的週期，單位爲毫秒，前面是一個函數，上HTML僞代碼：

<!DOCTYPE html>
<html>
<head>
    ......
    <!--要使用jQuery效果，則要先加載了jQuery庫!-->
    <script type="text/javascript" src="/scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var counter = 0;
            var blur_max = 20;
            var myTimer = setInterval(function(){
                var blur_css = "blur(" + counter + "px)";
                $(".blur").css("-webkit-filter", blur_css);
                $(".blur").css("-moz-filter", blur_css);
                $(".blur").css("-ms-filter", blur_css);
                $(".blur").css("filter", blur_css);
                
                if (counter == blur_max){
                    stopTimer();
                }
                
                counter++;
            }, 250);
        });
        
        function stopTimer(){
            clearInterval(myTimer);
        }
    </script>
</head>
<body>
    ......
        <!--父容器-->
        <div class="father-div">   
            <!--放背景圖片帶有虛化效果的容器--> 
            <div class="page-bg blur"></div>
            <!--要顯示在背景圖片之上的內容-->
            <div class="page-context glass" id="fade_page">
                ......
            </div>
        </div>
    ......
</body>
</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中就可使用<div class="icon-delete-normal" ......>......</div>來徹底顯示該圖標了

未完待續