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

本主题借鉴我开发个人网站 魚立说 的经验,整理了在开发前台系统过程可能会遇到的各种技术要点。整个系列由以下几个文章部分组成:
而且,涉及到的代码已经整理到 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
本文作者:于立。欢迎关注本站公众号:「于立为文」。
本文链接:https://www.yulisay.com/d/moving.html
版权声明:本网站所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 国际协议,转载或引用请署名作者并注明出处。