0
点赞
收藏
分享

微信扫一扫

发光按钮的实现代码

山竹山竹px 2022-01-22 阅读 62

<!DOCTYPE html>

<html>

<head>

    <style>

        body{

            background-color:black;

           

           

        }

        div{

            /* position:absolute;

            top:0;

            left:0;

            right:0;

            bottom:0;

            margin:auto; */

            position:absolute;

            top:50%;

            left:50%;

            transform:translate(-50%,-50%);

            width:400px;

            height:100px;

            background-image:linear-gradient(135deg, #03a9f4,#f441a5,#ffeb3b,#09a8f4);

            text-transform:capitalize;

            color:white;

            line-height:100px;

            font-size:25px;

            font-weight:600;

            text-align:center;

           

            border-radius:100px;

            background-size:800%;

            cursor:pointer;

            /* background-repeat:no-repeat; */

            /* z-index:2; */

        }

        div:hover{

            animation-name:sun;

            animation-duration:32s;

            animation-iteration-count:infinite;

        }

        div:hover::before{

            animation-name:sun;

            animation-duration:14s;

            animation-iteration-count:infinite;

        }

        div::before{

            content:"";

            position:absolute;

            top:-10px;

            right:-10px;

            left:-10px;

            bottom:-10px;

            border-radius:100px;

            background-image:linear-gradient(to right, #03a9f4,#f441a5,#ffeb3b,#09a8f4);

            z-index:-1;

            filter:blur(28px);

            background-size:200%;

           

           

        }

       

        @keyframes sun{

            100%{

                background-position:-800% 0;

               

            }

        }

    </style>

</head>

<body>

    <div>sun-button

        <!-- <div id="mohu"></div> -->

    </div>

</body>

</html>

举报

相关推荐

0 条评论