SCSS
@import url(http://fonts.googleapis.com/css?family=Creepster);
*, *:before, *:after {
margin:0;
padding:0;
box-sizing:border-box;
}
html, body {height:100%;}
body {
position:relative;
background-color:#333;
text-align:center;
font-family: 'Creepster', cursive;
transform-style:preserve-3d;
perspective:400px;
&:after {
content:'';
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/noise--4.svg");
background-size:200%;
background-position:0 0;
animation: noise 1s steps(60) infinite;
}
}
@keyframes noise {
@for $i from 1 through 100 {
#{$i * 1%} {background-position:random(10)*10% random(10)*10%;}
}
}
.magicMiddle {
position:relative;
display:inline-block;
top:30vh;
transform:translateY(-50%) rotateX(-15deg) rotateY(30deg);
h1 {
font-size:10vw;
color:white;
animation:film 1s steps(20) infinite;
}
}
@keyframes film {
@for $i from 1 through 20 {
#{$i * 5%} {transform:translateX(random(10)*1px) translateY(random(15)*1%);}
}
}
