10 天开发前台系统技术系列(2)

有时候，动起来的网站元素（比如文字、头像等），给用户带来更好的体验，从而吸引更多的人们访问你的网站。当然，缺陷是会给网页带来一些额外的资源消耗。

本主题借鉴我开发个人网站魚立说的经验，整理了在开发前台系统过程可能会遇到的各种技术要点。整个系列由以下几个文章部分组成：

而且，涉及到的代码已经整理到 https://github.com/yulis-say/web-full-stack 中的 front-skills 目录，若觉得有用，请分享并 star 。

360°旋转的文字

这里使用了 anime.js 动画库，官网地址：https://www.animejs.cn/。直接上动效代码：

HTML 部分，需要实现动画效果的文字部分：

<h1>
<span class="letter">魚</span>
<span class="letter">立</span>
<span class="letter">说</span>
<span class="letter">个</span>
<span class="letter">人</span>
<span class="letter">主</span>
<span class="letter">页</span>
</h1>

CSS 部分，opacity 属性指定不透明度，使得动画从 0（完全透明）到 1（完全不透明）：

.letter {
  display: inline-block;
  opacity: 0;
}

JavaScript 部分，其中引入了 CDN 上的 anime.js 库：

<script src="https://cdn.jsdelivr.net/npm/animejs@3.0.1/lib/anime.min.js"></script>
<script type="text/javascript">
anime({
  targets: '.letter',// CSS 选择器，设置动画的元素
  opacity: 1,
  rotate: {
    value: 360,
    duration: 2000,// 动画的持续时间（以毫秒为单位）
    easing: 'easeInExpo'// 突然减速，效果较强
  }, 
  delay: anime.stagger(100, {start: 1000}),// 动画的延迟（以毫秒为单位）
  easing: 'linear',// 匀速
});
</script>

最终看到的效果会是这样的：

图：360°旋转的文字

上下跳动的文字

如果为了实现比较简单的动画效果，除了使用 anime.js 动画库外，还可以使用 CSS3 语法。

HTML 部分，需要实现动画效果的文字部分：

<div class="playful">
    <span>魚</span>
    <span>立</span>
    <span>说</span>
</div>

CSS 部分，通过 animation 属性和 @keyframes 规则来实现动画效果：

.playful span {
  font-size: 35px;
  position: relative;
  color: rgb(64, 158, 255);
  text-shadow: 0 0 1px #fff, 0 1px 2px #97a8be;
  animation: scatter 1.75s infinite;
}

.playful span:nth-child(2n) {
  animation-delay: 0.3s;/* 动画延迟 */
}

@keyframes scatter {
  0% {/* 动画的开始时间 */
    top: 0;
  }
  50% {/* 动画的中间时间 */
    top: -25px;
  }
  100% {/* 动画的结束时间 */
    top: 0;
  }
}

最终看到的效果会是这样的：

图：上下跳动的文字

悬停旋转的头像

有的童鞋可能也希望实现头像动效，比如头像的旋转效果。上代码：

HTML 部分，需要实现动画效果的图片：

<img src="http://www.gravatar.com/avatar/aae1e25f99469f5c616f777e9d?d=monsterid">

CSS 部分，通过 transition 属性和 transform 属性来实现旋转效果：

img {
  border-radius: 50%;
  height: 85%;
  transition: all 500ms;
  border: 1px solid #C0C0C0;
  width: 80px;
  height: 80px;
}
img:hover {
  transform: rotate(320deg); 
}

最终看到的效果会是这样的：

图：悬停旋转的头像