流光溢彩按钮CSS

1.1 流光按钮

>效果展示

>完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>流光按钮</title>
        <style>
            #demo1 * {
                margin: 0;
                padding: 0;
            }
 
            #demo1 a {
                text-decoration: none;
                position: absolute;
                left: 50%;
                top: 50%;
                /* 按钮居中 */
                transform: translate(-50%, -50%);
                font-size: 24px;
                /* 线性渐变 */
                background: linear-gradient(90deg, #00aaff, #ffaaff, #ffff00, #00aaff);
                /* 放大背景 */
                background-size: 400%;
                width: 400px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                color: #fff;
                /* 内容始终大写 */
                text-transform: uppercase;
                border-radius: 50px;
                /* 设置层级关系,仅能在定位元素上奏效 */
                z-index: 1;
            }
 
            #demo1 a::before {
                content: "";
                position: absolute;
                left: -5px;
                right: -5px;
                top: -5px;
                bottom: -5px;
                /* 线性渐变 */
                background: linear-gradient(90deg, #00aaff, #ffaaff, #ffff00, #00aaff);
                /* 放大背景 */
                background-size: 400%;
                border-radius: 50px;
                /* 设置滤镜 */
                filter: blur(10px);
                /* 设置层级关系,仅能在定位元素上奏效 */
                z-index: -1;
 
            }
 
            #demo1 a:hover::before {
                /* 鼠标停留开始动画,无限循环 */
                animation: sum 8s infinite;
            }
 
 
            #demo1 a:hover {
                /* 鼠标停留开始动画,无限循环 */
                animation: sum 8s infinite;
            }
 
            @keyframes sum {
 
                /* 更改背景图片位置 Y轴不变 */
                100% {
                    background-position: -400% 0;
                }
        </style>
    </head>
    <body>
        <div id="demo1">
            <a href="#">button</a>
        </div>
    </body>
</html>

流光溢彩按钮CSS

上一篇:burpsuite代理https站点——无非是导入一个bp的证书 让其信任即可


下一篇:CSS(三):Font与Text