|
|
| Line 1: |
Line 1: |
| <style>body { | | <h1 style="color:blue;">A Blue Heading</h1> |
| 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; | | <p style="color:red;">A red paragraph.</p> |
| | |
| .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>
| |
