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>
相关推荐
sunbyte30 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
码哥DFS4 小时前
Flex布局原理
前端·css·css3
长路 ㅤ   5 小时前
前端技术博客汇总文档
javascript·vue.js·css3·html5·前端技术
张晓~183399481216 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
小飞悟7 小时前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
xhload3d7 小时前
智慧航天运载体系全生命周期监测 | 图扑数字孪生
物联网·3d·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·三维建模·工控·航空航天·火箭升空·智慧航空·智慧航天·火箭发射·火箭回收
默默地离开8 小时前
Blob二进制处理的王者
前端·javascript·html
晴殇i9 小时前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
西西木科技丨Shopify开发机构9 小时前
如何在 Shopify 中建立重定向
前端·html
Liudef0610 小时前
基于HTML与Java的简易在线会议系统实现
java·前端·html