HTML5確實非常強大，小編之前也分享過很多基于HTML5 Canvas的動畫特效。但是你是否知道我們可以利用純CSS制作一些很酷的動畫效果？對，CSS3可以做到。2D炫酷動效是需要技術積累的，這里有4個重點大家可以著重掌握一下：

CSS3 2D炫酷動效

1. 了解canvas動效原理

就是不斷清除畫布再繪制，清除再繪制。

2. 一定的JS基本功

了解實例對象的屬性如何獲取，以及上下文this指代什么；如何有效地遍歷以及數據存儲等等。

3. 知道如何運用一些動畫算法

4. 了解canvas所有API，尤其基本的繪圖API

如何使用canvas繪制線條，繪制圓，繪制不規則圖形；如何描邊，如何填充，如何控制透明度等等，都是必須要牢固掌握的。因為，無論是是圓圈圈，還是角星星，都離不開這些基礎的API繪制。還需要了解圖像繪制API，例如，本demo的星星，實際上還可以基于圖片資源繪制，難度會稍微降低些，但可能要犧牲點效果。

css3選擇器的用途與重要性

css3選擇器是基于css2的一種創新，在css2的基礎上增加了目標偽類選擇器、語言偽類選擇器、UI元素狀態偽類選擇器、結構偽類選擇器、否定偽類選擇器。

大致有以下三點作用：

1.網頁代碼更簡潔，結構更清晰。

2.免除起名的煩惱。

3.避免css式樣不生效。

在主頁制作時采用css3技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數不同的網頁的外觀和格式。css3提供了非常多新途徑去改善的設計工作，且做了不少重要的變化。

css3將完全向后兼容，所以沒有必要修改現在的設計來讓它們繼續運作。網絡瀏覽器也還將繼續支持css2。對我們來說，css3主要的影響是將可以使用新的可用的選擇器和屬性，這些會允許實現新的設計效果（譬如動態和漸變），而且可以很簡單的設計出現在的設計效果（比如說使用分欄）。

與css相比，使用css3有什么好處呢？最明顯的就是css3能讓頁面看起來非常炫、非常酷，使網站設計錦上添花，但它的好處遠遠不止這些。在大多數情況下，使用css3不僅有利于開發與維護，還能提高網站的性能。與此同時，還能增加網站的可訪問性、可用性，使網站能適配更多的設備，甚至還可以優化網站SEO，提高網站的搜索排名結果。

現在網站重視的更多的是用戶體驗，而優秀的動效則能使你的應用更具交互性，從而吸引更多用戶的使用。在網站中加入一些動效會讓整個頁面看起來很有動感。但是如果你對CSS3中定義動效還不熟練，就需要多加學習、多加練習。

歡的可以收藏轉發加關注

搭建基本的個人網站成本十分低廉，最低從0到數十元不等。取決于對于域名的投入。

如果把搭建網站類比為現實中修建一棟房子，我們可以進行如下類比

修建一棟房子

1.申請門牌號

2.購置一片空地

3.構建房屋框架

4.添磚加瓦，粉刷裝修

搭建網站的步驟

1.申請域名

2.虛擬主機或服務器

3.引入網站框架或從頭建設

4.網站優化，可借助資源或DIY

首先

1.申請域名

what？why？

就像現實中每一棟房子都會有國家城市街區門牌號一樣，每一個網站都需要有獨一無二的IP地址。IP地址用二進制數來表示，每個IP地址長32比特，由4個小于256的數字組成，數字之間用點間隔，例如100.10.0.1表示一個IP地址。由于我們在上網時很難去記憶這些數字符號，所以需要有含義的符號化地址方案來代替數字型的IP地址。這樣的字符型地址就被稱為域名。

how？

申請域名現在可以有許多渠道，并且這些渠道也會搭配虛擬主機一起提供。

萬網，阿里云，騰訊云等

而我則是選擇了 買域名 | 世界最大域名注冊商 ，一般來說 .com,.org這樣的國際域名年費不超過100元。建議大家選擇國際域名，國內的.cn域名需要驗證實名信息。當然如果只是抱著試一試的態度可以嘗試.xyz,.co,.tk這樣的非主流域名或國外域名，價格相對便宜甚至有機會淘到免費域名。建議大家如果稍有網頁開發基礎，就不必選擇godaddy的增值服務了，如建站達人，虛擬主機等，我們完全可以通過其他渠道免費達到自己想要的更好的效果。

<img src="http://www.jungjaehyung.com/uploadfile/2024/1012/20241012061513313.jpg" data-rawwidth="1344" data-rawheight="638" class="origin_image zh-lightbox-thumb" width="1344" data-original="https://pic1.zhimg.com/a6ba67b1f2ce282b87048b23138f8be5_r.jpg">

2.虛擬主機或服務器

一般個人網站會采用虛擬主機的形式租用空間，放置站點及應用組件，進行必要的數據存放和傳輸功能。如果是自建服務器須保證24小時開機來保證訪問需求，并且花費較大，并無必要。虛擬主機可以有多種選擇。如國內的阿里云、騰訊云等，優點是速度較快，缺點是需要報請備案。也可以選擇國外如美國、香港等?？紤]到備案的繁瑣，需要保證一定的訪問速度，我了解到香港的

http://api.hostinger.com.hk/redir/17589162

免費套餐具有的一定控件和流量，足夠個人網站玩耍起來！

<img src="http://www.jungjaehyung.com/uploadfile/2024/1012/20241012061516271.jpg" data-rawwidth="1366" data-rawheight="613" class="origin_image zh-lightbox-thumb" width="1366" data-original="https://pic1.zhimg.com/a61b64234a7bf029720227b4b365b611_r.jpg">

在有了虛擬主機之后，我們需要將域名解析到新的虛擬主機地址，這樣訪客才能正確的找到我們的地盤，這是比較簡單的，現在虛擬主機提供商的圖形化頁面就能為我們提供相應的功能。

<img src="http://www.jungjaehyung.com/uploadfile/2024/1012/20241012061517612.jpg" data-rawwidth="1347" data-rawheight="586" class="origin_image zh-lightbox-thumb" width="1347" data-original="https://pic3.zhimg.com/62ab1e4717ed91c9ac046775c8008031_r.jpg">

3.引入網站框架或從頭建設

如果你以前有過基本的html、css、js網頁開發基礎，可以將自己的做的網頁提交到個人虛擬空間，當然如果沒有也沒有關系，網上有許多別人已經做好的模板，可以先借用一下。如模板之家、模板王等，就不一一列舉了。而我是想搭建個人博客系統，所以借用了時下非常流行的wordpress，大家可以前往官網下載China 簡體中文,根據提示進行一步步安裝操作。

4.網站優化

進一步的排版、分欄、美化、加速等，牽扯到許許多多計算機網絡、UI設計等知識。一入個網深似海，我們也有許多未知的知識值得去探索。

更多細節及擴展信息會在今后逐一完善。

也歡迎大家交流，早日置備好互聯網世界的一畝三分田。

學習前端的伙伴可以轉發+私信回復小編“前端”領取全套免費前端學習資料和視頻