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 10: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>
