html动画UI,CSS3 动画形式的404报错页面UI模板

CSS

语言：

CSSSCSS

确定

body,

html {

height: 100%;

}

body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

margin: 0;

padding: 0;

background-color: #446072;

font-family: monospace;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

overflow: hidden;

}

.shelf {

position: relative;

width: 30rem;

height: 14rem;

border: 0.5rem solid #374d5b;

border-radius: 0.5rem;

background-color: rgba(255, 255, 255, 0.1);

-webkit-perspective: 130rem;

perspective: 130rem;

}

.door {

position: absolute;

width: 14.5rem;

height: 14rem;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

box-sizing: border-box;

padding: 1rem;

background-color: #374d5b;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

}

.door::before {

width: 1.5rem;

height: 1.5rem;

border-radius: 50%;

background-color: rgba(0, 0, 0, 0.1);

content: "";

}

.door.left {

border-radius: 0 0.75rem 0.75rem 0;

-webkit-box-pack: end;

-webkit-justify-content: flex-end;

-ms-flex-pack: end;

justify-content: flex-end;

-webkit-animation: leftDoorOpen 3.5s ease-out forwards 1s, leftDoorFlap 15s linear infinite forwards 9s;

animation: leftDoorOpen 3.5s ease-out forwards 1s, leftDoorFlap 15s linear infinite forwards 9s;

-webkit-transform-origin: 0 0 0;

transform-origin: 0 0 0;

}

.door.right {

right: 0;

border-radius: 0.75rem 0 0 0.75rem;

-webkit-animation: rightDoorOpen 3s ease-out forwards 1.5s, rightDoorFlap 10s linear infinite forwards 8s;

animation: rightDoorOpen 3s ease-out forwards 1.5s, rightDoorFlap 10s linear infinite forwards 8s;

-webkit-transform-origin: 100% 0 0;

transform-origin: 100% 0 0;

}

.book {

position: absolute;

box-sizing: border-box;

border-radius: 0.25rem;

background-color: rgba(255, 255, 255, 0.1);

color: white;

font-size: 1rem;

text-transform: uppercase;

letter-spacing: 0.1rem;

padding: 0.8rem 4rem 0.8rem 2rem;

cursor: pointer;

}

.book.home-page {

-webkit-transform: rotate(-90deg) translate(-12.4rem, 3rem);

transform: rotate(-90deg) translate(-12.4rem, 3rem);

-webkit-transform-origin: 0;

transform-origin: 0;

}

.book.about-us {

-webkit-transform: rotate(-100deg) translate(-13.4rem, 6.1rem);

transform: rotate(-100deg) translate(-13.4rem, 6.1rem);

-webkit-transform-origin: 0;

transform-origin: 0;

}

.book.contact {

right: 0.5rem;

bottom: 0.1rem;

}

.book.not-found {

width: 12rem;

height: 3.5rem;

border: 1px dashed rgba(255, 255, 255, 0.3);

background-color: transparent;

-webkit-transform: rotate(-90deg) translate(-12rem, 13rem) scale(1);

transform: rotate(-90deg) translate(-12rem, 13rem) scale(1);

-webkit-transform-origin: 0;

transform-origin: 0;

cursor: default;

-webkit-animation: bookFadeOut 2s 3s forwards;

animation: bookFadeOut 2s 3s forwards;

}

.book:hover:not(.not-found) {

background-color: rgba(255, 255, 255, 0.2);

}

@-webkit-keyframes leftDoorOpen {

60% {

-webkit-transform: rotateY(-115deg);

transform: rotateY(-115deg)

}

100% {

-webkit-transform: rotateY(-110deg);

transform: rotateY(-110deg)

}

}

@keyframes leftDoorOpen {

60% {

-webkit-transform: rotateY(-115deg);

transform: rotateY(-115deg)

}

100% {

-webkit-transform: rotateY(-110deg);

transform: rotateY(-110deg)

}

}

@-webkit-keyframes rightDoorOpen {

60% {

-webkit-transform: rotateY(125deg);

transform: rotateY(125deg)

}

100% {

-webkit-transform: rotateY(120deg);

transform: rotateY(120deg)

}

}

@keyframes rightDoorOpen {

60% {

-webkit-transform: rotateY(125deg);

transform: rotateY(125deg)

}

100% {

-webkit-transform: rotateY(120deg);

transform: rotateY(120deg)

}

}

@-webkit-keyframes rightDoorFlap {

0% {

-webkit-transform: rotateY(120deg);

transform: rotateY(120deg)

}

5% {

-webkit-transform: rotateY(125deg);

transform: rotateY(125deg)

}

15% {

-webkit-transform: rotateY(117deg);

transform: rotateY(117deg)

}

25% {

-webkit-transform: rotateY(123deg);

transform: rotateY(123deg)

}

30% {

-webkit-transform: rotateY(120deg);

transform: rotateY(120deg)

}

100% {

-webkit-transform: rotateY(120deg);

transform: rotateY(120deg)

}

}

@keyframes rightDoorFlap {

0% {

-webkit-transform: rotateY(120deg);

transform: rotateY(120deg)

}

5% {

-webkit-transform: rotateY(125deg);

transform: rotateY(125deg)

}

15% {

-webkit-transform: rotateY(117deg);

transform: rotateY(117deg)

}

25% {

-webkit-transform: rotateY(123deg);

transform: rotateY(123deg)

}

30% {

-webkit-transform: rotateY(120deg);

transform: rotateY(120deg)

}

100% {

-webkit-transform: rotateY(120deg);

transform: rotateY(120deg)

}

}

@-webkit-keyframes leftDoorFlap {

0% {

-webkit-transform: rotateY(-110deg);

transform: rotateY(-110deg)

}

5% {

-webkit-transform: rotateY(-115deg);

transform: rotateY(-115deg)

}

15% {

-webkit-transform: rotateY(-107deg);

transform: rotateY(-107deg)

}

25% {

-webkit-transform: rotateY(-113deg);

transform: rotateY(-113deg)

}

30% {

-webkit-transform: rotateY(-110deg);

transform: rotateY(-110deg)

}

100% {

-webkit-transform: rotateY(-110deg);

transform: rotateY(-110deg)

}

}

@keyframes leftDoorFlap {

0% {

-webkit-transform: rotateY(-110deg);

transform: rotateY(-110deg)

}

5% {

-webkit-transform: rotateY(-115deg);

transform: rotateY(-115deg)

}

15% {

-webkit-transform: rotateY(-107deg);

transform: rotateY(-107deg)

}

25% {

-webkit-transform: rotateY(-113deg);

transform: rotateY(-113deg)

}

30% {

-webkit-transform: rotateY(-110deg);

transform: rotateY(-110deg)

}

100% {

-webkit-transform: rotateY(-110deg);

transform: rotateY(-110deg)

}

}

/*

@keyframes bookFadeOut {

0% {}

}

*/