纯CSS实现一个赛博朋克故障风格的按钮动画效果。

实现效果

实现思路

将按钮分为两层，下层为静态样式按钮，上层样式与下层相同。

上层增加帧动画，通过截取、位置、变形等样式设置，实现故障效果。

代码实现

CSS使用了扩展语言Sass编写

HTML代码

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

设置样式

按钮样式及伪类样式代码如下：

.cyberpunk-btn{
  padding: 4px 20px;
  color: #e07611;
  font-weight: bold;
  font-style: italic;
  font-size: 24px;
  text-shadow: -4px 4px 1px #f7d84a;
  border: 2px solid #fbde9c;
  background: linear-gradient(180deg, #fbb715 0%, #fdf69a 100%);
  position: relative;
  &::after{
    --slice-0: inset(50% 50% 50% 50%);
    --slice-1: inset(80% -6px 0 0);
    --slice-2: inset(50% -6px 30% 0);
    --slice-3: inset(10% -6px 85% 0);
    --slice-4: inset(40% -6px 43% 0);
    --slice-5: inset(80% -6px 5% 0);
    content: attr(text);
    padding: 4px 20px;
    color: #e07611;
    font-weight: bold;
    font-style: italic;
    font-size: 30px;
    text-shadow: -4px 4px 1px #f7d84a;
    border: 2px solid #fbde9c;
    background: linear-gradient(180deg, #fbb715 0%, #fdf69a 100%);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-clip-path: var(--slice-0);
    clip-path: var(--slice-0);
    opacity: 0;
    animation: glitch-after 5s infinite;
    animation-timing-function: steps(2)
  }
}

动起来

序列帧动画

@keyframes glitch-after {
    0% {
        -webkit-clip-path: var(--slice-1);
        clip-path: var(--slice-1);
        opacity: 1;
        transform: translate(-5px,-10px)
    }

    2% {
        -webkit-clip-path: var(--slice-3);
        clip-path: var(--slice-3);
        transform: translate(15px,15px)
    }

    4% {
        -webkit-clip-path: var(--slice-1);
        clip-path: var(--slice-1);
        transform: translate(-10px,10px)
    }

    6% {
        -webkit-clip-path: var(--slice-3);
        clip-path: var(--slice-3);
        transform: translateY(10px)
    }

    8% {
        -webkit-clip-path: var(--slice-2);
        clip-path: var(--slice-2);
        transform: translate(-15px)
    }

    10% {
        -webkit-clip-path: var(--slice-3);
        clip-path: var(--slice-3);
        transform: translate(15px)
    }

    12% {
        -webkit-clip-path: var(--slice-4);
        clip-path: var(--slice-4);
        transform: translate(15px,15px)
    }

    14% {
        -webkit-clip-path: var(--slice-2);
        clip-path: var(--slice-2);
        transform: translate(-10px,15px)
    }

    16% {
        -webkit-clip-path: var(--slice-5);
        clip-path: var(--slice-5);
        transform: translate(5px,-15px)
    }

    18% {
        -webkit-clip-path: var(--slice-1);
        clip-path: var(--slice-1);
        transform: translate(-15px)
    }

    20% {
        -webkit-clip-path: var(--slice-1);
        clip-path: var(--slice-1);
        opacity: 1;
        transform: translate(0)
    }

    21% {
        -webkit-clip-path: var(--slice-1);
        clip-path: var(--slice-1);
        opacity: 0;
        transform: translate(0)
    }

    to {
        -webkit-clip-path: var(--slice-1);
        clip-path: var(--slice-1);
        opacity: 0;
        transform: translate(0)
    }
}

至此，一个赛博朋克鼓掌风格按钮的动画效果就完成啦！

基于这个实现逻辑，换成图片也可以实现同样的效果，图片示例：

完结散花

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