Css学习: 彩色信封效果(backgrond: repeating-linear-gradient)/渡一

一个利用渐变实现的效果

Repeating Linear Gradient

愿你的世界温暖如春旅途上，匆匆，只是不带走一片云彩

css部分

可以想象一下 ps 那个渐变的调整 UI，就可以理解过程了

repeat: 重复的
linear-gradient: 线性渐变
利用 background-size 变化，实现移动效果

background-image: repeating-linear-gradient(
  45deg,
  #e8544d,
  #e8544d 10px,
  #fff 10px,
  #fff 20px,
  #75adf8 20px,
  #75adf8 30px,
  #fff 30px,
  #fff 40px
);

完整demo

<!DOCTYPE html>
<html>
  <head>
    <style>
      .linear-gradient {
        height: 200px;
        padding: 10px;
        transition: 0.3s;
        background-image: repeating-linear-gradient(
          45deg,
          #e8544d,
          #e8544d 10px,
          #fff 10px,
          #fff 20px,
          #75adf8 20px,
          #75adf8 30px,
          #fff 30px,
          #fff 40px
        );
        background-size: 101% 101%;
      }
      .inner {
        background: #fff;
        width: 100%;
        height: 100%;
        position: relative;
      }

      .linear-gradient:hover {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        background-position: 100% 100%;
      }

      .content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 20px;
        font-family: cursive;
      }
    </style>
  </head>
  <body>
    <h4>Repeating Linear Gradient</h4>

    <div class="linear-gradient">
      <div class="inner">
        <div class="content">愿你的世界温暖如春旅途上，匆匆，只是不带走一片云彩</div>
      </div>
    </div>
  </body>
</html>