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

前言

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

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

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

效果

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

思路

这个动画效果的关键在于缓动曲线 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>
相关推荐
拼图20914 分钟前
Vue.js开发基础——数据绑定/响应式数据绑定
前端·javascript·vue.js
刘志辉19 分钟前
vue反向代理配置及宝塔配置
前端·javascript·vue.js
星叔42 分钟前
ARXML汽车可扩展标记性语言规范讲解
java·前端·汽车
编程老船长1 小时前
第18章 从零开始:春节门联网页设计,用DIV+CSS打造传统与现代的完美融合
前端·css·html
sky.fly1 小时前
HTML5+css3(浮动,浮动的相关属性,float,解决浮动的塌陷问题,clear,overflow,给父亲盒子加高度,伪元素)
前端·css·html
Coisini_甜柚か1 小时前
打字机效果显示
前端·vue3·antv
郑小憨2 小时前
Node.js NPM以及REPL(交互式解释器) 使用介绍(基础介绍 二)
开发语言·前端·javascript·npm·node.js
嚣张农民2 小时前
在 WebSocket 连接中出现错误时,如何处理和捕获错误?
前端·javascript·面试
代码搬运媛2 小时前
前端开发利器:npm 软链接
前端·npm·node.js
周三有雨2 小时前
vue3 + vite 实现版本更新检查(检测到版本更新时提醒用户刷新页面)
前端·vue.js·typescript