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.
91 lines
2.3 KiB
91 lines
2.3 KiB
1 week ago
|
@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>
|