转载，赛博朋克2077按钮bug制作，bug风格设计

最新推荐文章于 2024-06-10 09:53:24 发布

unsafe-no

最新推荐文章于 2024-06-10 09:53:24 发布

阅读量505

点赞数 2

分类专栏：前端笔记

原文链接：https://www.bilibili.com/video/BV15A411s7cX?t=447

版权

前端笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

css制作赛博朋克按钮故障风格…转载自B站up
链接如下：

https://www.bilibili.com/video/BV15A411s7cX?t=447

我只是个无情的代码搬运工~~~
在这里插入图片描述
来人上代码！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>赛博朋克2077按钮bug效果</title>
    <link rel="stylesheet" href="赛博朋克2077按钮bug效果.css">
</head>
<body>
    <button>AVAILABLE NOW</button>
</body>
</html>

来人上CSS！！！

body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #F8F005;
}
button,button::after{
    width: 380px;
    height: 86px;
    font-size: 36px;
    font-family: sans-serif;
    background: linear-gradient(45deg,transparent 5%,#ff013c 5%);
    border: 0;
    color: #fff;
    letter-spacing: 3px;
    line-height: 88px;
    box-shadow: 6px 0px 0px #00E6F6;
    outline: transparent;
    position: relative;
}
button::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: "AVAILABLE NOW";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg,transparent 3%,#00E6F6 3%,#00E6F6 5%,#ff013c 5%);
    text-shadow: -3px -3px 0px #F8F005,3px 3px 0px #00E6F6;
    clip-path: var(--slice-0);
}

button:hover::after{
    animation: 1s glitch;
    animation-timing-function:steps(2,end) ;
    /* 数字越小就越卡顿 */
}

@keyframes glitch{
    0%{
        clip-path: var(--slice-1);
        transform: translate(-20px,-10px);
    }
    10%{
        clip-path: var(--slice-3);
        transform: translate(-10px,-10px);
    }
    20%{
        clip-path: var(--slice-1);
        transform: translate(-10px,10px);
    }
    30%{
        clip-path: var(--slice-3);
        transform: translate(0px,5px);
    }
    40%{
        clip-path: var(--slice-2);
        transform: translate(-5px,0px);
    }
    50%{
        clip-path: var(--slice-3);
        transform: translate(5px,0px);
    }
    60%{
          clip-path: var(--slice-4);
        transform: translate(5px,10px);
    }
    70%{
          clip-path: var(--slice-2);
        transform: translate(10px,-10px);
    }
    80%{
          clip-path: var(--slice-5);
        transform: translate(20px,-10px);
    }
    90%{
          clip-path: var(--slice-1);
        transform: translate(-10px,0px);
    }
    100%{
          clip-path: var(--slice-1);
        transform: translate(0);
    }    
}