328 lines
8.4 KiB
CSS
328 lines
8.4 KiB
CSS
/* text */
|
|
#banner-homoween-title.life > tspan {
|
|
opacity: 1;
|
|
}
|
|
#banner-homoween-title {
|
|
text-shadow: 0 4px 10px #ff000060;
|
|
}
|
|
#banner-homoween-title.life > #banner-homoween-title {
|
|
animation: blinker 0.5s forwards;
|
|
}
|
|
@media (max-width: 767.98px) {
|
|
#banner-homoween-title {
|
|
transform: scale(1.4) translate(-90px, -120px);
|
|
animation:none !important;
|
|
}
|
|
#banner-homoween-presenting {
|
|
transform: scale(1.4) translate(-90px, -120px);
|
|
}
|
|
#banner-homoween-bats {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
0% {
|
|
transform: translateY(0px);
|
|
}
|
|
50% {
|
|
transform: translateY(-6px);
|
|
}
|
|
100% {
|
|
transform: translateY(0px);
|
|
}
|
|
}
|
|
@keyframes blinker {
|
|
10% {
|
|
opacity: 0;
|
|
}
|
|
,
|
|
30% {
|
|
opacity: 0.4;
|
|
}
|
|
,
|
|
60% {
|
|
opacity: 0.2;
|
|
}
|
|
,
|
|
85% {
|
|
opacity: 0.5;
|
|
}
|
|
,
|
|
100% {
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
|
|
/*days*/
|
|
:root {
|
|
/*sky*/
|
|
--sky-gradient-day10: radial-gradient(at bottom, #d43a27 25%, #761ab3 100%);
|
|
--sky-gradient-day11: radial-gradient(at bottom, #d43a27 25%, #761ab3 100%);
|
|
--sky-gradient-day12: radial-gradient(at bottom, #bf055c 25%, #6b007d 70%);
|
|
--sky-gradient-day13: radial-gradient(at bottom, #bf055c 25%, #6b007d 70%);
|
|
--sky-gradient-day14: radial-gradient(at bottom, #bf0583 5%, #560272 60%);
|
|
--sky-gradient-day15: radial-gradient(at bottom, #bf0583 5%, #560272 60%);
|
|
--sky-gradient-day16: radial-gradient(at bottom, #930184 -15%, #490272 60%);
|
|
--sky-gradient-day17: radial-gradient(at bottom, #930184 -15%, #490272 60%);
|
|
--sky-gradient-day18: radial-gradient(at bottom, #800073 -55%, #400179 60%);
|
|
--sky-gradient-day19: radial-gradient(at bottom, #800073 -55%, #400179 60%);
|
|
--sky-gradient-day20: radial-gradient(at bottom, #69017a 25%, #390271 70%);
|
|
--sky-gradient-day21: radial-gradient(at bottom, #69017a 25%, #390271 70%);
|
|
--sky-gradient-day22: radial-gradient(at bottom, #69017a 25%, #2d005b 70%);
|
|
--sky-gradient-day23: radial-gradient(at bottom, #69017a 25%, #2d005b 70%);
|
|
--sky-gradient-day24: radial-gradient(at bottom, #af00a6 -20%, #270146 70%);
|
|
--sky-gradient-day25: radial-gradient(at bottom, #af00a6 -20%, #270146 70%);
|
|
--sky-gradient-day26: radial-gradient(at bottom, #69047b -10%, #1e0037 70%);
|
|
--sky-gradient-day27: radial-gradient(at bottom, #69047b -10%, #1e0037 70%);
|
|
--sky-gradient-day28: radial-gradient(at bottom, #59047b 10%, #150026 70%);
|
|
--sky-gradient-day29: radial-gradient(at bottom, #59047b 10%, #150026 70%);
|
|
--sky-gradient-day30: radial-gradient(at bottom, #350249 10%, #150026 70%);
|
|
--sky-gradient-day31: radial-gradient(at bottom, #21002e 10%, #150026 70%);
|
|
|
|
/*moon*/
|
|
--moon-fill-day10: gold;
|
|
--moon-fill-day11: gold;
|
|
--moon-fill-day12: gold;
|
|
--moon-fill-day13: gold;
|
|
--moon-fill-day14: goldenrod;
|
|
--moon-fill-day15: goldenrod;
|
|
--moon-fill-day16: none;
|
|
--moon-fill-day17: none;
|
|
--moon-fill-day18: none;
|
|
--moon-fill-day19: none;
|
|
--moon-fill-day20: #e4e4e4;
|
|
--moon-fill-day21: #e4e4e4;
|
|
--moon-fill-day22: #e4e4e4;
|
|
--moon-fill-day23: #e4e4e4;
|
|
--moon-fill-day24: #e4e4e4;
|
|
--moon-fill-day25: #e4e4e4;
|
|
--moon-fill-day26: #e4e4e4;
|
|
--moon-fill-day27: #e4e4e4;
|
|
--moon-fill-day28: #e4e4e4;
|
|
--moon-fill-day29: #e4e4e4;
|
|
--moon-fill-day30: #e4e4e4;
|
|
--moon-fill-day31: #e4e4e4;
|
|
|
|
--moon-shadow-day10: drop-shadow(0px 0px 20px yellow);
|
|
--moon-shadow-day11: drop-shadow(0px 0px 20px yellow);
|
|
--moon-shadow-day12: drop-shadow(0px 0px 20px yellow);
|
|
--moon-shadow-day13: drop-shadow(0px 0px 20px yellow);
|
|
--moon-shadow-day14: drop-shadow(0px 0px 20px gold);
|
|
--moon-shadow-day15: drop-shadow(0px 0px 20px gold);
|
|
--moon-shadow-day16: none;
|
|
--moon-shadow-day17: none;
|
|
--moon-shadow-day18: none;
|
|
--moon-shadow-day19: none;
|
|
--moon-shadow-day20: drop-shadow(0px 0px 5px #deddcf);
|
|
--moon-shadow-day21: drop-shadow(0px 0px 5px #deddcf);
|
|
--moon-shadow-day22: drop-shadow(0px 0px 10px #deddcf);
|
|
--moon-shadow-day23: drop-shadow(0px 0px 10px #deddcf);
|
|
--moon-shadow-day24: drop-shadow(0px 0px 10px #deddcf);
|
|
--moon-shadow-day25: drop-shadow(0px 0px 10px #deddcf);
|
|
--moon-shadow-day26: drop-shadow(0px 0px 10px #deddcf);
|
|
--moon-shadow-day27: drop-shadow(0px 0px 10px #deddcf);
|
|
--moon-shadow-day28: drop-shadow(0px 0px 10px #deddcf);
|
|
--moon-shadow-day29: drop-shadow(0px 0px 10px #deddcf);
|
|
--moon-shadow-day30: drop-shadow(0px 0px 10px #deddcf);
|
|
--moon-shadow-day31: drop-shadow(0px 0px 10px #deddcf);
|
|
|
|
--moon-position-day10: 303px;
|
|
--moon-position-day11: 303px;
|
|
--moon-position-day12: 308px;
|
|
--moon-position-day13: 308px;
|
|
--moon-position-day14: 320px;
|
|
--moon-position-day15: 320px;
|
|
--moon-position-day16: 350px;
|
|
--moon-position-day17: 350px;
|
|
--moon-position-day18: 350px;
|
|
--moon-position-day19: 350px;
|
|
--moon-position-day20: 322px;
|
|
--moon-position-day21: 322px;
|
|
--moon-position-day22: 312px;
|
|
--moon-position-day23: 312px;
|
|
--moon-position-day24: 308px;
|
|
--moon-position-day25: 308px;
|
|
--moon-position-day26: 303px;
|
|
--moon-position-day27: 303px;
|
|
--moon-position-day28: 300px;
|
|
--moon-position-day29: 300px;
|
|
--moon-position-day30: 300px;
|
|
--moon-position-day31: 300px;
|
|
|
|
/*ground*/
|
|
--ground-shadow-day10: #5818bd;
|
|
--ground-shadow-day11: #5818bd;
|
|
--ground-shadow-day12: #5818bd;
|
|
--ground-shadow-day13: #5818bd;
|
|
--ground-shadow-day14: #5818bd;
|
|
--ground-shadow-day15: #5818bd;
|
|
--ground-shadow-day16: #5818bd;
|
|
--ground-shadow-day17: #5818bd;
|
|
--ground-shadow-day18: #5818bd;
|
|
--ground-shadow-day19: #5818bd;
|
|
--ground-shadow-day20: #5818bd;
|
|
--ground-shadow-day21: #5818bd;
|
|
--ground-shadow-day22: #4e16a6;
|
|
--ground-shadow-day23: #4e16a6;
|
|
--ground-shadow-day24: #51009a;
|
|
--ground-shadow-day25: #51009a;
|
|
--ground-shadow-day26: #4b028c;
|
|
--ground-shadow-day27: #4b028c;
|
|
--ground-shadow-day28: #41017b;
|
|
--ground-shadow-day29: #41017b;
|
|
--ground-shadow-day30: #41017b;
|
|
--ground-shadow-day31: #41017b;
|
|
|
|
--house-shadow-day10: #5818bd;
|
|
--house-shadow-day11: #5818bd;
|
|
--house-shadow-day12: #5818bd;
|
|
--house-shadow-day13: #5818bd;
|
|
--house-shadow-day14: #5818bd;
|
|
--house-shadow-day15: #5818bd;
|
|
--house-shadow-day16: #5818bd;
|
|
--house-shadow-day17: #5818bd;
|
|
--house-shadow-day18: #5818bd;
|
|
--house-shadow-day19: #5818bd;
|
|
--house-shadow-day20: #5818bd;
|
|
--house-shadow-day21: #5818bd;
|
|
--house-shadow-day22: #5818bd;
|
|
--house-shadow-day23: #5818bd;
|
|
--house-shadow-day24: #4a149f;
|
|
--house-shadow-day25: #4a149f;
|
|
--house-shadow-day26: #431290;
|
|
--house-shadow-day27: #431290;
|
|
--house-shadow-day28: #3a1476;
|
|
--house-shadow-day29: #3a1476;
|
|
--house-shadow-day30: #3a1476;
|
|
--house-shadow-day31: #3a1476;
|
|
|
|
--object-fill-day10: #240441;
|
|
--object-fill-day11: #240441;
|
|
--object-fill-day12: #240441;
|
|
--object-fill-day13: #240441;
|
|
--object-fill-day14: #240441;
|
|
--object-fill-day15: #240441;
|
|
--object-fill-day16: #240441;
|
|
--object-fill-day17: #240441;
|
|
--object-fill-day18: #240441;
|
|
--object-fill-day19: #240441;
|
|
--object-fill-day20: #240441;
|
|
--object-fill-day21: #240441;
|
|
--object-fill-day22: #240441;
|
|
--object-fill-day23: #240441;
|
|
--object-fill-day24: #1e0538;
|
|
--object-fill-day25: #1e0538;
|
|
--object-fill-day26: #18042c;
|
|
--object-fill-day27: #18042c;
|
|
--object-fill-day28: #18042c;
|
|
--object-fill-day29: #18042c;
|
|
--object-fill-day30: #18042c;
|
|
--object-fill-day31: #18042c;
|
|
|
|
--star-opacity-day10: 0;
|
|
--star-opacity-day11: 0;
|
|
--star-opacity-day12: 0;
|
|
--star-opacity-day13: 0;
|
|
--star-opacity-day14: 0;
|
|
--star-opacity-day15: 0;
|
|
--star-opacity-day16: 0.2;
|
|
--star-opacity-day17: 0.2;
|
|
--star-opacity-day18: 0.3;
|
|
--star-opacity-day19: 0.3;
|
|
--star-opacity-day20: 0.4;
|
|
--star-opacity-day21: 0.4;
|
|
--star-opacity-day22: 0.5;
|
|
--star-opacity-day23: 0.5;
|
|
--star-opacity-day24: 0.5;
|
|
--star-opacity-day25: 0.5;
|
|
--star-opacity-day26: 0.6;
|
|
--star-opacity-day27: 0.6;
|
|
--star-opacity-day28: 0.7;
|
|
--star-opacity-day29: 0.7;
|
|
--star-opacity-day30: 0.7;
|
|
--star-opacity-day31: 0.7;
|
|
}
|
|
|
|
/* stars */
|
|
.star {
|
|
animation: linear infinite alternate twinkle;
|
|
}
|
|
|
|
.star1 {
|
|
animation-duration: 3s;
|
|
}
|
|
|
|
.star2 {
|
|
animation-duration: 4s;
|
|
}
|
|
|
|
.star3 {
|
|
animation-duration: 3.5s;
|
|
}
|
|
|
|
.star4 {
|
|
animation-duration: 2s;
|
|
}
|
|
|
|
.star5 {
|
|
animation-duration: 4s;
|
|
}
|
|
|
|
.star1 circle {
|
|
r: 0.5px;
|
|
}
|
|
.star2 circle {
|
|
r: 0.75px;
|
|
}
|
|
.star3 circle {
|
|
r: 1.0px;
|
|
}
|
|
.star4 circle {
|
|
r: 1.2px;
|
|
}
|
|
.star5 circle {
|
|
r: 1.5px;
|
|
}
|
|
|
|
@media (max-width: 767.98px) {
|
|
.star {
|
|
animation: none;
|
|
fill-opacity: 0.5;
|
|
}
|
|
.star1 circle {
|
|
r: 1px;
|
|
}
|
|
.star2 circle {
|
|
r: 1.5px;
|
|
}
|
|
.star3 circle {
|
|
r: 2px;
|
|
}
|
|
.star4 circle {
|
|
r: 2px;
|
|
}
|
|
.star5 circle {
|
|
r: 2.5px;
|
|
}
|
|
}
|
|
|
|
@keyframes twinkle {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
#banner-homoween-title {
|
|
animation: float infinite 8s ease-in-out;
|
|
}
|
|
#banner-homoween-title > tspan {
|
|
opacity: 0;
|
|
}
|