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>
相关推荐
ac.char12 分钟前
Golang读取ZIP压缩包并显示Gin静态html网站
golang·html·gin
每天开心24 分钟前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html
sophister1 小时前
Flex 布局中容易踩的那些坑,你踩过几个?
前端·css·html
MiyueFE2 小时前
CSS 函数与混入草案:原生 CSS 的“魔法”即将登场!
前端·css
呆呆的心5 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
WildBlue5 小时前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
爱学习的小学渣5 小时前
Css: flex布局+趣味Demo
css
wuxuanok5 小时前
Web前端开发-HTML、CSS
前端·css·html
namehu6 小时前
“什么?视频又双叒叕不能播了!”—— 移动端视频兼容性填坑指南
javascript·html