91 lines
1.9 KiB
CSS
91 lines
1.9 KiB
CSS
|
/* LIST OF FURTHER IMPROVEMENTS */
|
||
|
|
/*
|
||
|
|
currently working on :
|
||
|
|
calculation draft for keyframes steps
|
||
|
|
|
||
|
|
$scan-moving-duration: 3s;
|
||
|
|
$scan-moving-delay: 7s;
|
||
|
|
|
||
|
|
total time = 10s (duration + delay)
|
||
|
|
keyframes :
|
||
|
|
0%: wait
|
||
|
|
15%: start moving
|
||
|
|
85%: end moving & start waiting
|
||
|
|
100% : wait
|
||
|
|
|
||
|
|
(the rest later)
|
||
|
|
|
||
|
|
*/
|
||
|
|
/* REGULAR SCANLINES SETTINGS */
|
||
|
|
/* MOVING SCANLINE SETTINGS */
|
||
|
|
/* MIXINS */
|
||
|
|
/* CSS .scanlines CLASS */
|
||
|
|
|
||
|
|
/* .screen::before {
|
||
|
|
background: transparent linear-gradient(to bottom, #85908c 0%, #323431 100%) repeat scroll 0 0;
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
left: 50%;
|
||
|
|
top: 50%;
|
||
|
|
transform: translate3d(-50%, -50%, 0);
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
z-index: -1;
|
||
|
|
} */
|
||
|
|
|
||
|
|
.scanlines {
|
||
|
|
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/86186/crt.png');
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
/* margin-bottom: 20px; */
|
||
|
|
}
|
||
|
|
.scanlines:before, .scanlines:after {
|
||
|
|
display: block;
|
||
|
|
pointer-events: none;
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
.scanlines:before {
|
||
|
|
width: 100%;
|
||
|
|
height: 2px;
|
||
|
|
z-index: 2147483649;
|
||
|
|
background: rgba(0, 0, 0, 0.2);
|
||
|
|
opacity: 0.1;
|
||
|
|
-webkit-animation: scanline 6s linear infinite;
|
||
|
|
animation: scanline 6s linear infinite;
|
||
|
|
}
|
||
|
|
.scanlines:after {
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 2147483648;
|
||
|
|
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.2) 51%);
|
||
|
|
background-size: 100% 4px;
|
||
|
|
-webkit-animation: scanlines 1s steps(60) infinite;
|
||
|
|
animation: scanlines 1s steps(60) infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* ANIMATE UNIQUE SCANLINE */
|
||
|
|
@-webkit-keyframes scanline {
|
||
|
|
0% {
|
||
|
|
transform: translate3d(0, 200000%, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes scanline {
|
||
|
|
0% {
|
||
|
|
transform: translate3d(0, 200000%, 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@-webkit-keyframes scanlines {
|
||
|
|
0% {
|
||
|
|
background-position: 0 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
@keyframes scanlines {
|
||
|
|
0% {
|
||
|
|
background-position: 0 50%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* PRESENTATION STUFF */
|
||
|
|
|