66 lines
899 B
SCSS
66 lines
899 B
SCSS
.camera {
|
|
position: fixed;
|
|
right: -7px;
|
|
top: 20px;
|
|
width: 70px;
|
|
z-index: 1000;
|
|
pointer-events: none;
|
|
.redLight {
|
|
animation: redLight 1s ease infinite;
|
|
}
|
|
.glare {
|
|
transform-origin: 80% 80%;
|
|
transform-box: fill-box;
|
|
animation: glare 4s linear infinite;
|
|
}
|
|
.outerRing {
|
|
transform-origin: 50% 50%;
|
|
transform-box: fill-box;
|
|
animation: outerRing 4s linear infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes redLight {
|
|
0% {
|
|
fill-opacity: 1;
|
|
}
|
|
50% {
|
|
fill-opacity: .3;
|
|
}
|
|
100% {
|
|
fill-opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes glare {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
opacity: 1;
|
|
}
|
|
20% {
|
|
transform: rotate(90deg);
|
|
opacity: .4;
|
|
}
|
|
50% {
|
|
transform: rotate(-50deg);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
@keyframes outerRing {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
20% {
|
|
transform: scale(.8);
|
|
}
|
|
50% {
|
|
transform: scale(.9);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
} |