66 lines
1.5 KiB
CSS
66 lines
1.5 KiB
CSS
:root {
|
|
--bg-color: #303030; /*Ez a pulse háttérszíne, a canvasét jsben kell megváltoztatni */
|
|
--pulse-color: #AAAAAA;
|
|
}
|
|
|
|
.simulationContainer {
|
|
transform: matrix(0.87,-0.50,0.93,0.62,0,0);
|
|
-ms-transform: matrix(0.87,-0.50,0.93,0.62,0,0);
|
|
-webkit-transform: matrix(0.87,-0.50,0.93,0.62,0,0);
|
|
|
|
margin: 2em calc((50% - 350px) / 2);
|
|
}
|
|
|
|
.simulationContainer > .passedCarCount {
|
|
font-size: 2.5em;
|
|
|
|
width: 90%;
|
|
margin-top: 0.33em;
|
|
text-align: right;
|
|
|
|
text-shadow: -10px 10px 5px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.simulationContainer > canvas {
|
|
background: linear-gradient(270deg, var(--bg-color) 0%, var(--bg-color) 40%, var(--pulse-color) 50%, var(--bg-color) 60%, var(--bg-color) 100%);
|
|
background-size: 600% 600%;
|
|
-webkit-animation: pulsing 10s ease infinite;
|
|
-moz-animation: pulsing 10s ease infinite;
|
|
animation: pulsing 10s ease infinite;
|
|
|
|
box-shadow: -15px 10px 5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
@-webkit-keyframes pulsing {
|
|
0% {
|
|
background-position: 0% 51%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 51%;
|
|
}
|
|
}
|
|
@-moz-keyframes pulsing {
|
|
0% {
|
|
background-position: 0% 51%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 51%;
|
|
}
|
|
}
|
|
@keyframes pulsing {
|
|
0% {
|
|
background-position: 0% 51%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 51%;
|
|
}
|
|
}
|