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.hmttv.cn/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.hmttv.cn/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.hmttv.cn/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设计等知识。一入个网深似海，我们也有许多未知的知识值得去探索。

更多细节及扩展信息会在今后逐一完善。

也欢迎大家交流，早日置备好互联网世界的一亩三分田。

学习前端的伙伴可以转发+私信回复小编“前端”领取全套免费前端学习资料和视频