113 lines
No EOL
2 KiB
CSS
113 lines
No EOL
2 KiB
CSS
/* Hats */
|
|
|
|
.cap::before {
|
|
content: '';
|
|
pointer-events: none;
|
|
background: url("https://i.ibb.co/QXFgjFm/hat2.png");
|
|
position: absolute;
|
|
top: -10px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 16px;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.santa::before {
|
|
content: '';
|
|
pointer-events: none;
|
|
background: url("https://i.ibb.co/54JCcPC/hat1.png");
|
|
position: absolute;
|
|
top: -10px;
|
|
left: -5px;
|
|
right: 0;
|
|
height: 16px;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
/* Snow caps */
|
|
|
|
.snowcaps::after {
|
|
content: '';
|
|
pointer-events: none;
|
|
background: url("https://i.ibb.co/LN79rp9/Image.png");
|
|
position: absolute;
|
|
bottom: -15px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 23px;
|
|
border-radius: 9999px;
|
|
background-size: contain;
|
|
}
|
|
|
|
/* Snow */
|
|
|
|
.frost {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-shadow: 0 0 200px 10px rgba(255, 255, 255, 0.5) inset;
|
|
pointer-events: none;
|
|
z-index: 1050;
|
|
}
|
|
|
|
/* Lights */
|
|
|
|
@keyframes lights {
|
|
0% {
|
|
/*Two zeros, not one !!*/
|
|
/*[0] is equivalent to [0 50%] and will create a different animation */
|
|
background-position:0 0;
|
|
}
|
|
100% {
|
|
background-position:0 -138px;
|
|
}
|
|
}
|
|
|
|
.lights::after {
|
|
content: '';
|
|
pointer-events: none;
|
|
background: url(https://i.imgur.com/BdGY6tH.png);
|
|
animation: lights 1s infinite steps(2);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 69px;
|
|
}
|
|
|
|
/* Candy Cane */
|
|
|
|
.candycane p {
|
|
--color1: #DC2626;
|
|
--color2: #059669;
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
var(--color1),
|
|
var(--color1) 30px,
|
|
var(--color2) 30px,
|
|
var(--color2) 60px
|
|
);
|
|
background-clip: text;
|
|
color: transparent;
|
|
-webkit-background-clip: text;
|
|
/*animation: 30s linear 0s infinite move;*/
|
|
}
|
|
|
|
.candycane p:hover {
|
|
animation: 30s linear 0s infinite move;
|
|
}
|
|
|
|
@keyframes move {
|
|
from {
|
|
background-position: 0px;
|
|
}
|
|
to {
|
|
background-position: 1000px;
|
|
}
|
|
} |