我们先来看看效果的实现

在这里插入图片描述

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二天</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <a href="#">流光按钮</a>
</body>
</html>

css代码

*{
    
    
    padding: 0%;
    margin: 0%;
}
body{
    
    
    width: 100vw;
    height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

a{
    
    
    position: relative;
    background-color: #000000;
    padding: 12px 40px;
    border-radius: 30px;
    font-size: 30px;
    color: #FFF;
    text-decoration: none;
    /* 使用linear-gradient生成一个线性渐变的背景图 */
    background-image: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
    /* 放大背景图 */
    background-size: 400%;
    /* 这里是为了让a标签的背景显示在a::before的下面 */
    z-index: 1;

}
a:hover{
    
    
    /*创建动画 
      动画名称show
      执行时间8秒
      线性
      循环执行  
    */
    animation: show 8s linear infinite;
}

@keyframes show{
    
    
    0%{
    
    
        background-position: 0%;
    }
    100%{
    
    
        background-position: 400%;
    
    }
}
/* 创建背景炫光效果 */
a::before{
    
    
    position: absolute;
    content:"";
    top:-5px;
    left:-5px;
    right:-5px;
    bottom:-5px;
    /* 使用linear-gradient生成一个线性渐变的背景图 */
    background-image: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
    /* 放大背景图 */
    background-size: 400%;
    border-radius: 40px;
    z-index: -1;
    filter:blur(20px);
    opacity:0;
}
a:hover::before{
    
    
    opacity:1;
    /* 背景炫光增加动画 */
    /*创建动画 
      动画名称show
      执行时间8秒
      线性
      循环执行  
    */
    animation: show 8s linear infinite;
}

新学到的知识总结

标签	作用
z-index	设置图像显示的优先级，和单片机定时器优先级一样
animation	使用简写属性，将动画与 div 元素绑定：
show 8s linear infinite	8s一个循环,无线循环
filter	filter 属性定义了元素(通常是img)的可视效果(例如：模糊与饱和度)。【滤镜】
filter:blur(20px)	高斯模糊，
opacity	设置 div 元素的不透明级别 0就是不显示了

[100天挑战100个前端效果]第二天---流光按钮

流光按钮

我们先来看看效果的实现

html代码

css代码

新学到的知识总结

猜你喜欢