基于Web前端開發技術的視覺效果研究

朱雙雙

摘要：隨著Web前端開發技術的不斷發展，實用性和美觀性兼具的網頁才能吸引大眾的視線。通過研究Web前端開發技術的視覺表現形式，將Flash動畫和輪播圖技術應用于網頁，增強網頁的視覺效果，同時通過前端開發技術的優化措施提升網頁的性能，提升瀏覽者的用戶體驗度。

關鍵詞：Web;前端開發;視覺效果;優化;用戶體驗

中圖分類號：TP393.092? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）02-0217-03

Abstract： With the continuous development of Web front-end development technology， the webpage with both practicality and aesthetics can attract the public's attention. By studying the visual representation of Web front-end development technology， the webpage applies flash animation and carousel technology to enhance the visual effects. At the same time， improve the performance of the webpage and enhance the user experience of visitors through optimization measures of front-end development technology.

Key words： web; front-end development; visual effects; optimization; user experience

1 背景

隨著互聯網技術的飛速發展，人們開始越來越關注Web頁面的設計、美工。眾所周知，網頁是接觸瀏覽者的第一入口，因此，視覺效果出色的網頁能吸引大量的瀏覽者，而Web前端開發技術作為網頁制作中一項不可或缺的技術，能夠設計網頁的排版布局，動畫效果，文字樣式等，網站開發者通過這項技術呈現視覺效果出色的網頁界面，提升瀏覽者的用戶體驗度。

2 Web前端開發技術

Web前端開發技術有HTML、CSS和JavaScript三種主要語言，它們在前端開發中各司其職，發揮不同的作用[1]。HTML（英文全稱：Hyper Text Markup Language ）是網頁制作的超文本標記語言，通過各類標記標簽將文字、圖片和動畫等內容展示出來。HTML5技術是HTML不斷發展的成果，不僅包含了HTML的技術，還擁有強大的繪圖功能，能呈現驚人的視覺效果。CSS（英文全稱：Cascading Style Sheets）是修飾網頁的層疊樣式表，能夠精確控制網頁中各種元素的排版。CSS3是CSS技術升級的最新版本，它增添了多種CSS的樣式屬性，豐富了CSS的樣式設置[2]。JavaScript是一種用于網頁開發的高級腳本語言，能夠增加HTML頁面的交互性，為用戶瀏覽網頁提供美觀的視覺效果。

3 WEB前端開發技術的視覺表現形式

3.1 網頁布局

網頁布局在網頁設計中起到非常重要的作用。只有設計了合適的網頁布局才能進行后續的開發工作。優秀的網頁布局能對用戶進行視覺引導，通過合理的頁面布局，引導瀏覽者快速獲取網頁的主要信息，提升瀏覽者的用戶體驗度。DIV+CSS是使用最廣泛的網頁布局技術，DIV負責劃分網頁的各個內容區域，構建頁面的框架，CSS負責網頁的樣式設計，美化網頁[3]。

3.2 色彩運用

合理的色彩運用是網頁設計的重要條件之一。色彩具有強力的視覺影響作用，色彩基調突出的網頁能快速抓住瀏覽者的眼球，使其留下深刻的印象[4]。色彩也具有視覺區域劃分的作用，通過多個色彩標記不同的信息內容，可以區分信息之間的主次，突出網頁中的重要內容。網頁的色彩可分為主色彩、輔助色和強調色。主色彩是網頁的主基調，在網頁中具有主導作用。輔助色和強調色的運用可增加網頁的層次感，增加頁面的視覺效果[5]。

3.3 文字風格

文字是網頁中不可替代的重要元素。文字的字體、字號和顏色的設置都能影響網頁的視覺效果，所以需要合理設計。生動地文字風格不僅能增強網頁的視覺效果，還能清晰地傳達網頁信息。文字風格設計需要遵循三個原則[6]：1）文字編排需要具有條理性，避免雜亂，影響瀏覽者閱讀;2）文字風格需與網頁的整體風格相統一，根據不同主題的網頁設計特有的文字風格;3）文字的設計不能脫離易讀性與可讀性，可讀的和易于識別的文字才能傳遞網頁信息。

3.4 網頁交互性

網頁具有交互性是網頁與用戶互動的最基本要求，用戶通過和網頁交互，能快速找到相關信息，提升用戶接收網頁信息的主動性和積極性。目前，在前端開發技術中，JavaScrip是最常用的交互技術。為了增加網頁的交互性，吸引用戶的視線，主要通過以下三種方式實現[7]：1）突出網頁中的按鈕和鏈接的設計，促使用戶點擊按鈕和鏈接，完成頁面跳轉;2）設計結構清晰的導航，合理清晰的導航幫助用戶快速找到所需信息;3）適當加入Flash動畫元素，生動形象的動畫不僅能美化網頁，還能很好的傳遞網頁信息。

4 Web前端開發技術的視覺效果應用

為了讓網頁增加趣味性和活潑性，下面兩種技術的應用將為網頁的視覺效果增色不少。

4.1 Flash動畫

當鼠標點擊圖1，Flash動畫的效果從圖1至圖3漸變，效果圖如下所示。

實現漸變Flash效果的核心代碼如下：

4.1.1 HTML代碼

4.1.2 CSS代碼

.box {

width： 800px;

height： 500px;

position： relative;

}

.box img {

width： 800px;

height： 500px;

position： absolute;

left： 0;

top： 0;

}

.show1 {

transition： all 3s;

}

.show1：hover {

opacity： 0;

}

4.2 輪播圖

輪播圖的效果圖如圖4所示。

實現輪播圖效果的核心代碼如下：

4.2.1 HTML代碼