WD1X.COM - 问答一下,轻松解决,电脑应用解决专家
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win11Linux
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascript服务器
PHP教程CSS教程XML教程

炫彩流光按钮 html+css

更新时间:2021-03-15 14:32 作者:北极光之夜点击:
话不多,先上效果:
 
简介:
用基础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>
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容