:root {
--cgreen: hsl(157, 100%, 33%);
--cred: hsl(355, 80%, 50%);
--cyellow: hsl(60, 80%, 60%);
--cbrown: hsl(0, 19%, 35%);
--cgreener: hsl(120, 80%, 25%);
--credder: hsl(0, 80%, 50%);
--cbrowner: hsl(0, 19%, 21%);
--clightred: hsl(355, 80%, 70%);
--clightestred: hsl(355, 90%, 90%);
--clightgreen: hsl(157, 60%, 73%);
--z-mid: 50;
--z-high: 100;
--z-higher: 200;
--z-top: 300;
}
body {
height: 100dvh;
margin: 0;
display: grid;
place-items: center;
background-color: var(--cred);
}
.library {
display: none;
}
.container {
--frame-width: 1.2rem;
--width: 300px;
display: grid;
grid-template-columns: 1fr 1fr 2fr 1fr 1fr;
grid-template-rows: repeat(7, 50px) 1fr;
width: var(--width);
height: calc(var(--width) * 1.5);
margin: 1rem 0;
overflow: hidden;
background-color: white;
border-style: solid;
border-width: var(--frame-width);
border-block-start-color: hsl(0, 0%, 95%);
border-block-end-color: hsl(0, 0%, 86%);
border-inline-start-color: hsl(0, 0%, 88%);
border-inline-end-color: hsl(0, 0%, 90%);
box-shadow: 0 14px 8px -4px rgba(0, 0, 0, 0.5),
8px 24px 10px -4px rgba(0, 0, 0, 0.2), 0 0 4px 2px rgba(0, 0, 0, 0.2),
0 0 12px 4px rgba(0, 0, 0, 0.1);
}
.candy-cane {
--size: 6%;
grid-row: 1 / span 2;
background: repeating-linear-gradient(
-53deg,
white 0 var(--size),
var(--cred) var(--size) calc(var(--size) * 2)
);
height: 200%;
animation: rolling-cane 1s linear infinite;
}
@keyframes rolling-cane {
to {
transform: translateY(-50%);
}
}
.stripes-horizontal-green-red {
--size: 10%;
background: repeating-linear-gradient(
0,
var(--cgreen) 0 var(--size),
var(--cred) var(--size) calc(var(--size) * 2)
);
height: 160%;
grid-row: 1 / span 2;
grid-column: 3 / span 2;
animation: rolling-stripe 0.4s linear infinite;
}
@keyframes rolling-stripe {
to {
transform: translateY(-20%);
}
}
.white-ball {
grid-column: 2;
grid-row: 1;
background-color: red;
position: relative;
}
.white-ball::after {
content: "";
--size: 35%;
display: block;
position: relative;
top: calc((100% - var(--size)) / 2);
left: calc((100% - var(--size)) / 2);
border-radius: 50%;
background-color: whitesmoke;
width: var(--size);
height: var(--size);
animation: expanding 0.75s infinite alternate;
animation-timing-function: ease-in-out;
transform-origin: 50%;
}
@keyframes expanding {
to {
transform: scale(2);
}
}
.rhombus-green {
grid-row: 2;
grid-column: 2;
fill: var(--cgreener);
animation: spinning 2s linear infinite;
transform-origin: center;
}
@keyframes spinning {
to {
transform: rotate(360deg);
}
}
.snowflake {
background-color: var(--cred);
grid-row: 2;
grid-column: 5;
}
.flake {
fill: white;
transform-origin: 50%;
animation: drift 2s infinite;
}
@keyframes drift {
from {
transform: scale(0.7) translate(0px, -100px);
}
20% {
transform: scale(0.7) translate(-10px, 0px);
}
40% {
transform: scale(0.7) translate(0px, 100px);
}
60% {
transform: scale(0.7) translate(10px, 200px);
}
80% {
transform: scale(0.7) translate(0px, 300px);
}
100% {
transform: scale(0.7) translate(-10px, 400px);
}
}
.star {
grid-row: 5;
grid-column: 4;
background-color: var(--cgreen);
z-index: var(--z-mid);
}
.star path {
transform-origin: center;
transform: scale(0);
animation: starry 1s infinite;
}
@keyframes starry {
to {
transform: scale(1) rotate(1turn);
}
}
.dancing-balls {
grid-row: 5;
grid-column: 5;
background-color: white;
position: relative;
}
.dancing-balls::before,
.dancing-balls::after {
content: "";
position: absolute;
display: block;
border-radius: 50%;
width: 65%;
height: 65%;
left: 25%;
top: 17.5%;
background-color: var(--cred);
transform: translateX(-200%);
animation: dancing-ball 1.25s infinite;
animation-timing-function: cubic-bezier(0.2, 0.67, 0.94, 0.6);
}
@keyframes dancing-ball {
to {
transform: translateX(200%);
}
}
.dancing-balls::after {
animation-delay: 0.6s;
}
.dancing-balls-reverse {
grid-row: 6;
grid-column: 5;
}
@keyframes dancing-ball-reverse {
to {
transform: translateX(-200%);
}
}
.dancing-balls-reverse::before,
.dancing-balls-reverse::after {
transform: translateX(200%);
animation: dancing-ball-reverse 1.25s infinite;
animation-timing-function: cubic-bezier(0.2, 0.67, 0.94, 0.6);
}
.dancing-balls-reverse::after {
animation-delay: 0.6s;
}
.polka-dots {
z-index: var(--z-mid);
grid-row: 3;
grid-column: 1 / -1;
width: 200%;
height: 100%;
transform: translateX(-50%);
animation: polka-move 1.5s infinite linear;
}
@keyframes polka-move {
to {
transform: translateX(0%);
}
}
.pacman {
grid-row: 4;
grid-column: 1;
z-index: var(--z-high);
align-self: center;
}
.pacman .mouth {
animation: chew 0.25s linear infinite alternate;
transform-origin: 0 50%;
}
@keyframes chew {
to {
transform: scaleY(0.5);
}
}
.pudding {
grid-row: 4;
grid-column: 2 / -1;
background-color: var(--cbrown);
z-index: var(--z-mid);
width: 200%;
animation: gobble-pudding 1.25s infinite linear;
}
@keyframes gobble-pudding {
to {
transform: translateX(-50%);
}
}
/* https://css-tricks.com/how-to-create-wavy-shapes-patterns-in-css/ */
.pudding::after {
content: "";
display: block;
position: relative;
width: 100%;
height: 100%;
--mask: radial-gradient(10.2px at 50% calc(100% - 12px), #000 99%, #0000 101%)
calc(50% - 20px) 0/40px 100%,
radial-gradient(10.2px at 50% calc(100% + 2px), #0000 99%, #000 101%) 50%
calc(100% - 10px) / 40px 100% repeat-x;
-webkit-mask: var(--mask);
mask: var(--mask);
background-color: white;
}
.mistletoe {
grid-row: 5;
grid-column: 1;
background-color: var(--cred);
z-index: 99;
}
.mistletoe .plant {
transform-origin: 50% 50%;
animation: jiggle 0.5s infinite;
animation-direction: alternate-reverse;
animation-timing-function: ease-in-out;
}
@keyframes jiggle {
to {
transform: rotate(8deg);
}
}
.stripes-vertical-green-white {
--size: 0.4rem;
background-image: repeating-linear-gradient(
90deg,
var(--cgreen) 0 var(--size),
white var(--size) calc(var(--size) * 2)
);
grid-row: 5;
grid-column: 1 / span 2;
animation: stripes-vertical-green-white-move 0.5s infinite;
animation-duration: linear;
}
@keyframes stripes-vertical-green-white-move {
to {
transform: translateX(50%);
}
}
.stripes-diagonal-green-greener {
--size: 0.75rem;
background: repeating-linear-gradient(
43deg,
var(--cgreen) 0 var(--size),
var(--cgreener) var(--size) calc(var(--size) * 2)
);
height: 400%;
animation-name: stripes-diagonal-green-greener-move;
animation-timing-function: linear;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes stripes-diagonal-green-greener-move {
to {
transform: translateY(-33.3%);
}
}
.rhombus-red {
grid-row: 1;
grid-column: 5;
}
.rhombus-red use {
transform-origin: center;
animation-name: rhombus-red-grow;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-timing-function: linear;
}
.rhombus-red use:nth-child(1) {
fill: var(--cred);
}
.rhombus-red use:nth-child(2) {
fill: var(--clightred);
transform-origin: center;
transform: scale(0.5);
animation-delay: 0.1s;
}
.rhombus-red use:nth-child(3) {
fill: var(--clightestred);
transform-origin: center;
transform: scale(0.1);
animation-delay: 0.2s;
}
@keyframes rhombus-red-grow {
to {
transform: scale(5);
}
}
.lips {
grid-row: 6 / span 2;
grid-column: 1 / span 2;
background-color: var(--cgreen);
fill: var(--credder);
z-index: var(--z-high);
}
.lips path,
.lips ellipse {
transform-origin: center;
transform: scale(0.25);
animation: kiss 1.5s infinite;
animation-timing-function: ease-in-out;
}
@keyframes kiss {
to {
transform: scale(5);
}
}
.trees {
grid-row: 7;
grid-column: 3 / span 2;
fill: var(--cgreener);
background-color: var(--clightgreen);
width: 300%;
z-index: var(--z-mid);
animation: trees-move 1s infinite;
animation-timing-function: linear;
}
@keyframes trees-move {
to {
transform: translateX(-50%);
}
}
.open-present {
grid-row: 6;
grid-column: 4;
background-color: var(--clightestred);
z-index: var(--z-high);
perspective: 400px;
perspective-origin: center;
position: relative;
}
.open-present::after,
.open-present::before {
content: "";
position: absolute;
width: 30%;
height: 30%;
top: 35%;
left: 35%;
}
.open-present::after {
transform: translateY(10%) rotateX(-180deg);
transform-origin: bottom center;
background-image: linear-gradient(
90deg,
transparent 0 40%,
var(--cgreen) 40% 60%,
transparent 60% 100%
),
linear-gradient(
var(--cred) 0 40%,
var(--cgreen) 40% 60%,
var(--cred) 60% 100%
);
animation: open 1.5s infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
.open-present::before {
background-color: var(--clightred);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2) inset,
0 0 10px rgba(0, 0, 0, 0.1) inset;
}
@keyframes open {
to {
transform: translate(0) rotateX(0);
}
}
.snowflake2 {
grid-row: 8;
grid-column: 1 / span 2;
background-color: var(--cgreener);
z-index: var(--z-high);
height: 100%;
}
.snowflake2 .flake {
fill: white;
}
.snowflake2 .flake:nth-child(odd) {
animation-name: drift2;
}
.snowflake2 .flake:nth-child(even) {
animation-name: drift3;
}
@keyframes drift2 {
from {
transform: scale(0.7) translate(0px, -200px);
}
20% {
transform: scale(0.7) translate(-10px, 0px);
}
40% {
transform: scale(0.7) translate(0px, 150px);
}
60% {
transform: scale(0.7) translate(10px, 350px);
}
80% {
transform: scale(0.7) translate(0px, 500px);
}
100% {
transform: scale(0.7) translate(-10px, 700px);
}
}
@keyframes drift3 {
from {
transform: scale(0.5) translate(0px, -200px);
}
20% {
transform: scale(0.5) translate(-10px, 0px);
}
40% {
transform: scale(0.5) translate(0px, 250px);
}
60% {
transform: scale(0.5) translate(10px, 500px);
}
80% {
transform: scale(0.5) translate(0px, 700px);
}
100% {
transform: scale(0.5) translate(-10px, 900px);
}
}
.cocktails {
grid-row: 8;
grid-column: 3 / span 3;
background-color: var(--cred);
fill: var(--cgreener);
z-index: var(--z-mid);
}
.cocktails use:nth-child(1),
.cocktails use:nth-child(3) {
animation: cocktails 2s infinite;
transform-origin: center;
}
.cocktails use:nth-child(2) {
animation: cocktails-reverse 2s infinite;
transform-origin: center;
}
@keyframes cocktails {
to {
transform: skewX(90deg);
}
}
@keyframes cocktails-reverse {
to {
transform: skewX(-90deg);
}
}
.furry-lining {
grid-row: 9;
grid-column: 1 / -1;
}
!
