CSS小技巧Warning样式
2019-11-04 本文已影响0人
风凌摆渡人
记录CSS学习路上的点点滴滴！
效果
效果图
主要知识点.
- clip:rect(0px 0px 0px 0px)随机剪切然后加上阴影效果，实现页面跳动。
- content: 定义显示在该选择器之前或之后的选择器的属性
- css动画
- 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;
}
