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