Difference between revisions of "User:Yb30"
(Created blank page) |
|||
Line 1: | Line 1: | ||
+ | <style>body { | ||
+ | background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); | ||
+ | height: 100vh; | ||
+ | overflow: hidden; | ||
+ | display: flex; | ||
+ | font-family: 'Anton', sans-serif; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | } | ||
+ | <math>shooting-time: 3000ms; | ||
+ | |||
+ | .night { | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | transform: rotateZ(45deg); | ||
+ | // animation: sky 200000ms linear infinite; | ||
+ | } | ||
+ | |||
+ | .shooting_star { | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | top: 50%; | ||
+ | // width: 100px; | ||
+ | height: 2px; | ||
+ | background: linear-gradient(-45deg, rgba(95, 145, 255, 1), rgba(0, 0, 255, 0)); | ||
+ | border-radius: 999px; | ||
+ | filter: drop-shadow(0 0 6px rgba(105, 155, 255, 1)); | ||
+ | animation: | ||
+ | tail </math>shooting-time ease-in-out infinite, | ||
+ | shooting <math>shooting-time ease-in-out infinite; | ||
+ | |||
+ | &::before { | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | top: calc(50% - 1px); | ||
+ | right: 0; | ||
+ | // width: 30px; | ||
+ | height: 2px; | ||
+ | background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0)); | ||
+ | transform: translateX(50%) rotateZ(45deg); | ||
+ | border-radius: 100%; | ||
+ | animation: shining </math>shooting-time ease-in-out infinite; | ||
+ | } | ||
+ | |||
+ | &::after { | ||
+ | // CodePen Error | ||
+ | // @extend .shooting_star::before; | ||
+ | |||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | top: calc(50% - 1px); | ||
+ | right: 0; | ||
+ | // width: 30px; | ||
+ | height: 2px; | ||
+ | background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0)); | ||
+ | transform: translateX(50%) rotateZ(45deg); | ||
+ | border-radius: 100%; | ||
+ | animation: shining <math>shooting-time ease-in-out infinite; | ||
+ | transform: translateX(50%) rotateZ(-45deg); | ||
+ | } | ||
+ | |||
+ | @for </math>i from 1 through 20 { | ||
+ | &:nth-child(#{<math>i}) { | ||
+ | </math>delay: random(9999) + 0ms; | ||
+ | top: calc(50% - #{random(400) - 200px}); | ||
+ | left: calc(50% - #{random(300) + 0px}); | ||
+ | animation-delay: <math>delay; | ||
+ | // opacity: random(50) / 100 + 0.5; | ||
+ | |||
+ | &::before, | ||
+ | &::after { | ||
+ | animation-delay: </math>delay; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @keyframes tail { | ||
+ | 0% { | ||
+ | width: 0; | ||
+ | } | ||
+ | |||
+ | 30% { | ||
+ | width: 100px; | ||
+ | } | ||
+ | |||
+ | 100% { | ||
+ | width: 0; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @keyframes shining { | ||
+ | 0% { | ||
+ | width: 0; | ||
+ | } | ||
+ | |||
+ | 50% { | ||
+ | width: 30px; | ||
+ | } | ||
+ | |||
+ | 100% { | ||
+ | width: 0; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @keyframes shooting { | ||
+ | 0% { | ||
+ | transform: translateX(0); | ||
+ | } | ||
+ | |||
+ | 100% { | ||
+ | transform: translateX(300px); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @keyframes sky { | ||
+ | 0% { | ||
+ | transform: rotate(45deg); | ||
+ | } | ||
+ | |||
+ | 100% { | ||
+ | transform: rotate(45 + 360deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | </style> |
Revision as of 09:58, 22 February 2022
<style>body {
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); height: 100vh; overflow: hidden; display: flex; font-family: 'Anton', sans-serif; justify-content: center; align-items: center;
}
$shooting-time: 3000ms;
.night {
position: relative; width: 100%; height: 100%; transform: rotateZ(45deg); // animation: sky 200000ms linear infinite;
}
.shooting_star {
position: absolute;
left: 50%;
top: 50%;
// width: 100px;
height: 2px;
background: linear-gradient(-45deg, rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
border-radius: 999px;
filter: drop-shadow(0 0 6px rgba(105, 155, 255, 1));
animation:
tail$ (Error compiling LaTeX. Unknown error_msg)shooting-time ease-in-out infinite,
shooting $shooting-time ease-in-out infinite;
&::before {
content: '';
position: absolute;
top: calc(50% - 1px);
right: 0;
// width: 30px;
height: 2px;
background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
transform: translateX(50%) rotateZ(45deg);
border-radius: 100%;
animation: shining$ (Error compiling LaTeX. Unknown error_msg)shooting-time ease-in-out infinite;
}
&::after { // CodePen Error // @extend .shooting_star::before; content: ; position: absolute; top: calc(50% - 1px); right: 0; // width: 30px; height: 2px; background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0)); transform: translateX(50%) rotateZ(45deg); border-radius: 100%; animation: shining $shooting-time ease-in-out infinite; transform: translateX(50%) rotateZ(-45deg); } @for$ (Error compiling LaTeX. Unknown error_msg)i from 1 through 20 { &:nth-child(#{$i}) {$ (Error compiling LaTeX. Unknown error_msg)delay: random(9999) + 0ms; top: calc(50% - #{random(400) - 200px}); left: calc(50% - #{random(300) + 0px}); animation-delay: $delay; // opacity: random(50) / 100 + 0.5; &::before, &::after { animation-delay:$ (Error compiling LaTeX. Unknown error_msg)delay; } } }
}
@keyframes tail {
0% { width: 0; } 30% { width: 100px; } 100% { width: 0; }
}
@keyframes shining {
0% { width: 0; } 50% { width: 30px; } 100% { width: 0; }
}
@keyframes shooting {
0% { transform: translateX(0); } 100% { transform: translateX(300px); }
}
@keyframes sky {
0% { transform: rotate(45deg); } 100% { transform: rotate(45 + 360deg); }
}
</style>