css做出一个流光按钮

最新推荐文章于 2024-07-25 15:07:09 发布

Wether or not

最新推荐文章于 2024-07-25 15:07:09 发布

阅读量92

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/Wehter/article/details/115786255

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">

    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">

    <META HTTP-EQUIV="Expires" CONTENT="0">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />


</head>
<style>
    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(7, 7, 7);
    }
    
    a {
        display: block;
        position: relative;
        /* display: flex; */
        /* justify-content: center;
        align-items: center; */
        margin: 100px;
        border-radius: 50px;
        color: #fff;
        height: 100px;
        width: 200px;
        text-align: center;
        line-height: 100px;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 24px;
        background-image: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #09a8f4);
        background-size: 400%;
        z-index: 1;
    }
    
    a:before {
        content: '';
        position: absolute;
        top: -5px;
        bottom: -5px;
        left: -5px;
        right: -5px;
        border-radius: 50px;
        background-image: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #09a8f4);
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
    }
    
    a:hover {
        animation: sun 8s infinite;
    }
    
    a:hover::before {
        animation: sun 8s infinite;
    }
    
    @keyframes sun {
        100% {
            background-position: -400% 0;
        }
    }
    
    @media (max-width: 1120px) {
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    
    @media (max-width:500px) {
        html,
        body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        a {
            /* width: 40%; */
            margin: 10px;
            /* height: 10%; */
            /* font-size: 30px; */
            /* text-align: center; */
        }
    }
</style>

<body>

    <a class="shouye" href="./business.html">商家版</a>
    <a class="shouye" href="./personal-edition.html">个人版</a>

</body>


</html>

Wether or not

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css做出一个流光按钮

<!DOCTYPE html><html lang="en"><head> <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"> <META HTTP-EQUIV="Expires" CONTENT="0"> <meta charset="UTF-
复制链接

扫一扫

专栏目录