【CSS小例】赛博朋克-文字动画

纯CSS实现一个赛博朋克风格的文字动画效果。

实现效果

赛博朋克风格文字动画

实现思路

利用叠加渐变和阴影，为文字设置基础样式，在帧动画中设置变形、位置等样式，实现赛博朋克风格的文字动画效果。

代码实现

HTML代码

<div class="cyberpunk-text" text="cyberpunk text">cyberpunk text</div>

设置样式

这里用到了:before和:after，实现渐变和错位的效果。

.cyberpunk-text{
  font-size: 30px;
  font-weight: bold;
  color: #b937a3;
  position: relative;
  animation: glitched1 3s linear 1s infinite;
  &:after, &:before {
    content: attr(text);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    left: -2px;
    top: 0
  }
  &::before {
    color: #fcf3cc
  }
  &:after {
    color: #d0dcfc;
    mask-image: linear-gradient(180deg,transparent 30%,#d0dcfc 60%);
    animation: glitched1after 3s linear 1s infinite
  }
}

动起来

上层和下层使用两个不同的动画效果。上层动画设置文字的变形和文字阴影，下层动画设置渐变层的截取和位置。

/* 底层文字动画 */
@keyframes glitched1 {
    0% {
        left: -4px;
        transform: skew(10deg)
    }

    4% {
        left: 2px;
        transform: skew(10deg);
        text-shadow: 2px 0 3px #b937a3
    }

    10% {
        transform: skew(-10deg);
        text-shadow: none
    }

    11% {
        transform: skew(10deg)
    }

    12% {
        transform: skew(0deg);
        text-shadow: 5px 0 6px #b937a3
    }

    20% {
        left: 0;
        transform: skew(0deg);
        text-shadow: none
    }

    to {
        transform: skew(0deg)
    }
}
/* 上层渐变层动画 */
@keyframes glitched1after {
    5% {
        left: -8px;
        -webkit-clip-path: inset(10% 6px 50% -6px);
        clip-path: inset(10% 6px 50% -6px)
    }

    8% {
        left: 0;
        -webkit-clip-path: inset(10% 6px 50% -6px);
        clip-path: inset(10% 6px 50% -6px)
    }

    10% {
        left: 4px;
        -webkit-clip-path: inset(50% -6px 30% 0);
        clip-path: inset(50% -6px 30% 0)
    }

    14% {
        left: 0;
        -webkit-clip-path: inset(50% -6px 30% 0);
        clip-path: inset(50% -6px 30% 0)
    }

    15% {
        left: 0;
        -webkit-clip-path: inset(0 0 0 0);
        clip-path: inset(0 0 0 0)
    }

    0% {
        left: 0
    }
}

以上，就是我的实现，如果有更好的实现方案，请不吝赐教！

完结散花

如发现文章内容有任何问题，请提出您的宝贵意见予以指正，感谢您的阅读。