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