CSS实现按钮特效,彩虹按钮CSS 函数 conic-gradient() 创建一个由渐变组成的图像，渐变的颜色围绕一

站长

2024年09月27日 23:31 · 阅读数 18

CSS 函数 conic-gradient() 创建一个由渐变组成的图像，渐变的颜色围绕一个中心点旋转（而不是从中心辐射）进行过渡。锥形渐变的例子包括饼图和色轮。conic-gradient() 函数的结果是 <gradient> 数据类型的对象，此对象是一种特殊的 <image> 数据类型。

下面介绍如何通过 conic-gradient() 实现按钮的效果

CSS实现按钮特效,彩虹按钮CSS 函数 conic-gradient() 创建一个由渐变组成的图像，渐变的颜色围绕一

体验地址：wangzhenhao.github.io/plugin-coll…

完整代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Conic gradients</title>

</head>

<body>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
    </style>
    <style>
        @property --roate {
            syntax: "<angle>";
            initial-value: 0deg;
            inherits: false;
        }

        button {
            --bule: #0173ff;
            --radius: 50px;
            --roate: 0deg;
            padding: 20px 30px;
            border-radius: var(--radius);
            background: var(--bule);
            color: #fff;
            font-weight: 500;
            font-size: 30px;
            border: 0;
            position: relative;
            overflow: hidden;
        }

        button::before {
            content: "";
            background: conic-gradient(from var(--roate),
                    transparent 0%, white 5%, transparent 10%);
            position: absolute;
            inset: 0;
            animation: rotate 2s linear infinite;
        }

        button::after {
            content: "";
            background: var(--bule);
            position: absolute;
            inset: 3px;
            border-radius: calc(var(--radius) - 3px);
        }

        .fancy {
            position: absolute;
            inset: 0;
            /* background: red; */
        }

        .text {
            position: relative;
            z-index: 1;
        }

        @keyframes rotate {
            to {
                --roate: 360deg
            }

        }
    </style>
    <button>
        <div class="fancy"></div>
        <span class="text">Download For Free</span>
    </button>
    <style>
        .rainbow::before {
            background: conic-gradient(from var(--roate),
                    #fd004c,
                    #fe9000,
                    #fff020,
                    #3edf4b,
                    #3363ff,
                    #b102b7,
                    #fd004c);
            animation: rotate 0.8s linear infinite;
            transition: opacity  0.5s linear;
            opacity: 1;
        }
        .step::before {
            opacity: 0;
        }
        .rainbow {
            background: #1c1b29;
        }
        .rainbow::after {
            background: #1c1b29;
        }
    </style>
    <button class="rainbow" style="margin-left: 20px;">
        <div class="fancy"></div>
        <span class="text">Download For Free</span>
    </button>
    <script>
       var btn = document.querySelector('.rainbow')

       setInterval(() => {
        if(btn.classList.contains('step')) {
            btn.classList.remove('step')
        } else {
            btn.classList.add('step')
        }
       }, 3000)
       console.log(btn)
    </script>
</body>

</html>

转载自:https://juejin.cn/post/7412906006537175079