CSS 炫酷文本过渡动画

简介: CSS 炫酷文本过渡动画

本文已参与[新人创作礼]活动,一起开启掘金创作之路

今天分享一个炫酷的文本过渡动画效果,如下面GIF所示,曾经是否有见过这种动画呢,想想是不是感觉挺复杂呢,通常这个过渡效果通过较为复杂的可用WebGl实现,本文通过另一种方式实现,文章尾部有神奇的代码,快来瞧瞧看吧~

751c13c603d0199bcafb7e2a8f098c0.png

代码实现

文字不断的在切换,确定的是有一个包含纯文字的数组,在此我们定义如下的html代码,后面通过交替显示其中一个span标签来达到动画的效果。

<div id="container">
  <span id="text1"></span>
  <span id="text2"></span>
</div>

然后定义简单的CSS代码,通过定位的方式将两个span叠在一起。

#container {
  position: absolute;
  margin: auto;
  width: 100vw;
  height: 80pt;
  top: 0;
  bottom: 0;
}
#text1, #text2 {
  position: absolute;
  width: 100%;
  display: inline-block;
  font-size: 80pt;
  text-align: center;
  user-select: none;
}

此时我们的基本结构结构已经完成了,接下来开始动画的逻辑。两个文本之间的动画交替使用两个动画实现,filteropacity,通过计算一个 0 到 1 的函数更新两个文本元素 filteropacity 的数值。

// 控制动画速度
const morphTime = 1;
const cooldownTime = 0.25;
let morph = 0;
let cooldown = cooldownTime;
function doMorph() {
  morph -= cooldown;
  cooldown = 0;
  let fraction = morph / morphTime;
  if (fraction > 1) {
    cooldown = cooldownTime;
    fraction = 1;
  }
  setMorph(fraction);
}
function setMorph(fraction) {
  text2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
  text2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;
  fraction = 1 - fraction;
  text1.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
  text1.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;
}

每执行一次动画结束后清空css中filteropacity数值。

function doCooldown() {
  morph = 0;
  elts.text2.style.filter = "";
  elts.text2.style.opacity = "100%";
  elts.text1.style.filter = "";
  elts.text1.style.opacity = "0%";
}

最后就是初始化,基于requestAnimationFrame创建动画保障动画的流畅。

function animate() {
  requestAnimationFrame(animate);
  let newTime = new Date();
  let shouldIncrementIndex = cooldown > 0;
  let dt = (newTime - time) / 1000;
  time = newTime;
  cooldown -= dt;
  if (cooldown <= 0) {
    if (shouldIncrementIndex) {
      textIndex++;
    }
    doMorph();
  } else {
    doCooldown();
  }
}

这个时候的动画效果如下所示,是可以看到动画是基于我们设置的filteropacity实现,但是离最开始的动画效果还差很远,接下来就是本文的重头戏。

45d018f166314a75701709c23a56433.png

在HTML中新增以下SVG代码,主要功能就是将足够高不透明的像素设置为完全不透明,剩余其他像素设置为完全透明。

<svg id="filters">
  <defs>
    <filter id="threshold">
      <feColorMatrix in="SourceGraphic"
          type="matrix"
          values="1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 255 -140" />
    </filter>
  </defs>
</svg>

再结合一段神奇的CSS代码即可完成我们最后的一步,动画效果就完成啦~

#container {
  ...
  filter: url(#threshold) blur(0.6px);
}

image.png

最后

整体代码就结束啦,最关键的代码就是最后的 svgcss filter 结合,有兴趣的同学可以研究一下其背后的原理。看完觉得有用,记得点赞收藏起来吧,说不定哪天就用上啦~



目录
相关文章
|
5天前
|
前端开发 JavaScript
CSS 过渡和动画
CSS过渡和动画是用于为网页元素添加动态效果的两种重要技术
110 73
|
10天前
|
前端开发
Css实现文本超出长度隐藏并用三个点结尾
Css实现文本超出长度隐藏并用三个点结尾
37 17
|
28天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34
|
1月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
50 22
|
2月前
|
Web App开发 移动开发 JavaScript
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果,呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现,没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
64 6
|
3月前
|
前端开发 JavaScript UED
CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画
本文探讨了CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随,再到滚动触发动画,这些效果增强了页面的吸引力和互动性。视差滚动通过不同层次元素的差异化移动,增加了页面的深度感和沉浸感。文章还讨论了实现方法、性能优化及案例分析,旨在为设计师和开发者提供实用指导。
91 7
|
3月前
CSS3几何透明层文本悬停变色源码
CSS3几何透明层文本悬停变色源码是一款基于css3 svg制作的背景图片鼠标悬停几何形状透明层变色显示文本内容
24 0
CSS3几何透明层文本悬停变色源码
|
3月前
纯css3实现的百分比渐变进度条加载动画源码
纯css3实现的百分比渐变进度条加载动画特效源码
70 31
|
3月前
纯css3加载loading发光变色动画代码
纯css3加载loading发光变色动画特效代码是一款基于css3 keyframes属性实现的发光变色圆点串联旋转loading加载动画
36 2
|
3月前
CSS3制作的聚光灯下倒影文字选装动画特效源码
CSS3聚光灯下倒影文字特效是一段基于CSS3实现的聚光灯下带倒影的文字旋转动画效果代码,具有真实的视觉感,同时文字还会在旋转过程中显示出灯光的反射效果,很有意思,欢迎对此段代码感兴趣的朋友前来下载使用。
43 6

热门文章

最新文章