• 技术文章 >web前端 >css教程

    巧用CSS3滤镜制作文字快闪切换动画效果!

    青灯夜游青灯夜游2022-07-20 20:41:09转载238
    本篇文章带大家看看怎么利用CSS3滤镜实现高级感拉满的文字快闪切换动画效果,希望对大家有所帮助!

    今天偶然看到这样一类很有意思的文字快闪动画

    这类文字快闪切换效果运用得当的话,能比较好的吸引用户的眼球。【推荐学习:css视频教程

    当然,今天并非是想用 CSS 实现上述的的效果。在尝试的过程中,我发现了另外一类能够使用 CSS 非常轻松实现文字快闪动画,运用了blur() 滤镜和 contrast() 滤镜产生的融合效果,类似于这样:

    这个技巧也在多篇文章就提及,本文再简述下。

    blur 滤镜混合 contrast 滤镜产生融合效果

    本文的重点,模糊滤镜叠加对比度滤镜产生的融合效果。单独将两个滤镜拿出来,它们的作用分别是:

    但是,当他们“合体”的时候,产生了奇妙的融合现象。

    先来看一个简单的例子:

    CodePen Demo -- filter mix between blur and contrast

    https://codepen.io/Chokcoco/pen/QqWBqV

    仔细看两圆相交的过程,在边与边接触的时候,会产生一种边界融合的效果,通过对比度滤镜把高斯模糊的模糊边缘给干掉,利用高斯模糊实现融合效果。

    上述效果的实现基于两点:

    当然,背景色不一定是白色,我们稍稍修改上面的Demo,简单的示意图如下:

    使用 blur/contrast 滤镜实现文字的切换

    利用上述的技巧,我们可以实现文字的融合效果,像是这样:

    CodePen Demo -- word animation | word filter

    https://codepen.io/Chokcoco/pen/jLjNRj

    这样,利用这个技巧,我们可以巧妙构思一下动画:

    核心代码如下:

    <div class="g-container">
      <div class="word">iPhone</div>
      <div class="word">13</div>
      <div class="word">Pro</div>
      <div class="word">强得很!</div>
    </div>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
    
    $speed: 8s;
    $wordCount: 4;
    
    .g-container {
        position: relative;
        width: 100vw;
        height: 100vh;
        background: #000;
        font-family: 'Montserrat', sans-serif;
        color: #fff;
        font-size: 120px;
        filter: contrast(15);
    }
    .word {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: change $speed infinite ease-in-out;
    
        @for $i from 0 to $wordCount {
            &:nth-child(#{$i + 1}) {
                animation-delay: ($speed / ($wordCount + 1) * $i) - $speed;
            }
        }
    }
    
    @keyframes change {
        0%,
        5%,
        100% {
            filter: blur(0px);
            opacity: 1;
        }
        50%,
        80% {
            filter: blur(80px);
            opacity: 0;
        }
    }

    整段代码,核心需要关注 @keyframes change 这个动画,我们通过顺序给文字添加上这个动画(也就是利用 animation-delay 顺序添加了延时)实现了上一个文字消失的过程下一个文字显示的效果。

    上述的 .g-container 添加了这样一句代码 -- filter: contrast(15),去掉这句的话,效果是这样的:

    加上这句关键的代码 -- filter: contrast(15),整个效果就如一开始的题图所示:

    CodePen Demo -- 纯 CSS 实现文字融合快闪切换效果

    https://codepen.io/Chokcoco/pen/xxLjdmz

    整个动画的两个核心关键点:

    由此,你可以通过 HTML 控制文字的条数、改变 SASS 变量中表示动画时长的 $speed 和文字条数的 $wordCount 以及最终 @keyframes change 里面的参数,不断去调整优化你要的效果。演变出各种文字快闪效果。

    最后

    好了,本文到此结束,希望本文对你有所帮助 :)

    原文地址:https://segmentfault.com/a/1190000040965698

    作者:chokcoco

    (学习视频分享:web前端入门

    以上就是巧用CSS3滤镜制作文字快闪切换动画效果!的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:segmentfault,如有侵犯,请联系admin@php.cn删除
    专题推荐:文字特效 滤镜 CSS3
    上一篇:巧用CSS实现各种奇形怪状按钮(附代码) 下一篇:聊聊CSS中如何利用柏林噪声绘制炫酷图形!
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• css3如何实现图片滤镜效果?filter滤镜属性实现(图文详解)• CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产• JavaScript实现简单的Ps滤镜效果(附代码)• CSS滤镜和混合模式处理的图片如何上传下载?• 详细介绍CSS渐变、阴影和滤镜• 聊聊怎么使用CSS滤镜实现内凹平滑圆角效果
    1/1

    PHP中文网