专栏首页前端印象【css炫酷动画】让面试官眼前一亮的故障风格文字动画

【css炫酷动画】让面试官眼前一亮的故障风格文字动画

今天分享一个用 css3 来实现一个最近特别流行的故障风格的文字展示动画,我敢说,只要你在你的项目中用到这个动画,面试官看到了一定会眼前一亮。下面先来看一下成品图

该动画效果就比较复杂了,用到的知识比较多,例如 css伪元素 、元素自定义属性 、蒙版属性 、animation动画等等

标签元素部分

<body>
    <div class="txt" data-text="我是故障风格的文字">
        我是故障风格的文字
    div>   
body>

这里我们使用了自定义属性,即 data- 加上我们自定义的属性名,我们将我们的文字内容作为该属性的值,方便之后伪元素获取到对应的文字

@keyframes部分

@keyframes animation-before{
    0% {
        clip-path: inset(0 0 0 0);
    }

    5% {
        clip-path: inset(.8em 0 .4em 0);
    }

    10% {
        clip-path: inset(.4em 0 .8em 0);
    }

    15% {
        clip-path: inset(.1em 0 1em 0);
    }

    20% {
        clip-path: inset(.3em 0 .6em 0);
    }

    25% {
        clip-path: inset(.6em 0 .3em 0);
    }

    30% {
        clip-path: inset(.8em 0 .5em 0);
    }

    35% {
        clip-path: inset(1em 0 .1em 0);
    }

    40% {
        clip-path: inset(.7em 0 .35em 0);
    }

    45% {
        clip-path: inset(.5em 0 .2em 0);
    }

    50% {
        clip-path: inset(.2em 0 .5em 0);
    }

    55% {
        clip-path: inset(.35em 0 .7em 0);
    }

    60% {
        clip-path: inset(.1em 0 .9em 0);
    }

    65% {
        clip-path: inset(.8em 0 .46em 0);
    }

    70% {
        clip-path: inset(.66em 0 .33em 0);
    }

    75% {
        clip-path: inset(.48em 0 .23em 0);
    }

    80% {
        clip-path: inset(.23em 0 .48em 0);
    }

    85% {
        clip-path: inset(.39em 0 .79em 0);
    }

    90% {
        clip-path: inset(.33em 0 .66em 0);
    }

    95% {
        clip-path: inset(1em 0 .3em 0);
    }

    100% {
        clip-path: inset(.62em 0 .29em 0);
    }
}
@keyframes animation-after{
    0% {
        clip-path: inset(0 0 0 0);
    }

    5% {
        clip-path: inset(.4em 0 .8em 0);
    }

    10% {
        clip-path: inset(.8em 0 .4em 0);
    }

    15% {
        clip-path: inset(1em 0 .1em 0);
    }

    20% {
        clip-path: inset(.6em 0 .3em 0);
    }

    25% {
        clip-path: inset(.3em 0 .6em 0);
    }

    30% {
        clip-path: inset(.5em 0 .8em 0);
    }

    35% {
        clip-path: inset(.1em 0 1em 0);
    }

    40% {
        clip-path: inset(.35em 0 .7em 0);
    }

    45% {
        clip-path: inset(.2em 0 .5em 0);
    }

    50% {
        clip-path: inset(.5em 0 .2em 0);
    }

    55% {
        clip-path: inset(.7em 0 .35em 0);
    }

    60% {
        clip-path: inset(.9em 0 .1em 0);
    }

    65% {
        clip-path: inset(.46em 0 .8em 0);
    }

    70% {
        clip-path: inset(.3em 0 .66em 0);
    }

    75% {
        clip-path: inset(.23em 0 .48em 0);
    }

    80% {
        clip-path: inset(.48em 0 .23em 0);
    }

    85% {
        clip-path: inset(.79em 0 .39em 0);
    }

    90% {
        clip-path: inset(.66em 0 .33em 0);
    }

    95% {
        clip-path: inset(.3em 0 1em 0);
    }

    100% {
        clip-path: inset(.29em 0 .62em 0);
    }
}

这里我们设置了两个keyframes,分别为 animation-beforeanimation-after

想必已经很明显了,前者是准备给我们后面的伪元素 before 使用的 ;后者是给我们后面的伪元素 after 使用的

那么其中用到的 clip-path 是干什么用的呢?这个是css3的一个新属性,叫做蒙版,而其中的 inset() 值表示的是蒙版形状为矩形

我们来看一下它的用法

首先 inset() 接收四个长度参数,分别表示蒙版距离元素标签的上侧右侧下侧左侧的距离,从而决定了蒙版的大小

当我们设置为 inset(0 0 0 0)时,表示蒙版作用区域大小跟元素标签一样大,如下图所示(红色边框表示蒙版的作用区域)

此时我们的文字是可以完全展示出来的,因为蒙版的作用区域就是我们标签元素的大小

然后我们再来看一下,如果我们的设置为 inset(30px 0 0 0) ,则测试表示,蒙版的作用区域距离标签元素的上侧 30px,距离其它的边 0px,如图所示

图中蓝色边框的部分不是蒙版的作用区域,因此我们无法看到该区域的内容,真实情况如下图所示

在了解了蒙版的使用情况了以后,我们就通过 @keyframes 来设置逐帧动画,使蒙版的作用区域在垂直方向一直变化,实现上下抖动的效果,代码就如上所述

具体样式

body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: black;
}
.txt{
    display: inline-block;
    font-size: 65px;
    font-weight: 600;
    padding: 0 4px;
    color: white;
    position: relative;
}
.txt::before{
    /* 获取文本 */
    content: attr(data-text);
    position: absolute;
    /* 向左侧移2px */
    left: -2px;
    width: 100%;
    /* 将背景色设为与主背景同样的颜色,用于遮挡我们的标签元素 */
    background: black;
    /* 给before伪元素的文本添加左侧2px大小的红色文字阴影 */
    text-shadow:2px 0 red;
    /* 应用蒙版垂直变化动画,并一直循环 */
    animation: animation-before 3s infinite linear alternate-reverse;
}
.txt::after{
    /* 获取文本 */
    content: attr(data-text);
    position: absolute;
    /* 向左侧移2px */
    left: 2px;
    width: 100%;
    /* 将背景色设为与主背景同样的颜色,用于遮挡我们的标签元素 */
    background: black;
    /* 给before伪元素的文本添加右侧2px大小的蓝色文字阴影 */
    text-shadow: -2px 0 blue;
    /* 应用蒙版垂直变化动画,并一直循环 */
    animation: animation-after 3s infinite linear alternate-reverse;
}

这里,我们设置了两个伪元素 before 和 after,分别定位到跟父元素同样的位置,然后分别向左、右侧移一点点的距离,制作一个错位的效果,然后都将背景色设置为与父元素背景色一样的颜色,用于遮挡父元素。

然后设置了蒙版垂直变化动画以后,被蒙版遮挡的部分虽然看不到了,但是会露出下面一层的父元素内容,这样就可以实现了一个完美的故障风格的文字展示动画了。

强烈推荐

给你们推荐一下我的个人博客,拥有大量优质文章、面试宝典、算法精选,欢迎访问~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 轻松使用纯css3打造有点意思的故障艺术(附React加强组件版)

    很早之前就看到国外很多酷炫的网站在实践"故障艺术", 或者错位动画", 感觉非常有意思, 现在APP端的抖音启动界面有着这种设计的影子, 作为一名用于探索未知的...

    徐小夕
  • 30个最优CSS动画案例分享,轻松让网页用户随心而“动”

    CSS或CSS3动画,包括常见的鼠标悬停动画,网页加载动画,页面切换动画,文本动画以及背景动画等等,能够有效地提升网页趣味性和视觉吸引力。这也是为什么CSS/C...

    奔跑的小鹿
  • 那些前端常用的网站插件

    这套工具集中的大部分你可能见过,也可能没见过,如果有哪个/些让你眼前一亮,那么我的分享就很值了。 这个列表包含许多种类的资源,所以这里我将它们分组整理。 Jav...

    企鹅号小编
  • 12个令人惊奇的CSS实验项目 [每日前端夜话(0x1D)]

    你可能认为 CSS 只是一种简单地为网页设计样式的语言,但它的功能比你想象的要多得多。 从逼真的图像到甚至是视频游戏,你会惊讶地看到一个优秀的开发者可以用 CS...

    疯狂的技术宅
  • 我写CSS的常用套路(附demo的效果实现与源码)

    有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇。

    Nealyang
  • 我写CSS的常用套路(附demo的效果实现与源码)

    有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇。

    ConardLi
  • Ios常用第三方框架(一)

    honey缘木鱼
  • 推荐9个软件神器,26个网站,让你PPT更加风骚

    导语:本文推荐了9个软件神器,26个网站,包含了PPT制作中的图片,素材,格式处理等方面。标题链接直达官网或者下载地址

    IT派
  • Ps|故障风格效果

    抖音作为当代人消遣时间的工具,相信很多人都下载和使用过。其中,抖音logo的红、青渐变故障风格也因为抖音而流行起来。故障风格以其颜色的强烈对比与支离破碎的残缺美...

    算法与编程之美
  • 《蜘蛛侠:平行宇宙》的视觉解析与滤镜实现

    ? 早在四年前,索尼想要制作全新风格的“蜘蛛侠”电影这一消息被泄露时,一个显眼的词汇便被反复提及——“rejuvenate”,译为“使其恢复年轻”。当时,除去...

    腾讯技术工程官方号
  • 2019年最全的web前端知识体系汇总

    · HTML: https://developer.mozilla.org/zh-CN/docs/Web/HTML

    用户5827212
  • 程序员必备狂拽炫酷吊炸天的动效神器

    薛定喵君
  • 10个CSS3动画工具,值得你收藏!

    人类对于运动的食物往往会投入更多的关注,因此巧妙的使用动画能够极大地提升网站的用户体验,快速唤起用户对重要元素的关注。

    winty
  • 奇思妙想 CSS 文字动画

    本文将会和这篇 -- CSS 奇思妙想边框动画类似,讲一些文字效果,利用不同的属性搭配,实现各式各样的文字动效。

    Sb_Coco
  • 不怕搞事,自定义View云扩散效果

    用户1907613
  • 【工具】977- 10个实现炫酷UI设计效果的CSS生成工具

    英文 | https://mattkarski.medium.com/10-amazing-css-generators-for-ui-design-1f790...

    pingan8787
  • 程序员,就要有一套自己的终极装备

    我们程序员工作,敲代码如同搬砖,如果你有好的开发工具,优秀的 IDE ,有好的代码管理工具,高效率的协同办公软件,都可以使我们搬砖的速度和质量有大幅度的提高,就...

    非著名程序员
  • ICON设计使用手册:如何设计一个优秀的图标?

    大家都知道UI设计师要画图标,面对那么多纷繁复杂的林林总总的图标,大家有没有总结过一些系统的知识点呢,今天咱们来看看Nick Babich的这篇文章。

    用户5009027
  • 第三届 CSS 开发者大会笔记

    这次大会于 2016 年 12 月 17 日在广州的天虹酒店举办。演讲嘉宾有大漠,勾三股四等一些业界大牛们。特邀嘉宾有 Andrey Sitnik(PostCS...

    前端GoGoGo

扫码关注云+社区

领取腾讯云代金券