You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
2.3 KiB
90 lines
2.3 KiB
@page "/scott" |
|
|
|
<PageTitle>Scott</PageTitle> |
|
|
|
<div class="scott-wrapper"> |
|
<div class="poo-orbit"> |
|
<div class="poo-spin"> |
|
<div class="poo-wobble"> |
|
<div class="poo-pulse"> |
|
<span class="poo-text">💩POO💩</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<style> |
|
.scott-wrapper { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
height: 70vh; |
|
overflow: hidden; |
|
background: radial-gradient(ellipse at center, #1a0033 0%, #000 100%); |
|
border-radius: 12px; |
|
margin-top: 2rem; |
|
} |
|
|
|
.poo-orbit { |
|
animation: orbit 3s linear infinite; |
|
} |
|
|
|
.poo-spin { |
|
animation: spin 0.4s linear infinite; |
|
} |
|
|
|
.poo-wobble { |
|
animation: wobble 0.7s ease-in-out infinite alternate; |
|
} |
|
|
|
.poo-pulse { |
|
animation: pulse 0.5s ease-in-out infinite alternate; |
|
} |
|
|
|
.poo-text { |
|
font-size: clamp(4rem, 12vw, 9rem); |
|
font-weight: 900; |
|
font-family: Impact, sans-serif; |
|
letter-spacing: 0.05em; |
|
background: linear-gradient( |
|
90deg, |
|
#ff0000, #ff7700, #ffff00, |
|
#00ff00, #0000ff, #8b00ff, |
|
#ff0000 |
|
); |
|
background-size: 300% auto; |
|
-webkit-background-clip: text; |
|
-webkit-text-fill-color: transparent; |
|
background-clip: text; |
|
animation: rainbow 0.8s linear infinite; |
|
filter: drop-shadow(0 0 18px #ff00ff) drop-shadow(0 0 40px #00ffff); |
|
display: inline-block; |
|
text-shadow: none; |
|
} |
|
|
|
@@keyframes orbit { |
|
0% { transform: rotate(0deg) translateX(40px) rotate(0deg); } |
|
100% { transform: rotate(360deg) translateX(40px) rotate(-360deg); } |
|
} |
|
|
|
@@keyframes spin { |
|
from { transform: rotate(0deg); } |
|
to { transform: rotate(360deg); } |
|
} |
|
|
|
@@keyframes wobble { |
|
from { transform: skewX(-15deg) scaleY(0.9); } |
|
to { transform: skewX(15deg) scaleY(1.15); } |
|
} |
|
|
|
@@keyframes pulse { |
|
from { transform: scale(0.85); } |
|
to { transform: scale(1.2); } |
|
} |
|
|
|
@@keyframes rainbow { |
|
0% { background-position: 0% center; } |
|
100% { background-position: 300% center; } |
|
} |
|
</style>
|
|
|