Main Page/styles.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 3: | Line 3: | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
. | .text-container { | ||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
transform: translate(-50%, -50%); | |||
} | width: 200px; | ||
height: 50px; | |||
overflow: hidden; | |||
} | |||
.text { | |||
position: absolute; | |||
width: 100%; | |||
height: 100%; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
font-size: 24px; | |||
animation: slide 6s infinite; | |||
} | |||
.text:nth-child(2) { | |||
animation-delay: 2s; | |||
} | |||
. | .text:nth-child(3) { | ||
animation-delay: 4s; | |||
} | } | ||
@keyframes | @keyframes slide { | ||
0%, 33.33% { | |||
opacity: 1; | |||
transform: translateY(0); | |||
} | |||
16.67%, 50% { | |||
opacity: 0; | |||
transform: translateY(-100%); | |||
} | |||
33.33%, 66.67% { | |||
transform: translateX(0); | |||
} | |||
29.17%, 37.5%, | |||
62.5%, 70.83% { | |||
transform: translateX(-5px); | |||
} | |||
33.33%, 66.67% { | |||
transform: translateX(5px); | |||
} | |||
} | } |
Revision as of 23:39, 24 October 2024
.mainpage-title{ font-size:1.6em; font-weight: bold; } .text-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 50px; overflow: hidden; } .text { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 24px; animation: slide 6s infinite; } .text:nth-child(2) { animation-delay: 2s; } .text:nth-child(3) { animation-delay: 4s; } @keyframes slide { 0%, 33.33% { opacity: 1; transform: translateY(0); } 16.67%, 50% { opacity: 0; transform: translateY(-100%); } 33.33%, 66.67% { transform: translateX(0); } 29.17%, 37.5%, 62.5%, 70.83% { transform: translateX(-5px); } 33.33%, 66.67% { transform: translateX(5px); } }