css3制作动态登陆背景特效

        html {
  font-size: 18px;
}
body {
  color:black;
  font-family: "Questrial", sans-serif;
  background-color: #ffec63;
  background-image: linear-gradient(
      45deg,
      #ffd966 25%,
      transparent 25%,
      transparent 75%,
      #ffd966 75%,
      #ffd966
    ),
    linear-gradient(
      -45deg,
      #ffd966 25%,
      transparent 25%,
      transparent 75%,
      #ffd966 75%,
      #ffd966
    )
    ;
  background-size: 60px 60px;
  background-position: 0 0;
  animation: slide 4s infinite linear;
}

@keyframes slide {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -120px 60px;
  }
}

.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 1.6rem 3rem;
  border: 3px solid black;
  border-radius: 5px;
  background: white;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2);
}
.message {
  font-size:1.1rem;
  margin-bottom: 1.6rem;
  margin-top: 0;
}
.btn {
  color:inherit;
    font-family:inherit;
  font-size: inherit;
  background: white;
  padding: 0.3rem 3.4rem;
  border: 3px solid black;
  margin-right: 2.6rem;
  box-shadow: 0 0 0 black;
  transition: all 0.2s;
}

.btn:last-child {
  margin: 0;
}

.btn:hover {
  box-shadow: 0.4rem 0.4rem 0 black;
  transform: translate(-0.4rem, -0.4rem);
}

.btn:active {
  box-shadow: 0 0 0 black;
  transform: translate(0, 0);
}

.options {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

    <div class="modal">
        <p class="message">Look at this fancy pop-up</p>
        <div class="options">
          <button class="btn">Yes</button>
          <button class="btn">No</button>
        </div>
      </div>

参考于Saijo George设计的页面样式学习

https://codemyui.com/horizontal-parallax-circular-icons/
对于背景图属性中添加

radial-gradient()	用径向渐变创建 "图像"。 (center to edges)
repeating-linear-gradient()	创建重复的线性渐变 "图像"。

　　　　

radial-gradient()

方法中使用到 transparent 属性对于页面的颜色占比位置不透明度

　　

angle	定义渐变的角度方向。从 0deg 到 360deg，默认为 180deg。
side-or-corner	指定线性渐变的起始位置。由两个关键字组成：第一个为指定水平位置(left 或 right)，第二个为指定垂直位置（top 或bottom）。 顺序是随意的，每个关键字都是可选的。
color-stop1, color-stop2,...	指定渐变的起止颜色，由颜色值、停止位置（可选，使用百分比指定）组成。