MediaWiki:Welcome.css

display: flex; flex-direction: column; margin-bottom: 15px; height: 392px; }
 * 1) welcome {

color: inherit; text-decoration: none; }
 * 1) welcome a {

/* 第一排：LOGO */ display: flex; justify-content: center; align-items: center; animation-name: shine; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: 1; filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5)); margin-top: 32px; }
 * 1) welcome .ncs-logo {

/* 第二排：資訊、音樂、DJ */ display: flex; justify-content: center; align-items: center; margin-top: 25px; }
 * 1) welcome .icons {

display: flex; flex-direction: column; justify-content: center; align-items: center; border: red 2px solid; border-radius: 5px; width: 110px; height: 110px; margin-left: 10px; margin-right: 10px; background-color: rgba(255,0,0,0.1); animation-name: shine2; animation-timing-function: linear; animation-iteration-count: 1; transition: box-shadow 0.2s ease; }   border: red 2px solid; background-color: rgba(255,0,0,0.1); animation-duration: 2000ms; }   border: #2BD9EC 2px solid; background-color: rgb(43,217,236,0.1); animation-duration: 2200ms; }   border: #12DF7A 2px solid; background-color: rgb(18, 223, 122, 0.1); animation-duration: 2100ms; }
 * 1) welcome .icon {
 * 1) welcome .icons a:nth-child(1) .icon {
 * 1) welcome .icons a:nth-child(2) .icon {
 * 1) welcome .icons a:nth-child(3) .icon {

/* Hover會閃亮 */ box-shadow: 0 0 15px 5px red; transition: box-shadow 0.2s ease; }   box-shadow: 0 0 15px 5px red; }   box-shadow: 0 0 15px 5px #2BD9EC; }   box-shadow: 0 0 15px 5px #12DF7A; }
 * 1) welcome .icon:hover {
 * 1) welcome .icons a:nth-child(1) .icon:hover {
 * 1) welcome .icons a:nth-child(2) .icon:hover {
 * 1) welcome .icons a:nth-child(3) .icon:hover {

/* Hover時icon要變大 */ font-size: 50px; transform: scale(1); transition: transform 0.2s ease; }   transform: scale(1.1); transition: transform 0.2s ease; }
 * 1) welcome .icon span:nth-child(1) {
 * 1) welcome .icon:hover span:nth-child(1) {

@keyframes shine { 0% {       opacity: 0; }   30% {        opacity: 0; }   35% {        opacity: 1; }   40% {        opacity: 0; }   50% {        opacity: 0; }   55% {        opacity: 1; }   70% {        opacity: 0; }   90% {        opacity: 0; }   92% {        opacity: 1; }   94% {        opacity: 0; }   96% {        opacity: 1; }   98% {        opacity: 0; }   100% {        opacity: 1; } }

@keyframes shine2 { 0% {       opacity: 0; }   68% {        opacity: 0; }   70% {        opacity: 1; }   72% {        opacity: 0; }   84% {        opacity: 0; }   87% {        opacity: 1; }   90% {        opacity: 0; }   92% {        opacity: 1; }   95% {        opacity: 0; }   98% {        opacity: 1; }   100% {        opacity: 1; } }

/* 第三排：NCS WIKI資訊 */ display: flex; justify-content: center; align-items: center; margin-top: 20px; }   height: 145px; width: 500px; border: orangered 0.2px solid; background-color: rgb(255,69,0,0.1); border-radius: 5px;
 * 1) welcome .info {
 * 1) welcome .statistics {

animation-name: extract; animation-duration: 4s; animation-iteration-count: 1; animation-timing-function: ease; }

animation-name: showup; animation-duration: 5s; animation-iteration-count: 1; animation-timing-function: ease; }
 * 1) welcome .stat-title {

display: flex; justify-content: space-evenly; align-items: center; }
 * 1) welcome .data {

display: flex; flex-direction: column; justify-content: center; align-items: center;
 * 1) welcome .datum {

animation-name: showup; animation-duration: 5000ms; animation-iteration-count: 1; animation-timing-function: ease; }   animation-duration: 5000ms; }   animation-duration: 5100ms; }   animation-duration: 5200ms; }
 * 1) welcome .datum:nth-child(1) {
 * 1) welcome .datum:nth-child(2) {
 * 1) welcome .datum:nth-child(3) {

font-size: 50px; }
 * 1) welcome .datum-number {

@keyframes extract { 0% {       border-color: transparent; height: 0px; width: 0px; }   60% {        border-color: transparent; height: 0px; width: 0px; }

62% {       border-color: orangered; height: 0px; width: 5px; }

80% {       height: 145px; width: 5px; }

100% {       height: 145px; width: 500px; } }

@keyframes showup { 0% {       opacity: 0; }   80% {        opacity: 0; }   100% {        opacity: 1; } }