<分区>
我最近一直在 Codepen 上进行试验，我想知道如何自己实现网站上显示的代码。我意识到 Codepen 上使用的大多数格式都不是纯“.css”。我了解到这是一种叫做“.scss”的新东西。我想知道从哪里开始，是否有人可以帮助我理解 .scss 的工作原理。特别是This
body{
background:black;
font-family: 'Varela', sans-serif;
}
.glitch{
color:white;
font-size:0px;
position:relative;
width:268px;
height:654px;
margin:0 auto;
text-indent:-999em;
background:transparent url(http://cdn.hiphopwired.com/wp-content/uploads/2013/09/Vanellope-Von-Scweetz-wreck-it-ralph.png) center center no-repeat;
}
@keyframes noise-anim{
$steps:20;
@for $i from 0 through $steps{
#{percentage($i*(1/$steps))}{
clip:rect(random(654)+px,9999px,random(654)+px,0);
}
}
}
.glitch:after{
content:'';
width:100%;
height:100%;
position:absolute;
left:2px;
top:0;
overflow:hidden;
clip:rect(0,900px,0,0);
animation:noise-anim 2s infinite linear alternate-reverse;
background:inherit;
-webkit-filter: hue-rotate(90deg);
filter: hue-rotate(90deg);
}
@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);
}
}
}
.glitch:before{
content: '';
width:100%;
height:100%;
position:absolute;
left:-2px;
top:0;
overflow:hidden;
clip:rect(0,900px,0,0);
animation:noise-anim-2 3s infinite linear alternate-reverse;
background:inherit;
-webkit-filter: hue-rotate(300deg);
filter: hue-rotate(300deg);
}