如何做一个透明度渐现且向上位移逐行出现的文字效果

前言

在这个夜黑风高的夜晚,你的眼睛已经开始有些疲惫。你的手指在键盘上轻轻地敲击着,仿佛在弹奏一首无声的夜曲。你的思绪在代码的海洋中飘荡,寻找着最后一行需要完成的代码。就在这时,你的老板走了过来,他的脸上带着一丝期待也带着一丝压榨廉价劳动力的理所当然。

他说:"我需要你给我们产品首页的标题做一个动画。但是,我希望这个动画能够突出标题的内容,而不是动画本身。我不希望动画太过炫酷,以免分散用户的注意力。"你虽然心生不满,但又不得不做,毕竟老板最近行情不好。既来之,则安之,心想着等行情好了,马上就跑。随后心中开始构思这个动画的设计。

你知道,这个动画需要足够简洁,但又不能太过平淡。它需要有一定的动态效果,但又不能太过夸张。它需要能够吸引用户的注意力,但又不能让用户忽视了标题的内容。你开始在脑海中浮现出一些想法。你想到了透明度渐现的效果,这种效果可以让标题文本像是从黑暗中浮现出来,既有动态感,又不会过于炫酷。你还想到了向上位移的效果,这种效果可以让标题文本像是从页面底部升起,增加了视觉的动态感,但又不会过于夸张。你开始在代码编辑器中敲击键盘,将这些想法转化为代码。你知道,这个夜晚还会很长,但你也知道,当这个动画完成时,你会感到无比的满足和成就感。因为你知道,你正在创造一种新的用户体验,你正在为用户带来一种新的感受。

效果

在我们深入讨论之前,让我们先看一下我们将要实现的效果,下次你想要加工资的时候记得写这个🎉

思路

这个动画效果的关键在于缓动曲线 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>
相关推荐
GIS程序媛—椰子26 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_00133 分钟前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端36 分钟前
Content Security Policy (CSP)
前端·javascript·面试
木舟100939 分钟前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43911 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安1 小时前
前端第二次作业
前端·css·css3
啦啦右一1 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
半开半落1 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt