html+css3 流光灯按钮

最新推荐文章于 2024-06-03 16:33:41 发布

今天学习了吗 >.<

最新推荐文章于 2024-06-03 16:33:41 发布

阅读量698

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/rainbow0518/article/details/106017086

版权

css3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css3完成流光灯按钮

照着视频敲得代码，来源：B站@码小渣

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>帅气的流光灯，想学吗？</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{background-color:#000;}
        .w{
            width: 400px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-100%);
            
        }
        p{
            color: #fff;
            text-align: center;
            font-size: 40px;
            font-weight: bolder;
        }
        span{
            color: #fff;
            text-align: center;
            display: block;
        }
        a{
            text-decoration: none;
            position: absolute;
            /* left:50%;
            top:50%;
            transform: translate(-50%,-50%); */
            font-size:24px;
            width: 400px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            color: #fff;
            background: linear-gradient(90deg,#9370DB,#AFEEEE,#FFA500,#9370DB);
            /* background:linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4); */
            border-radius:50px;
            text-transform: uppercase;
            background-size: 400%;
            z-index: 1;
        }
        a::before{
            content: "";
            position: absolute;
            left:-5px;
            top: -5px;
            right: -5px;
            bottom: -5px;
            background: linear-gradient(90deg,#9370DB,#AFEEEE,#FFA500,#9370DB);
            /* background:linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4); */
            background-size:400%;
            border-radius:50px;
            filter: blur(20px);
            z-index: -1;
        }
        a:hover{
            animation: sun 7s infinite;
        }
        a:hover::before{
            animation: sun 7s infinite;
        }
        @keyframes sun {
            100%{
                background-position: -400% 0;
            }
        }
    </style>
</head>
<body>
    <div class="w">
        <p>流光灯</p>
        <span>鼠标停在上面会动~想学吗</span>
        <a href="javascript:;">sunbutton</a>
    </div>
</body>
</html>

今天学习了吗 >.<

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html+css3 流光灯按钮

css3完成流光灯按钮照着视频敲得代码，来源：B站@码小渣<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" conten
复制链接

扫一扫