HTML:彩虹按钮

彩虹按钮(盗版按钮,B站仿写,略有不同!)

链接
在这里插入图片描述
HTML:彩虹按钮_第1张图片

<html>
    <head>
        <title>
            demo
        title>
        
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body{
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100vh;
                width: 100vw;
            }
            .btn-container{
                position: relative;
                overflow: hidden;
                box-shadow: 0 1.5px 7.5px 0.5px gray;
                z-index: 2;
            }
            .btn{
                position: relative;
                background-color: transparent;
                padding: 20px 40px;
                font-size: 2rem;
                font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
                border: none;
                transition: 1s;
                color: black;
            }
            .strip-1,.strip-2,.strip-3,.strip-4,.strip-5,.strip-6,.strip-7{
                height: 250px;
                width: 35px;
                z-index: -1;
                position: absolute;
            }
            .strip-1{
                transition: 1s;
                background-color: violet;
                transform:  translate(-50px,-50px)  rotate(-45deg)  ; 
            }
            .strip-2{
                transition: 1s;
                background-color: rgb(0, 255, 76);
                transform:  translate(-50px,-50px)  rotate(-45deg)  ; 
            }
            .strip-3{
                transition: 1s;
                background-color: blue;
                transform:  translate(-50px,-50px) rotate(-45deg)  ; 
            }
            .strip-4{
                transition: 1s;
                background-color: green;
                transform:  translate(-50px,-50px) rotate(-45deg)  ; 
            }
            .strip-5{
                transition: 1s;
                background-color: rgb(194, 236, 5);
                transform:  translate(-50px,-50px) rotate(-45deg)  ; 
            }
            .strip-6{
                transition: 1s;
                background-color: orange;
                transform:  translate(-50px,-50px) rotate(-45deg)  ; 
            }
            .strip-7{
                transition: 1s;
                background-color: rgb(226, 12, 112);
                transform: translate(-50px,-50px) rotate(-45deg)  ; 
            }
            .btn:hover{
                color: white;
                cursor: pointer;
            }
            .btn::before{
                content: "";
                background-color: black;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: -1;
                opacity: 0;
                transition: 1s;
            }
            .btn:hover::before{
                opacity: 0.25;
            }
            .btn-container:hover .strip-1{
                transform:  translate(30px,-50px) rotate(-45deg);
            }
            .btn-container:hover .strip-2{
                transform:  translate(70px,-50px) rotate(-45deg);
            }
            .btn-container:hover .strip-3{
                transform:  translate(110px,-50px) rotate(-45deg);
            }
            .btn-container:hover .strip-4{
                transform:  translate(150px,-50px) rotate(-45deg);
            }
            .btn-container:hover .strip-5{
                transform:  translate(190px,-50px) rotate(-45deg);
            }
            .btn-container:hover .strip-6{
                transform:  translate(230px,-50px) rotate(-45deg);
            }
            .btn-container:hover .strip-7{
                transform:  translate(270px,-50px) rotate(-45deg);
            }
        style>
    head>
   
    <body>
        <div class="btn-container">
            <span class="strip-1">span>
            <span class="strip-2">span>
            <span class="strip-3">span>
            <span class="strip-4">span>
            <span class="strip-5">span>
            <span class="strip-6">span>
            <span class="strip-7">span>
            <button class="btn">Hover Mebutton>
        div>
    body>
html>

你可能感兴趣的:(html,css,css3)