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>
相关推荐
java水泥工1 小时前
基于Echarts+HTML5可视化数据大屏展示-白茶大数据溯源平台V2
大数据·echarts·html5
yddddddy8 小时前
css的基本知识
前端·css
昔人'8 小时前
css `lh`单位
前端·css
破无差9 小时前
《赛事报名系统小程序》
小程序·html·uniapp
2501_9181269110 小时前
用html5写一个flappybird游戏
css·游戏·html5
孩子 你要相信光11 小时前
css之一个元素可以同时应用多个动画效果
前端·css
从零开始学习人工智能12 小时前
快速搭建B/S架构HTML演示页:从工具选择到实战落地
前端·架构·html
小刘鸭地下城13 小时前
优雅表格设计:CSS 美化技巧详解
css
yddddddy13 小时前
html基本知识
前端·html
小刘鸭地下城14 小时前
网页深色模式完整实现:从响应式设计到系统主题联动
css