动画效果——按钮触摸效果

效果一

效果展示：

该动画原理是
先将按钮设置溢出隐藏，鼠标移入时，将左边隐藏的蒙版从左到右移动，并添加盒子阴影实现

设置按钮样式

设置按钮样式以及溢出隐藏

.btn {
  position: relative;
  color: #fff;
  font-size: 1rem;
  padding: 1rem 3rem;
  background-color: transparent;
  border: 1px solid hsl(190, 100%, 41%);
  outline: transparent; // 轮廓 相比于border不占空间
  overflow: hidden;	// 溢出隐藏
  cursor: pointer;
  user-select: none; // 控制btn中文字不被选中
  white-space: nowrap;
  transition: 0.25s;
}

设置伪元素样式

设置伪元素样式并移动到左侧

.btn::before {
  position: absolute;
  content: '';
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateX(-100%);
  background: linear-gradient(120deg, transparent, rgba(0, 174, 209, .5), transparent);
  transition: 0.5s;
}

设置动画

.btn:hover {
  box-shadow: 0 0 20px 10px rgba(0, 174, 209, 0.5);

  &::before {
    transform: translateX(100%);
  }
}

案例

<button class="btn">hover me</button>

.btn {
  position: relative;
  color: #fff;
  font-size: 1rem;
  padding: 1rem 3rem;
  background-color: transparent;
  border: 1px solid hsl(190, 100%, 41%);
  outline: transparent; // 轮廓 相比于border不占空间
  overflow: hidden;
  cursor: pointer;
  user-select: none;  // 控制页面中文字不被选中
  white-space: nowrap;
  transition: 0.25s;
  &:hover {
    box-shadow: 0 0 20px 10px rgba(0, 174, 209, 0.5);
    &::before {
      transform: translateX(100%);
    }
  }
  &::before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateX(-100%);
    background: linear-gradient(120deg, transparent, rgba(0, 174, 209, .5), transparent);
    transition: 0.6s;
  }
}

效果二：发光渐变按钮

效果展示：

该动画原理是
先设置背景渐变，再通过设置背景尺寸的过渡实现背景渐变的动画

设置背景渐变

// 测试
.btn {
  ...
  background: linear-gradient(90deg, #00dbde, #fc00ff, #00dbde);
  background-size: 300%;
  transition: .6s;
  &:hover {
    background-size: 100%;
  }
}

.btn {
  ...
  background: linear-gradient(90deg, #00dbde, #fc00ff, #00dbde);
  background-size: 300%;
  animation: glow 8s linear infinite;
}

@keyframes glow {
  to {
    background-position: 300%;
  }
}

设置伪元素样式

设置伪元素样式并移动到左侧

.btn::before {
  position: absolute;
  content: "";
  top: -5px;
  bottom: -5px;
  left: -5px;
  right: -5px;
  z-index: -1;
  border-radius: inherit;
  background: inherit; // 可以顺带继承动画
  background-size: inherit;
  opacity: 0;
  filter: blur(20px);
  transition: 0.5s;
}
.btn:hover {
  &:before {
    opacity: 1;
  }
}

设置动画

@keyframes glow {
  to {
    background-position: 300%;
  }
}

案例

<button class="btn">hover me</button>

.btn {
  position: relative;
  padding: 1rem 3rem;
  font-size: 1.5rem;
  line-height: 1.5;
  color: #fff;
  outline: transparent;
  border: transparent;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  border-radius: 4em;
  background: linear-gradient(90deg, #00dbde, #fc00ff, #00dbde);
  background-size: 300%;
  animation: glow 8s linear infinite;
  z-index: 0; // 避免伪元素移到后面
  &::before {
    position: absolute;
    content: "";
    top: -5px;
    bottom: -5px;
    left: -5px;
    right: -5px;
    z-index: -1;
    border-radius: inherit;
    background: inherit;  // 可以顺带继承动画
    background-size: inherit;
    opacity: 0;
    filter: blur(20px);
    transition: 0.5s;
  }
  &:hover {
    &:before {
      opacity: 1;
    }
  }
}

@keyframes glow {
  to {
    background-position: 300%;
  }
}