css3文字快闪切换动画效果代码

css3运用了blur()滤镜和contrast()滤镜产生的融合，轻松实现文字快闪动画效果！

1、html代码：

<div class="g-container">
  <div class="word">iPhone</div>
  <div class="word">13</div>
  <div class="word">Pro</div>
  <div class="word">强得很！</div>
</div>

2、css（scss）代码：

@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;
    }
}

进入前端入门建站教程官网入口

利用css3做一个动态炫彩三角边框（结合clip-path+animation）

html标签div垂直居中的几种方法介绍

css3利用rotate设置字体翻转

CSS3滤镜如何实现波浪效果（附代码）

标签： animation, translate

上面是“css3文字快闪切换动画效果代码”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2210.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！