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

最新推荐文章于 2021-06-20 15:51:21 发布

unsafe-no

最新推荐文章于 2021-06-20 15:51:21 发布

阅读量449

点赞数 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);
    }    
}

感觉其实原理还是很好懂的…
虽然不太清楚什么属性，但是记住以后就可以用那种，（菜鸡狂喜）
果然人和人是不一样的，瘫倒（菜鸡颓废）
还是来个人把我斩了给up助助兴吧，
不过这个up好像台湾的，说话老带劲了

unsafe-no

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
转载，赛博朋克2077按钮bug制作，bug风格设计

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,
复制链接

扫一扫