前言
在这个夜黑风高的夜晚,你的眼睛已经开始有些疲惫。你的手指在键盘上轻轻地敲击着,仿佛在弹奏一首无声的夜曲。你的思绪在代码的海洋中飘荡,寻找着最后一行需要完成的代码。就在这时,你的老板走了过来,他的脸上带着一丝期待也带着一丝压榨廉价劳动力的理所当然。
他说:"我需要你给我们产品首页的标题做一个动画。但是,我希望这个动画能够突出标题的内容,而不是动画本身。我不希望动画太过炫酷,以免分散用户的注意力。"你虽然心生不满,但又不得不做,毕竟老板最近行情不好。既来之,则安之,心想着等行情好了,马上就跑。随后心中开始构思这个动画的设计。
你知道,这个动画需要足够简洁,但又不能太过平淡。它需要有一定的动态效果,但又不能太过夸张。它需要能够吸引用户的注意力,但又不能让用户忽视了标题的内容。你开始在脑海中浮现出一些想法。你想到了透明度渐现的效果,这种效果可以让标题文本像是从黑暗中浮现出来,既有动态感,又不会过于炫酷。你还想到了向上位移的效果,这种效果可以让标题文本像是从页面底部升起,增加了视觉的动态感,但又不会过于夸张。你开始在代码编辑器中敲击键盘,将这些想法转化为代码。你知道,这个夜晚还会很长,但你也知道,当这个动画完成时,你会感到无比的满足和成就感。因为你知道,你正在创造一种新的用户体验,你正在为用户带来一种新的感受。
效果
在我们深入讨论之前,让我们先看一下我们将要实现的效果,下次你想要加工资的时候记得写这个🎉
思路
这个动画效果的关键在于缓动曲线 animation-timing-function
这个属性,也就是缓动曲线。该属性定义了动画的速度变化。在这里使用了贝塞尔函数 cubic-bezier
来更精确地控制文本动画的运动节奏。
animation-timing-function
属性有如下几个浏览器预设的值:
- linear:匀速运动
- ease-in :加速运动
- ease-out:减速运动
- ease:先加速后减速
- cubic-bezier(x1,y1,x2,y2):贝塞尔函数
关于cubic-bezier
可以在cubic-bezier这个网站中进行可视化自定义的调试效果。
代码
html
<div class="container">
<h1 class="text">这里是第一行文字</h1>
<h2 class="text">这里是第二行文字</h2>
<h3 class="text">这里是第三行文字</h3>
</div>
<style>
.container {
text-align: center;
}
.text {
animation-name: textAniKey;
animation-duration: 1.5s;
animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: both;
}
@keyframes textAniKey {
0% {
transform: translateY(2vw);
opacity: 0;
}
100% {
transform: translateY(0vw);
opacity: 1;
}
}
</style>