html流光按钮

出处bilibili猫咪爱狗

html 复制代码
<!DOCTYPE html>
<html>
    <head>
        <style>
            body {/*内容居中,背景色*/
                height: 100vh;
                display: flex;
                justify-content: center;           
                align-items: center;
                background-color: #000;
            }
            a { /*水平垂直居中*/
                position: relative;
                display: inline-block;
                width: 200px;
                height: 60px;
                background-color: skyblue;
                color: #fff;
                line-height: 60px;
                text-align: center;
                /*渐变背景*/
                text-decoration: none;
                background: linear-gradient(90deg,
                    #03a9f4,
                    #f441a5,
                    #ffeb3b,
                    #03a9f4
                );
                /*圆角*/
                background-size: 400%;
                border-radius: 10px;
            }
            /*渐变动画*/
            @keyframes animate {
                0% {
                    background-position: 0 0;
                }
                100% {
                    background-position: 400% 0;
                }
            }
            /*鼠标悬停展示*/
            a:hover {
                animation: animate 8s linear infinite;
            }
            a:hover:before {
                filter: blur(20px);
                opacity: 1;
            }
            /*光影盒子*/
            a:before {
                content: '';
                position: absolute;
                left: -5px;
                top: -5px;
                right: -5px;
                bottom: -5px;
                z-index: -1;
                background: linear-gradient(90deg,
                #03a9f4,
                #f441a5,
                #ffeb3b,
                #03a9f4);
                background-size: 400%;
                border-radius: 10px;
                opacity: 0;
                transition: all 1s;
            }
        </style>
    </head>
    <body>
        <a href="#">Button</a>
    </body>
</html>
相关推荐
DanB249 分钟前
html复习
javascript·microsoft·html
像风一样自由202011 小时前
原生前端JavaScript/CSS与现代框架(Vue、React)的联系与区别(详细版)
前端·javascript·css
paid槮11 小时前
HTML5如何创建容器
前端·html·html5
拾光拾趣录12 小时前
HTML行内元素与块级元素
前端·css·html
奶丝兔蜜柚14 小时前
物理像素&逻辑像素&DPR
css
小胖同学~15 小时前
H5新增属性
html5
还是大剑师兰特20 小时前
CSS面试题及详细答案140道之(41-60)
前端·css·大剑师·css面试·css示例
精神小伙2号21 小时前
css position
前端·css·html
鲸落✗21 小时前
黑色风格音乐播放器网站模板(附完整源码)
前端·html·web
东华果汁哥21 小时前
【URL 转换为PDF】HTML转换为PDF
前端·pdf·html