java制作一个简单的画板_教你五分钟制作一个动态头像，超简单

头像，是现在网站或者应用中不可缺少的一个重要的组成部分了。你是否很羡慕别人在网站或应用中的那个动态效果的头像呢？现在不用再羡慕了，大叔教你五分钟做出动态头像效果。

废话不多说，先上效果图：

动态头像效果图

使用技术与步骤分解

想要实现上面的效果，我们需要使用 CSS3 中新增的 transform 属性和 transition 属性。实现的步骤基本上是这样的：

1. 制作静态的 HTML 结构
2. 对 HTML 结构设置静态样式
3. 实现最终的动态效果

那么接下来，咱们就按照上面的步骤一步一步来实现吧。

制作静态的 HTML 结构

首先，咱们先准备好一张当作头像的图片(大叔这里用的是自己的头像图片)。然后再来创建一个 HTML 页面：

  动态头像动效

创建好 HTML 页面之后，咱们就可以来完成第一步了，就是制作静态的 HTML 结构。

咱们要先创建一个用来容纳图片的容器元素，这里咱们可以使用

元素，并且为它设置一个 class 属性为 pic。

然后，在

元素内部创建一个 元素，用来引入头像图片。

这样，咱们就很简单地完成了静态 HTML 结构这一步了。

对 HTML 结构设置静态样式

只是完成 HTML 结构的话，这时咱们运行页面的效果会非常的难看。所以，咱们还要为静态的 HTML 结构设置一些静态样式。让它显示的更美观一些。

首先，咱们先为作为容器的

元素设置 width 和 height 两个属性，目的是为头像图片可以显示的大小比较理想。不至于太大，也不至于太小了。

.pic {    width: 150px;    height: 150px;    margin: 100px auto;}

这里咱们设置的 margin: 100px auto 的目的是为了实现水平方向的居中效果。这只是现在这个案例的测试效果，将来你在实际应用场景中可以视情况而定。

然后，咱们再为引入头像图片的 元素设置 width 和 height 属性，目的是让头像图片显示的大小和

元素保持一致。

.pic img {    width: 100%;    height: auto;}

但是，这个时候咱们看到的效果中，头像图片并不是像效果图中的那样，是一个圆形效果，而是方形效果。所以，接下来咱们需要通过 border-radius 属性将头像图片的效果设置成圆形。

.pic img {    width: 100%;    height: auto;    border-radius: 50%;}

这样，咱们又很轻松地完成了第二步，就是为 HTML 结构设置静态的样式。

实现动态效果

最后，咱们就需要使用 transform 属性和 transition 属性配合使用来完成最终的动态效果啦。

那么接下来，咱们先为

元素设置 :hover 伪类，这是为了达到鼠标悬停在头像上时可以让头像图片有动态的效果。当然，如果你了解 transition 属性的使用机制的话，应该知道这是在为过渡效果设置触发机制。

不仅如此，同时咱们还要为 头像元素设置 transform 属性的值为 rotate(180deg)，目的是当鼠标悬停在头像上时，头像可以旋转 180 度。

.pic:hover img { transform: rotate(360deg);}

上面的设置完成后，咱们再回到 元素的样式当中，来设置 transition 属性的值。主要是设置通过哪个样式属性来来执行过渡效果，以及设置过渡效果的执行时长。

.pic img { width: 100%; height: auto; border-radius: 50%; transition: all 0.9s ease 0s;}

到这为止，咱们就完成了动态头像的制作了。是不是很简单？！咱们再来看一下最终的效果吧：

动态头像效果图

写在后面的话

如果你想学习前端开发技术，请关注大叔的账号，会不定期地更新前端开发技术教程。如果你想获取本文章的源代码，请私信我，并发送【0311】获取源代码的下载链接。如果你在制作动态头像过程中遇到任何问题，都可以在下面留言，大叔会第一时间进行回复。