24 lines
925 B
CSS
24 lines
925 B
CSS
|
.screensaver-icon {
|
||
|
|
position: absolute;
|
||
|
|
font-size: 3.8rem;
|
||
|
|
opacity: 0.25;
|
||
|
|
animation: floatIcon linear infinite;
|
||
|
|
pointer-events: none;
|
||
|
|
z-index: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.screensaver-icon.ai { color: #66ccff; animation-duration: 26s; top: 10%; left: 20%; }
|
||
|
|
.screensaver-icon.ethics { color: #ff6666; animation-duration: 24s; top: 60%; left: 75%; }
|
||
|
|
.screensaver-icon.safety { color: #99ff99; animation-duration: 28s; top: 30%; left: 60%; }
|
||
|
|
.screensaver-icon.feedback { color: #ffcc66; animation-duration: 25s; top: 70%; left: 25%; }
|
||
|
|
.screensaver-icon.model { color: #cc99ff; animation-duration: 23s; top: 45%; left: 45%; }
|
||
|
|
|
||
|
|
@keyframes floatIcon {
|
||
|
|
0% { transform: translate(0, 0); }
|
||
|
|
20% { transform: translate(120px, 100px); }
|
||
|
|
40% { transform: translate(-80px, 140px); }
|
||
|
|
60% { transform: translate(150px, -110px); }
|
||
|
|
80% { transform: translate(-100px, -80px); }
|
||
|
|
100% { transform: translate(0, 0); }
|
||
|
|
}
|