404css样式,404使用CSS视差

css

:root {

--X: 0;

--Y: 0;

}

* {

box-sizing: border-box;

-webkit-animation: fadeIn 0.5s;

animation: fadeIn 0.5s;

}

body {

background-color: #111;

color: #fafafa;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

overflow: hidden;

height: 100vh;

width: 100vw;

}

@media (max-width: 768px) {

h2 {

font-size: 16px;

}

}

h1 {

font-size: 110px;

margin: 4px;

display: inline-block;

}

@media (max-width: 768px) {

h1 {

-webkit-transition: all 0.25s ease 0s;

transition: all 0.25s ease 0s;

font-size: 60px;

}

}

h1:nth-of-type(1) {

color: #f00;

--scaleX: 40;

--scaleY: -40;

--translateX: calc((var(--X)) * var(--scaleX) * 1px);

--translateY: calc((var(--Y)) * var(--scaleY) * 1px);

-webkit-transform: translate(var(--translateX), var(--translateY));

transform: translate(var(--translateX), var(--translateY));

z-index: 3;

}

h1:nth-of-type(2) {

color: #ffa500;

--scaleX: -50;

--scaleY: 50;

--translateX: calc((var(--X)) * var(--scaleX) * 1px);

--translateY: calc((var(--Y)) * var(--scaleY) * 1px);

-webkit-transform: translate(var(--translateX), var(--translateY));

transform: translate(var(--translateX), var(--translateY));

z-index: 2;

}

h1:nth-of-type(3) {

color: #008000;

--scaleX: 30;

--scaleY: 30;

--translateX: calc((var(--X)) * var(--scaleX) * 1px);

--translateY: calc((var(--Y)) * var(--scaleY) * 1px);

-webkit-transform: translate(var(--translateX), var(--translateY));

transform: translate(var(--translateX), var(--translateY));

z-index: 1;

}

h1:nth-of-type(4) {

z-index: 4;

--scaleX: -50;

--scaleY: -50;

--translateX: calc((var(--X)) * var(--scaleX) * 1px);

--translateY: calc((var(--Y)) * var(--scaleY) * 1px);

-webkit-transform: translate(var(--translateX), var(--translateY));

transform: translate(var(--translateX), var(--translateY));

}

@-webkit-keyframes fadeIn {

from {

opacity: 0;

}

to {

opacity: 1;

}

}

@keyframes fadeIn {

from {

opacity: 0;

}

to {

opacity: 1;

}

}