CSS小技巧Warning样式

记录CSS学习路上的点点滴滴！

效果

效果图

主要知识点.

1. clip:rect(0px 0px 0px 0px)随机剪切然后加上阴影效果，实现页面跳动。
2. content: 定义显示在该选择器之前或之后的选择器的属性
3. css动画
4. scss 数学运算

代码

<div class="warning"
         data-text="WARNING">WARNING</div>

.bg {
  background: black;
  height: 100vh;
  font-family: "Varela", sans-serif;
}

.warning {
  color: red;
  font-size: 100px;
  position: relative;
  width: 400px;
  margin: 0 auto;
}
@keyframes noise-anim {
  $steps: 20;
  @for $i from 0 through $steps {
    #{percentage($i*(1/$steps))} {
      clip: rect(random(100) + px, 9999px, random(100) + px, 0);
    }
  }
}
.warning:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 blue;
  top: 0;
  color: black;
  background: black;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
  $steps: 20;
  @for $i from 0 through $steps {
    #{percentage($i*(1/$steps))} {
      clip: rect(random(100) + px, 9999px, random(100) + px, 0);
    }
  }
}
.warning:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 yellow;
  top: 0;
  color: black;
  background: black;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
}

饮水思源

• 12 个令人惊叹的 CSS 项目
• 参考项目
• clip 的学习使用
• CSS content 属性
• sass中文文档