当前位置:   article > 正文

前端例程20221024:流光效果按钮_按钮流光效果

按钮流光效果

演示

在这里插入图片描述

原理

  • 使用多色渐变作为背景,拉伸背景,这样默认就只显示其中一部分;
  • 通过移动背景位置来改变呈现部分,实现颜色变化效果;
  • 放置一个元素块在按钮背部,使用模糊来实现外发光效果;

代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>流光效果按钮</title>

    <style>
        * {
            padding: 0;
            margin: 0;
            user-select: none;
            box-sizing: border-box;
        }

        html,
        body {
            height: 100vh;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #202020;
        }
    </style>

    <style>
        /* 全局色表 */
        :root {
            --color-1: #2486d8;
            --color-2: #f84077;
            --color-3: #fcd217;
        }

        button {
            width: 280px;
            height: 80px;
            border-radius: 40px;
            border: none;
            outline: none;
            color: white;
            font-size: 32px;
            text-align: center;
            line-height: 80px;
            letter-spacing: 4px;
            font-family: sans-serif;
            /* 渐变背景,首尾颜色要一样,以配合动画实现平滑过渡 */
            background: linear-gradient(to right, var(--color-1), var(--color-2), var(--color-3), var(--color-1));
            /* 拉长背景宽度*/
            background-size: 600% 100%;
        }

        button:hover {
            animation: anime 12s linear infinite;
        }

        /* 动画通过改变背景位置来改变显示出的颜色 */
        @keyframes anime {
            0% {
                background-position: 0%;
            }

            100% {
                background-position: -600% 0;
            }
        }

        button {
            position: relative;
        }

        /* ::before元素用户设置外发光效果 */
        button::before {
            content: '';
            position: absolute;
            z-index: -1;
            top: -5px;
            bottom: -5px;
            left: -5px;
            right: -5px;
            border-radius: 45px;
            background: linear-gradient(to right, var(--color-1), var(--color-2), var(--color-3), var(--color-1));
            background-color: #cad3c3;
            background-size: 600% 100%;
            filter: blur(15px);
            opacity: 0;
            transition: 1s;
        }

        button:hover::before {
            animation: anime 12s linear infinite;
            opacity: 1;
        }
    </style>
</head>

<body>
    <button>BUTTON</button>
</body>

</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104

更多例程

更多例程可以参考下面代码仓库:
https://github.com/NaisuXu/front-end-web-examples

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/805020
推荐阅读
相关标签
  

闽ICP备14008679号