炫彩流光按钮 html+css

最新推荐文章于 2024-07-26 19:07:02 发布

北极光之夜。

最新推荐文章于 2024-07-26 19:07:02 发布

阅读量1.2w

点赞数 50

分类专栏：前端大杂烩 css 创意特效大全文章标签： css3 css html

本文链接：https://blog.csdn.net/luo1831251387/article/details/111162570

版权

前端大杂烩同时被 2 个专栏收录

123 篇文章 57 订阅

订阅专栏

css 创意特效大全

35 篇文章 68 订阅

订阅专栏

话不多，先上效果：

简介：

用基础css做一个有一点炫酷的流光按钮，不止按钮，只要是盒子就行。

具体步骤：

1.先定义一个盒子当做按钮，如我就用a标签：

<body>
    <a href="#" class="guang">button</a>
</body>

2.先给a标签写基础的样式，比如长宽等等…：

 .guang{
        position: relative;
        display: inline-block;
        width: 220px;
        height: 80px;
        color: rgb(255, 255, 255);
        line-height: 80px;
        font-size: 35px;
        font-family: sans-serif;
        text-decoration: none;
        text-transform: uppercase;
        text-align: center;
        border-radius: 30px;
        background: linear-gradient(90deg,rgb(39, 122, 218),rgb(74, 230, 121),rgb(201, 214, 13),rgb(226, 20, 233),rgb(16, 172, 219));
        background-size: 400%;
        z-index: 1;
        text-shadow: 0 0 5px white,
                     0 0 5px white;
    }

注意：其中一些属性用处：
text-transform: uppercase; 全部换成大写字母。
background: linear-gradient(…); 线性颜色渐变，可以改成自己要的颜色。
text-shadow: 0 0 5px white,
0 0 5px white;
写两行是为了让字体更亮。

3.鼠标经过盒子产生流光的动画：

 .guang:hover{
        animation: move 5s linear alternate infinite;
    }
    @keyframes move{
        0%{
           background-position: 0%;
        }
        100%{
            background-position: 100%;
        }
    }

4.定义盒子周围的光晕阴影：

 .guang::before{
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        width: 240px;
        height: 100px;
        background: linear-gradient(90deg,rgb(39, 122, 218),rgb(74, 230, 121),rgb(243, 169, 10),rgb(226, 20, 233),rgb(16, 172, 219));
        background-size: 400%;
        opacity: 0;
        z-index: -1;
        border-radius: 45px;
        transition: 0.6s;
       
    }
  .guang:hover::before{
        filter: blur(15px);
        opacity: 1;
        animation: move 8s linear alternate infinite;
    }

注意：其中一些属性用处：
filter: blur 滤镜，就是让其模糊

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: black;
    }
    .guang{
        position: relative;
        display: inline-block;
        width: 220px;
        height: 80px;
        color: rgb(255, 255, 255);
        line-height: 80px;
        font-size: 35px;
        font-family: sans-serif;
        text-decoration: none;
        text-transform: uppercase;
        text-align: center;
        border-radius: 30px;
        background: linear-gradient(90deg,rgb(39, 122, 218),rgb(74, 230, 121),rgb(201, 214, 13),rgb(226, 20, 233),rgb(16, 172, 219));
        background-size: 400%;
        z-index: 1;
        text-shadow: 0 0 5px white,
                     0 0 5px white;
    }
    .guang:hover{
        animation: move 5s linear alternate infinite;
    }
    @keyframes move{
        0%{
           background-position: 0%;
        }
        100%{
            background-position: 100%;
        }
    }
    .guang::before{
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        width: 240px;
        height: 100px;
        background: linear-gradient(90deg,rgb(39, 122, 218),rgb(74, 230, 121),rgb(243, 169, 10),rgb(226, 20, 233),rgb(16, 172, 219));
        background-size: 400%;
        opacity: 0;
        z-index: -1;
        border-radius: 45px;
        transition: 0.6s;
       
    }
    .guang:hover::before{
        filter: blur(15px);
        opacity: 1;
        animation: move 8s linear alternate infinite;
    }
</style>
<body>
    <a href="#" class="guang">button</a>
</body>
</html>