From 12bee6790b32bf93fab33b986c07d9baa537f176 Mon Sep 17 00:00:00 2001
From: Valentin Radulescu 🍟 French Fries
CodePen
+ 🐰🏀 Space Jam Logo
+
diff --git a/space-jam-logo/index.css b/space-jam-logo/index.css new file mode 100644 index 0000000..7a0937e --- /dev/null +++ b/space-jam-logo/index.css @@ -0,0 +1,241 @@ +body { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + background-color: #020107; + background-image: + radial-gradient(circle at 18px 22px, rgba(255, 255, 255, 0.7), transparent 2px), + radial-gradient(circle at 94px 15px, rgba(255, 255, 255, 0.4), transparent 1px), + radial-gradient(circle at 43px 61px, rgba(255, 255, 255, 0.8), transparent 2px), + radial-gradient(circle at 116px 48px, rgba(255, 255, 255, 0.5), transparent 1px), + radial-gradient(circle at 72px 91px, rgba(255, 255, 255, 0.6), transparent 2px), + radial-gradient(circle at 13px 108px, rgba(255, 255, 255, 0.3), transparent 1px), + radial-gradient(circle at 105px 116px, rgba(255, 255, 255, 0.7), transparent 2px), + radial-gradient(circle at 58px 35px, rgba(255, 255, 255, 0.4), transparent 1px), + radial-gradient(circle at 31px 83px, rgba(255, 255, 255, 0.5), transparent 1px), + radial-gradient(circle at 87px 72px, rgba(255, 255, 255, 0.8), transparent 2px); + background-size: 128px 128px; + overflow: hidden; + font-size: 16px; +} + +.space-jam { + position: relative; + width: 720px; + height: 471px; + margin: 0; + font-family: "Luckiest Guy", cursive; + font-weight: normal; + line-height: 1; + text-transform: uppercase; + opacity: 1; + transform: scale(1); + animation: intro-anim 1s forwards reverse; + will-change: transform, opacity; + cursor: pointer; +} + +.space-jam span { + position: absolute; + display: inline-block; + text-shadow: 0.03em 0.03em #11192f; + transform: translateY(0); + animation: letter-anim 0.9s forwards ease-in-out; + will-change: transform; +} + +.space-jam span::after { + content: attr(data-text); + position: absolute; + top: 0; + left: 0; + background: radial-gradient(circle at center, #cede73 0%, #a5cd63 21%, #3ab473 36%, #036ba5 54%); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + -webkit-text-stroke: 4px white; + text-shadow: none; +} + +.space-jam span:nth-of-type(2) { animation-delay: 1.1s; } +.space-jam span:nth-of-type(3) { animation-delay: 1.2s; } +.space-jam span:nth-of-type(4) { animation-delay: 1.3s; } +.space-jam span:nth-of-type(5) { animation-delay: 1.4s; } +.space-jam span:nth-of-type(6) { animation-delay: 1.5s; } +.space-jam span:nth-of-type(7) { animation-delay: 1.6s; } +.space-jam span:nth-of-type(8) { animation-delay: 1.7s; } +.space-jam span:nth-of-type(9) { animation-delay: 1.8s; } + +.space-jam span:first-of-type, +.space-jam span:last-of-type { + animation-delay: 1.6s; +} + +.s-s { + top: 120px; + left: 0; + z-index: 4; + font-size: 160px; +} + +.s-s::after { background-position: 5px 14px; } + +.s-p { + top: 132px; + left: 70px; + z-index: 3; + font-size: 133px; +} + +.s-p::after { background-position: 8px 20px; } + +.s-a { + top: 123px; + left: 116px; + z-index: 2; + font-size: 155px; +} + +.s-a::after { background-position: -20px 25px; } + +.s-c { + top: 138px; + left: 197px; + z-index: 3; + font-size: 140px; +} + +.s-c::after { background-position: 8px 25px; } + +.s-e { + top: 125px; + left: 258px; + z-index: 2; + font-size: 140px; +} + +.s-e::after { background-position: -10px 25px; } + +.j-j { + top: -25px; + left: 228px; + display: inline-block; + font-family: "Paytone One", sans-serif; + font-size: 500px; +} + +.j-j::after { background-position: -20px 25px; } + +.j-j:not(:first-child):not(:last-child) { + clip: rect(388px, 62px, 453px, -10px); +} + +.j-j:last-child { + clip: rect(0, 231px, 224px, 0); +} + +.j-a { + top: 70px; + left: 375px; + z-index: 3; + font-size: 280px; +} + +.j-a::after { background-position: 10px 20px; } + +.j-m { + top: 70px; + left: 505px; + z-index: 2; + font-size: 270px; +} + +.j-m::after { background-position: 30px 25px; } + +.rings { + position: absolute; + top: -10px; + left: 187px; + width: 400px; + height: 400px; + transform: rotate(8deg) skewX(-33deg); +} + +.rings [class^="ring-"] { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.rings [class^="ring-"]::after { + content: ""; + position: absolute; + display: block; + border-radius: 50%; +} + +.ring-1, +.ring-1::after { + width: 400px; + height: 400px; +} + +.ring-1::after { + background: radial-gradient(circle closest-side, transparent 85%, #f6eb16 85%, #ed2224 88%, #35469d 100%); +} + +.ring-2, +.ring-2::after { + width: 340px; + height: 340px; +} + +.ring-2::after { + background: radial-gradient(circle closest-side, transparent 82.353%, #f6eb16 82.353%, #ed2224 88%, #35469d 100%); +} + +.ring-3, +.ring-3::after { + width: 280px; + height: 280px; +} + +.ring-3::after { + background: radial-gradient(circle closest-side, transparent 78.571%, #f6eb16 78.571%, #ed2224 88%, #35469d 100%); +} + +.ring-4, +.ring-4::after { + width: 220px; + height: 220px; +} + +.ring-4::after { + background: radial-gradient(circle closest-side, transparent 72.727%, #f6eb16 72.727%, #ed2224 88%, #35469d 100%); +} + +@keyframes intro-anim { + 100% { + opacity: 0; + transform: scale(3); + } +} + +@keyframes letter-anim { + 0%, 100% { transform: translateY(0); } + 25% { transform: translateY(-10px); } + 60% { transform: translateY(20px); } +} + +iframe { + position: absolute; + top: 0; + left: 0; + width: 1px; + height: 1px; + border: 0; + overflow: hidden; +} + diff --git a/space-jam-logo/index.html b/space-jam-logo/index.html new file mode 100644 index 0000000..cb77c37 --- /dev/null +++ b/space-jam-logo/index.html @@ -0,0 +1,44 @@ + + +
+ + + +
+ + + + + +
+