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); 
}

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


图:悬停旋转的头像

参考链接

Keep

如何使用Anime.js创建Web动画 - html中文网

animejs 动画库 - Ajanuw - 博客园

相关文章

友情提示:请勿采取不友好的评论或进行过激的争吵,禁止任何淫秽、反动、暴力、赌博、恐吓或违法的内容。对此,本站将保留删除评论的权利。
0 条评论
😂暂无评论,快来抢沙发吧~