|
|
| (42 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| <style>body { | | <center><h1 style="color:lightblue;">YB30's Wiki</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:lightpurple;">Change the user count if you have visited this page for your first time.</p> |
|
| |
|
| .night {
| | <strong style="font-size:10vw">1</strong> |
| 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 {
| | <table width=150 height=150 style=”filter: alpha(opacity=100,finishopacity=8,style=3);”><tr><td align=center bgcolor=deeppink><PRE>Welcome!</PRE></td></tr></table> |
| // 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 {
| | </center> |
| 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> | |
YB30's Wiki
Change the user count if you have visited this page for your first time.
1
