HTML与CSS——闪亮霓虹按钮（你值得拥有）（完整源码）

最新推荐文章于 2024-05-16 03:09:27 发布

命中不缺狗——

最新推荐文章于 2024-05-16 03:09:27 发布

阅读量1.1k

点赞数 2

文章标签： css html css3

本文链接：https://blog.csdn.net/qq_62858590/article/details/122244860

版权

今天，我们来学习闪亮霓虹按钮，代码中使用了CSS动画，CSS渐变以及CSS伪类等等属性，让我们来看看吧！

具体效果

HTML代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>命中不缺狗————</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="HTML与CSS——闪亮霓虹按钮（你值得拥有）.css">
    </head>
    <body>
        <div class="button">
           <p>点我</p>
        </div>
    </body>
</html>

CSS代码如下：

* {
  padding: 0 0;
  margin: 0 0;
}
body {
  display: flex;
  //页面背景颜色
  background-color: rgb(0, 0, 0);
}
.button {
  //相对位置
  position: relative;
  margin: 0 auto;
  margin-top: 300px;
  width: 280px;
  height: 70px;
  text-align: center;
  border-radius: 35px;
  //渐变颜色背景
  background-image: linear-gradient(
    to right,
    rgb(72, 72, 240),
    yellow,
    rgb(255, 34, 237),
    rgb(78, 78, 248)
  );
  //将颜色条的长度拉伸为原来的400%
  background-size: 400%;
  cursor: pointer;
  //显示在上面
  z-index: 1;
}
.button::before {
  content: "";
  //绝对位置
  position: absolute;
  //上下左右向外扩展4px
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  border-radius: 35px;
  //渐变颜色条
  background-image: linear-gradient(
    to right,
    rgb(72, 72, 240),
    yellow,
    rgb(255, 34, 237),
    rgb(78, 78, 248)
  );
  //将颜色条拉伸为原来的400%
  background-size: 400%;
  //设置模糊
  filter: blur(12px);
  //显示在下面
  z-index: -1;
}

//按钮层动画
.button:hover {
  //动画名为light，持续时间为8s，infinite 循环播放
  animation: light 8s infinite;
}

//发光层动画
.button:hover::before {
  animation: light 8s infinite;
}

//控制动画效果
@keyframes light {
  100% {
    
    background-position: -400% 0;
  }
}
p {
  margin: 0 auto;
  line-height: 70px;
  font-size: 25px;
  color: white;
}