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

笔记 06 CSS 8种让人眼前一亮的hover效果 冰冻效果

参考原文
MDN linear-gradient
MDN background-size
MDN background-position

冰冻效果

css hover 触发 animation + background-position

目标遮罩方向 从左至右 ->

遮罩渐变 从右至左 <-
背景放大2倍+ 不足三倍
背景方向 从右开始
(相当于-遮罩层移除了可见区)

动画时候背景方向 从左开始
(相当于-从左侧开始画遮罩层)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>冰冻效果</title>
    </head>
  <style>
    #frozen-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

    button {
      border: 0;
      margin: 20px;
      text-transform: uppercase;
      font-size: 20px;
      font-weight: bold;
      padding: 15px 50px;
      border-radius: 50px;
      color: white;
      outline: none;
      position: relative;
    }

    button:before{
      content: '';
      display: block;
      /* CSS linear-gradient() 函数
      用于创建一个表示两种或多种颜色线性渐变的图片。
      其结果属于<gradient>数据类型，
      是一种特别的<image>数据类型。 */
      /* 如同其他gradient函数一般，linear-gradient() 函数没有内在尺寸；
       即，它不具备固有的或首选的尺寸，也不具备首选的比率。
       该函数的具体尺寸将与其适用的元素尺寸匹配。 */
      background: linear-gradient(to left, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 50%);
      /* background-size 设置背景图片大小。
       图片可以保有其原有的尺寸，或者拉伸到新的尺寸，
       或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。 */
      /* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
      /* 第一个值指定图片的宽度，第二个值指定图片的高度 */
      background-size: 210% 100%;
      /* background-position 为每一个背景图片设置初始位置。
       这个位置是相对于由 background-origin 定义的位置图层的。 */
      background-position: right bottom;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      bottom:0;
      right:0;
      left: 0;
      border-radius: 50px;
      transition: all 1s;
      -webkit-transition: all 1s;
    }

    .green {
       background-image: linear-gradient(to right, #25aae1, #40e495);
       box-shadow: 0 4px 15px 0 rgba(49, 196, 190, 0.75);
    }

    .purple {
       background-image: linear-gradient(to right, #6253e1, #852D91);
       box-shadow: 0 4px 15px 0 rgba(236, 116, 149, 0.75);
    }

    .purple:hover:before {
      background-position: left bottom;
    }

    .green:hover:before {
      background-position: left bottom;
    }
  </style>
    <body>
    <div id="frozen-btn">
      <button class="green">Hover me</button>
      <button class="purple">Hover me</button>
    </div>
    </body>
</html>