:root {
--nusd-speed: 1;
}
/*岛*/
.ic_wrap-box {
}
/*上*/
.ic_wrap-box .ic_top-left-box {
animation: right0 calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
.ic_wrap-box .ic_top-left-box .ic_text {
animation: right0 calc(1.1s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
.ic_wrap-box .ic_h-icon {
animation: ic-right calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
animation-delay: calc(0.3s / var(--nusd-speed));
opacity: 0;
}
.ic_wrap-box .ic_r-icon {
animation: ic-right calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
animation-delay: calc(0.4s / var(--nusd-speed));
opacity: 0;
}
.ic_wrap-box .ic_s-icon {
animation: ic-right calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
animation-delay: calc(0.5s / var(--nusd-speed));
opacity: 0;
}
/*sd*/
.ic_wrap-box .ic_sd-box {
clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 0%,0% 0%);
animation: fadeIn-nu-exit calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
.ic_wrap-box .ic_infobox-1,.ic_wrap-box .ic_infobox-2 {
clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 0%,0% 0%);
animation: fadeIn-nu-env calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
animation-delay: calc(0.1s / var(--nusd-speed));
}
.ic_wrap-box .ic_infobox-3 {
clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 0%,0% 0%);
animation: fadeIn-nu-enti calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
animation-delay: calc(0.2s / var(--nusd-speed));
}
/*字*/
.ic_wrap-box .ic_sd-box .ic_text {
animation: rightin2 calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
.ic_wrap-box .ic_sd-box .ic_sd {
animation: rightin2 calc(1.1s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
.ic_wrap-box .ic_infobox-1 .ic_text {
animation: rightin calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
animation-delay: calc(0.1s / var(--nusd-speed));
}
.ic_wrap-box .ic_infobox-1 .ic_info {
animation: rightin calc(1.1s / var(--nusd-speed) );
animation-fill-mode: forwards;
animation-delay: calc(0.1s / var(--nusd-speed));
}
.ic_wrap-box .ic_infobox-2 .ic_text {
animation: rightin calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
animation-delay: calc(0.2s / var(--nusd-speed));
}
.ic_wrap-box .ic_infobox-2 .ic_info {
animation: rightin calc(1.1s / var(--nusd-speed) );
animation-fill-mode: forwards;
animation-delay: calc(0.2s / var(--nusd-speed));
}
.ic_wrap-box .ic_infobox-3 .ic_text {
animation: rightin calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
animation-delay: calc(0.3s / var(--nusd-speed));
}
.ic_wrap-box .ic_infobox-3 .ic_info {
animation: rightin calc(1.1s / var(--nusd-speed) );
animation-fill-mode: forwards;
animation-delay: calc(0.3s / var(--nusd-speed));
}
/*info*/
.ic_wrap-box .ic_add-h {
clip-path: polygon(50% 0%,50% 0%,50% 100%,50% 100%);
animation: ic-add-h calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
animation-delay: calc(0.3s / var(--nusd-speed));
}
.ic_wrap-box .ic_add-r {
clip-path: polygon(50% 0%,50% 0%,50% 100%,50% 100%);
animation: ic-add-r calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
animation-delay: calc(0.4s / var(--nusd-speed));
}
.ic_wrap-box .ic_add-s {
clip-path: polygon(50% 0%,50% 0%,50% 100%,50% 100%);
animation: ic-add-s calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
animation-delay: calc(0.5s / var(--nusd-speed));
}
/*字*/
.ic_wrap-box .ic_add-h .ic_text {
animation: rightin2 calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
animation-delay: calc(0.5s / var(--nusd-speed));
}
.ic_wrap-box .ic_add-h .ic_info {
animation: rightin calc(1.1s / var(--nusd-speed) );
animation-fill-mode: forwards;
animation-delay: calc(0.5s / var(--nusd-speed));
}
.ic_wrap-box .ic_add-r .ic_text {
animation: rightin2 calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
animation-delay: calc(0.6s / var(--nusd-speed));
}
.ic_wrap-box .ic_add-r .ic_info {
animation: rightin calc(1.1s / var(--nusd-speed) );
animation-fill-mode: forwards;
animation-delay: calc(0.6s / var(--nusd-speed));
}
.ic_wrap-box .ic_add-s .ic_text {
animation: rightin2 calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
animation-delay: calc(0.7s / var(--nusd-speed));
}
.ic_wrap-box .ic_add-s .ic_info {
animation: rightin calc(1.1s / var(--nusd-speed) );
animation-fill-mode: forwards;
animation-delay: calc(0.7s / var(--nusd-speed));
}
.ic_addbox .ic_text,.ic_addbox .ic_info{
opacity: 0;
}
/*bubor*/
.ic_top-box {
animation: ic-border calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
.ic_wrap-box {
border-bottom: rgba(var(--ic_border-color), 0) solid var(--ic_interspace);
animation: ic-border calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
animation-delay: calc(0.7s / var(--nusd-speed));
}
@keyframes ic-right {
0% {
transform: translateX(-1rem);
transform: rotate(30deg);
opacity: 0;
}
80% {
transform: translateX(-1rem);
transform: rotate(30deg);
opacity: 0;
}
100% {
transform: translateX(0);
transform: rotate(0deg);
opacity: 1;
}
}
@keyframes ic-border {
0% {
border-bottom: rgba(var(--ic_border-color), 0) solid var(--ic_interspace);
}
100% {
border-bottom: rgba(var(--ic_border-color), 1) solid var(--ic_interspace);
}
}
@keyframes ic-add-h {
0% {
clip-path: polygon(50% 0%,50% 0%,50% 100%,50% 100%);
background-color: rgba(var(--ic_border-color), 1);
}
100% {
clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
background-color: rgba(var(--ic_add-habitability-bg-color), 1);
}
}
@keyframes ic-add-r {
0% {
clip-path: polygon(50% 0%,50% 0%,50% 100%,50% 100%);
background-color: rgba(var(--ic_border-color), 1);
}
100% {
clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
background-color: rgba(var(--ic_add-resource-bg-color), 1);
}
}
@keyframes ic-add-s {
0% {
clip-path: polygon(50% 0%,50% 0%,50% 100%,50% 100%);
background-color: rgba(var(--ic_border-color), 1);
}
100% {
clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
background-color: rgba(var(--ic_add-signal-bg-color), 1);
}
}
/*nusd*/
/*左*/
.sdnumber p {
opacity: 0;
animation: right0 calc(2s / var(--nusd-speed));
animation-fill-mode: forwards;
}
.sdnumber p {
opacity: 0;
animation: right0 calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
.sdnumber strong {
opacity: 0;
animation: right0 calc(1.2s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
.sdnumber .lines {
opacity: 0;
animation: fadeIn-nu-sd calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
/*右*/
.sd-container .exit {
animation: fadeIn-nu-exit calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
.sd-container .environment {
animation: fadeIn-nu-env calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
.sd-container .entity {
animation: fadeIn-nu-enti calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
.sd-container .syntax .sd{
animation: rightin calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
.sd-container .syntax p strong {
animation: rightin calc(1.05s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
.class.customclass strong::after{
animation: no-opacity calc(1.05s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
/*字*/
/*ex*/
.sd-container .exit strong {
animation: rightin2 calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
.sd-container .exit p span:nth-child(3) {
animation: rightin2 calc(1.1s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
/*ev*/
.sd-container .environment strong {
animation: rightin2 calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
.sd-container .environment p span:nth-child(3) {
animation: rightin2 calc(1.1s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
/*en*/
.sd-container .entity strong {
animation: rightin2 calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
.sd-container .entity p span:nth-child(3) {
animation: rightin2 calc(1.1s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
/*动画*/
@keyframes clip0 {
0% {
clip-path: inset(0 0 100% 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}
@media only screen and (min-width: 1071px) {
.sd-container .border {
animation: border-spin-pc calc(1s / var(--nusd-speed) );
transform-origin: right;
}
@keyframes border-spin-pc {
0%{
clip-path: polygon(0% 0%,0% 0.4rem,0% 0.4rem,0% 0%);
transform: scaleX(5000%);
}
30% {
clip-path: polygon(0% 0%,0% 0.4rem,100% 0.4rem,100% 0%);
transform: scaleX(5000%);
opacity: 1;
}
60% {
clip-path: polygon(0% 0%,0% 100%,100% 100%,100% 0%);
transform: scaleX(5000%);
opacity: 1;
}
100% {
transform: scaleX(100%);
opacity: 1;
}
}
.sdnumber p {
animation-delay: calc((2s / var(--nusd-speed))*0.6);
}
.sdnumber p {
animation-delay: calc((1s / var(--nusd-speed))*0.6);
}
.sdnumber strong {
animation-delay: calc((1.2s / var(--nusd-speed))*0.6);
}
.sdnumber .lines {
animation-delay: calc((1s / var(--nusd-speed))*0.6);
}
}
@media only screen and (min-width: 620px) and (max-width: 1070px) {
.sd-container .border {
animation: border-spin-mo calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
}
@media only screen and (max-width: 620px) {
.sd-container .border {
animation: border-spin-mo calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
.sd-container .exit {
clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 0%,0% 0%);
animation-delay: 0;
animation-fill-mode: forwards;
}
.sd-container .environment {
clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 0%,0% 0%);
animation-delay: calc(0.5s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
.sd-container .entity {
clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 0%,0% 0%);
animation-delay: calc(1s / var(--nusd-speed) );
animation-fill-mode: forwards;
}
}
@keyframes border-spin-mo {
0% {
clip-path: polygon(50% 0%,50% 100%,50% 100%,50% 0%);
}
70% {
clip-path: polygon(50% 0%,50% 100%,50% 100%,50% 0%);
opacity: 1;
}
100% {
clip-path: polygon(0% 0%,0% 100%,100% 100%,100% 0%);
opacity: 1;
}
}
@keyframes rightin {
0% {
transform: translateX(-1rem);
opacity: 0;
}
80% {
transform: translateX(-1rem);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes rightin2 {
0% {
transform: translateY(1rem);
opacity: 0;
}
80% {
transform: translateY(1rem);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes upin0 {
0% {
transform: translateY(1rem);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes right0 {
0% {
transform: translateX(-1rem);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fadeIn-nu-sd {
0% {
clip-path: polygon(0% 0%,0% 0%, -10% 100%,0% 100%);
transform: rotateY(180deg);
}
100% {
clip-path: polygon(0% 0%,200% 0%, 100% 100%,0% 100%);
transform: rotateX(0deg);
opacity: 1;
}
}
@keyframes upin1 {
0% {
transform: translateY(1rem);
opacity: 0;
}
50% {
transform: translateY(1rem);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes upin2 {
0% {
transform: translateY(1rem);
opacity: 0;
}
50% {
transform: translateY(1rem);
opacity: 0;
}
75% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes fadeIn-nu-exit {
0% {
clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 0%,0% 0%);
}
25% {
clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 100%,0% 100%);
}
100% {
clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
}
}
@keyframes fadeIn-nu-env {
0% {
clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 0%,0% 0%);
}
25% {
clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 100%,0% 100%);
}
100% {
clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
}
}
@keyframes fadeIn-nu-enti {
0% {
clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 0%,0% 0%);
}
25% {
clip-path: polygon(0% 0%,0.4rem 0%,0.4rem 100%,0% 100%);
}
100% {
clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
}
}
@keyframes no-opacity {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
100% {
opacity: 1;
}
}