赛博朋克故障霓虹灯效果

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>陳山羊/故障霓虹灯</title>
    <style>
        body{
    
    
            background-image: url("sbpk.jpg");
            background-size: cover;
            background-attachment: fixed;
            display: flex;
            justify-content: center;
        }
        .a{
    
    
            position: relative;
            top: 180px;
            width: 500px;
            height: 120px;
            border: solid 10px #fff;
            box-shadow: 0 0 70px rgb(190,40,210);
            display: flex;
            justify-content: center;
            align-items: center;
            /* 设置鼠标移上去时变成小手形状 */
            cursor: pointer;
        }
        .a::after{
    
    
            content: '';
            position: absolute;
            width: 500px;
            height: 120px;
            box-shadow: 0 0 5px rgba(190,40,210);
            background-color: rgba(100,30,225,.4);
        }
        .a:hover{
    
    
            animation: a 1.5s;
        }
        @keyframes a{
    
    
            0%,34%,68%,100%{
    
    
                border: solid 10px #fff;
                box-shadow: 0 0 70px rgb(190,40,210);
            }
            17%,51%,85%{
    
    
                border: solid 10px rgba(255,0,0,.5);
                box-shadow: 0 0 90px rgba(255,0,0,.8);
            }
        }
        .b,.b::before{
    
    
            z-index: 999;
            color: #fff;
            position: absolute;
            font-size: 65px;
            font-weight: 900;
            /* 设置字体间距 */
            letter-spacing: 12px;
        }
        .b::before{
    
    
            content: 'GOAT/CSY';
            text-shadow: -5px -5px 0px rgb(211,250,9),5px 5px 0px rgb(25,10,240);
            /* 使用缩放的方式创建可见显示取余,括号里的四个值分别是top,right,bottom,left */
            clip-path: inset(100% 0px 0px 0px);

        }
        .a:hover .b::before{
    
    
            /* steps设置逐帧动画,值越小越卡顿 */
            animation: move 1.25s steps(2);
        }
        /* 这是制造混乱的位置和高宽,可以自行改变,随机的 */
        @keyframes move{
    
    
            0%{
    
    
                clip-path:inset(80% 0px 0px 0px);
                transform:translate(-20px,-10px)
            }
            10%{
    
    
                clip-path:inset(10% 0px 85% 0px);
                transform:translate(10px,10px)
            }
            20%{
    
    
                clip-path:inset(80% 0px 0px 0px);
                transform:translate(-10px,10px)
            }
            30%{
    
    
                clip-path:inset(10% 0px 85% 0px);
                transform:translate(0px,5px)
            }
            40%{
    
    
                clip-path:inset(50% 0px 30% 0px);
                transform:translate(-5px,0px)
            }
            50%{
    
    
                clip-path:inset(10% 0px 30% 0px);
                transform:translate(5px,0px)
            }
            60%{
    
    
                clip-path:inset(40% 0px 30% 0px);
                transform:translate(5px,10px)
            }
            70%{
    
    
                clip-path:inset(50% 0px 30% 0px);
                transform:translate(-10px,10px)
            }
            80%{
    
    
                clip-path:inset(80% 0px 5% 0px);
                transform:translate(20px,-10px)
            }
            90%{
    
    
                clip-path:inset(80% 0px 0px 0px);
                transform:translate(-10px,0px)
            }
            100%{
    
    
                clip-path:inset(80% 0px 0px 0px);
                transform:translate(0px,0px)
            }
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="b"><span>
            GOAT/CSY
        </span></div>
    </div>
</body>
</html>

在这里插入图片描述
鼠标放在文字上会变化

猜你喜欢

转载自blog.csdn.net/weixin_44517301/article/details/113421443