CSS动画流光按钮

4个月前•笔记

727 0

效果图

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>css流光按钮</title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body>
        <a href="https://www.13i4.cn/8.html">Button</a>
    </body>
</html>

style.css

/* 设置内容居中,设置底色 */
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;
}
/* 修改为渐变背景,设置渐变背景图的大小,微修圆角 */
a{
    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:before{
    content: '';
    position: absolute;
    left: -5px;
    top: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
}
/* 设置光影的背景渐变,背景大小和圆角 */
a:before{
    background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
    background-size: 400px;
    border-radius: 10px;
}
/* 默认不显示光影,hover时加模糊度实现光影效果 */
a:before{
    opacity: 0;
    transition: all 1s;
}
a:hover:before{
    filter: blur(20px);
    opacity: 1;
}

流光动画本质揭秘

1.渐变背景，修改背景定位流动
2.blur模糊实现基本光影

CSS

最后更新 2023-11-20

CSS动画 流光按钮

效果图

index.html

style.css

流光动画本质揭秘

CSS动画流光按钮