1. 首页
  2. Language
  3. 笔记 02 CSS 8种让人眼前一亮的hover效果 霓虹效果

笔记 02 CSS 8种让人眼前一亮的hover效果 霓虹效果

参考原文
MDN box-shadow
参考 box-shadow

霓虹效果

css hover 触发 box-shadow

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>霓虹效果</title>
</head>
<style>
#neon-btn {
  display: flex;
  align-items: center;
  /* CSS justify-content 属性定义了浏览器之间，
  如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。 */
  /* space-around 均匀排列每个元素每个元素周围分配相同的空间 */
  justify-content: space-around;
  height: 100vh;
  background: #031628;
}

.btn {
  border: 1px solid;
  background-color: transparent;
  text-transform: uppercase;
  font-size: 14px;
  padding: 10px 20px;
  font-weight: 300;
}

.one {
  color: #4cc9f0;
}

.two {
  color: #f038ff;
}

.three {
  color: #b9e769;
}

.btn:hover {
  color: white;
  border: 0;
}
/*
  CSS box-shadow 属性用于在元素的框架上添加阴影效果。
  你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。
  该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。
 */
.one:hover {
  background-color: #4cc9f0;
  /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
  /* blur-radius (阴影模糊半径)
     一般情况下，阴影是纯色的，没有渐变区域。
     但是如果设置了模糊半径，就会创建一个渐变区域，向周围的颜色过渡。
     渐变半径必须大于0。 */
  /* spread-radius (阴影扩散半径)
    扩散半径是对原来的纯色阴影的缩放。
    默认取值为0，代表阴影和物体一样大，
    但因为阴影在物体后面，所以你看不见。
    当然加上一层模糊半径你就能看到了。
    小于0的时候，阴影会缩小。
    这种情况下往往你也看不到，
    需要设置一层很厚的模糊半径，
    然后慢慢调低扩散半径你才能看出区别。
    大于0的时候，阴影会扩大。
  */
  -webkit-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
  -moz-box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
  box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
}

.two:hover {
  background-color: #f038ff;
  -webkit-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
  -moz-box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
  box-shadow: 10px 10px 99px 6px rgba(240, 56, 255, 1);
}

.three:hover {
  background-color: #b9e769;
  -webkit-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
  -moz-box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
  box-shadow: 10px 10px 99px 6px rgba(185, 231, 105, 1);
}
</style>
<body>
  <div id="neon-btn">
    <button class="btn one">Hover me</button>
    <button  class="btn two">Hover me</button>
    <button  class="btn three">Hover me</button>
  </div>
</body>
</html>