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,... | 指定渐变的起止颜色,由颜色值、停止位置(可选,使用百分比指定)组成。 |