「第29期」教你五分钟制作一个动态头像，超简单-优快云博客

本文详细介绍如何使用CSS3的transform和transition属性，快速实现网页上的动态头像效果，包括圆形头像和鼠标悬停旋转动画。

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

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

效果图

使用技术与步骤分解

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

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

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

制作静态的 HTML 结构

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态头像动效</title>
</head>

<body>

</body>

</html>

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

咱们要先创建一个用来容纳图片的容器元素，这里咱们可以使用 <div> 元素，并且为它设置一个 class 属性为 pic。

<div class="pic"></div>

然后，在 <div> 元素内部创建一个 <img> 元素，用来引入头像图片。

<div class="pic">
  <img src="avatar.png">
</div>

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

对 HTML 结构设置静态样式

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

首先，咱们先为作为容器的 <div> 元素设置 width 和 height 两个属性，目的是为头像图片可以显示的大小比较理想。不至于太大，也不至于太小了。

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

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

然后，咱们再为引入头像图片的 <img> 元素设置 width 和 height 属性，目的是让头像图片显示的大小和 <div> 元素保持一致。

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

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

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

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

实现动态效果

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

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

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

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

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

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

    transition: all 0.9s ease 0s;
}

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

效果图

写在后面的话

如果你想学习前端开发技术，请关注【前端课湛】微信公众号，会不定期地更新前端开发技术教程。
如果你想获取本文章的源代码，请在聊天界面发送【0311】获取源代码的下载链接。