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

笔记 07 CSS 8种让人眼前一亮的hover效果 闪亮效果

参考原文

闪亮效果

css hover 触发 transition 位置变化

<!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>
  #shiny-shadow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #1c2541;
  }

  button {
    border: 2px solid white;
    background: transparent;
    text-transform: uppercase;
    color: white;
    padding: 15px 50px;
    outline: none;
    overflow: hidden;
    position: relative;
  }

  span {
    z-index: 20;
  }

  button:after {
    content: '';
      display: block;
      position: absolute;
      top: -36px;
      left: -100px;
      background: white;
      width: 50px;
      height: 125px;
      opacity: 20%;
      transform: rotate(-45deg);
  }

  button:hover:after {
    left: 120%;
    transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
     -webkit-transition: all 600ms cubic-bezier(0.3, 1, 0.2, 1);
  }
</style>
<body>
  <div id="shiny-shadow">
    <button><span>Hover me</span></button>
  </div>
</body>
</html>