403保护网站服务器,HTML5服务器禁止访问403错误动画

CSS

语言：

CSSSCSS

确定

@import url("https://fonts.googleapis.com/css?family=Bree+Serif");

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300");

html,

body,

div,

span,

applet,

object,

iframe,

h1,

h2,

h3,

h4,

h5,

h6,

p,

blockquote,

pre,

a,

abbr,

acronym,

address,

big,

cite,

code,

del,

dfn,

em,

img,

ins,

kbd,

q,

s,

samp,

small,

strike,

strong,

sub,

sup,

tt,

var,

b,

u,

i,

center,

dl,

dt,

dd,

ol,

ul,

li,

fieldset,

form,

label,

legend,

table,

caption,

tbody,

tfoot,

thead,

tr,

th,

td,

article,

aside,

canvas,

details,

embed,

figure,

figcaption,

footer,

header,

hgroup,

menu,

nav,

output,

ruby,

section,

summary,

time,

mark,

audio,

video {

margin: 0;

padding: 0;

border: 0;

font: inherit;

font-size: 100%;

vertical-align: baseline;

}

html {

line-height: 1;

}

ol,

ul {

list-style: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

caption,

th,

td {

text-align: left;

font-weight: normal;

vertical-align: middle;

}

q,

blockquote {

quotes: none;

}

q:before,

q:after,

blockquote:before,

blockquote:after {

content: "";

content: none;

}

a img {

border: none;

}

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

main,

menu,

nav,

section,

summary {

display: block;

}

html,

body,

main {

height: 100%;

width: 100%;

box-sizing: border-box;

-webkit-overflow-scrolling: touch;

}

body {

font-size: 1em;

line-height: 1.4rem;

color: #ecf0f1;

background-color: #2c3e50;

font-family: 'Open Sans', sans-serif;

}

.accessible-hide {

position: absolute;

height: 0;

width: 0;

overflow: hidden;

}

.flexy-center {

height: 100%;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

}

.svg-icon {

width: 1em;

height: 1em;

fill: #ecf0f1;

}

.svg-icon:nth-of-type(1) {

-webkit-transform: translate(-0.55em);

transform: translate(-0.55em);

}

.svg-icon:nth-of-type(2) {

-webkit-transform: translate(0.55em);

transform: translate(0.55em);

}

.button {

padding: 0.7rem 1.4rem;

border-radius: .2em;

background-color: #27ae60;

margin: 0 1.4rem;

-webkit-transition: all 0.225s ease-in-out;

transition: all 0.225s ease-in-out;

cursor: pointer;

}

.button__container {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

}

.button--disabled {

pointer-events: none;

opacity: .2;

}

.container {

font-size: 3em;

height: .45em;

width: 5em;

margin-top: 7rem;

-webkit-perspective: 1200px;

perspective: 1200px;

position: relative;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: end;

-webkit-align-items: flex-end;

-ms-flex-align: end;

align-items: flex-end;

-webkit-box-pack: justify;

-webkit-justify-content: space-between;

-ms-flex-pack: justify;

justify-content: space-between;

background-image: -webkit-radial-gradient(#ecf0f1 0.015em, rgba(0, 0, 0, 0) 0.02em);

background-image: radial-gradient(#ecf0f1 0.015em, rgba(0, 0, 0, 0) 0.02em);

background-size: .25em .25em;

background-repeat: repeat-x;

background-position: 0 bottom;

-webkit-transition: all 2.7s ease-in-out;

transition: all 2.7s ease-in-out;

}

.container__title {

margin-top: 1em;

font-size: 2em;

opacity: 0;

-webkit-transition: opacity 0.225s ease-in-out;

transition: opacity 0.225s ease-in-out;

}

.container__title--anim {

opacity: 1;

}

.container__anim {

background-position: 200% bottom;

}

.container:before {

content: '';

height: 1em;

width: calc(100% + .15em);

position: absolute;

left: -.075em;

bottom: -.48em;

box-sizing: border-box;

padding-bottom: .25em;

border-radius: 0 0 .25em .25em;

border: .05em solid white;

border-bottom-color: transparent;

border-top-color: transparent;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;

-webkit-transform-origin: 50% 0;

transform-origin: 50% 0;

-webkit-transform: rotateX(63deg);

transform: rotateX(63deg);

}

.container__jump {

background-image: -webkit-radial-gradient(#e74c3c 0.015em, rgba(0, 0, 0, 0) 0.02em);

background-image: radial-gradient(#e74c3c 0.015em, rgba(0, 0, 0, 0) 0.02em);

}

.container__jump .response {

-webkit-animation: responseMove 1.125s ease-out forwards;

animation: responseMove 1.125s ease-out forwards;

}

.container__jump .response .item {

opacity: 1;

-webkit-animation: 0.9s linear forwards;

animation: 0.9s linear forwards;

-webkit-animation-delay: 0.1125s;

animation-delay: 0.1125s;

}

.container__jump .response .item:nth-child(1) {

-webkit-animation-name: jump4;

animation-name: jump4;

}

.container__jump .response .item:nth-child(2) {

-webkit-animation-name: jump0;

animation-name: jump0;

}

.container__jump .response .item:nth-child(3) {

-webkit-animation-name: jump3;

animation-name: jump3;

}

.container__jump .response .sparks {

-webkit-transform: scale(2);

transform: scale(2);

opacity: 0;

background-color: #e74c3c;

}

.container__jump .server {

fill: #e74c3c;

}

.container__jump:before {

border-right-color: #e74c3c;

}

.container .svg-icon {

position: absolute;

bottom: 100%;

}

.container .svg-icon:nth-of-type(1) {

left: 0;

}

.container .svg-icon:nth-of-type(2) {

right: 0;

}

.response {

position: absolute;

right: -.5em;

top: -1em;

}

.response .item {

opacity: 0;

line-height: 1em;

font-family: 'Bree Serif', serif;

}

.sparks {

width: 1em;

height: 1em;

border-radius: 1em;

background-color: white;

-webkit-transform: scale(0);

transform: scale(0);

-webkit-transition: all 0.225s ease-out;

transition: all 0.225s ease-out;

}

.item {

top: 0;

right: 0;

position: absolute;

width: 0.7em;

z-index: 2;

text-align: center;

-webkit-transition: all 0.45s ease-out;

transition: all 0.45s ease-out;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

line-height: .87em;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

}

@-webkit-keyframes responseMove {

100% {

-webkit-transform: translate(-2.5em, 0.7em) scale(1.5);

transform: translate(-2.5em, 0.7em) scale(1.5);

}

}

@keyframes responseMove {

100% {

-webkit-transform: translate(-2.5em, 0.7em) scale(1.5);

transform: translate(-2.5em, 0.7em) scale(1.5);

}

}

@-webkit-keyframes jump4 {

0% {

-webkit-transform: translateY(0) translateX(0) rotate(0);

transform: translateY(0) translateX(0) rotate(0);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

50% {

-webkit-transform: translateY(-3em) translateX(-0.35em) rotate(-340deg);

transform: translateY(-3em) translateX(-0.35em) rotate(-340deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

70% {

-webkit-transform: translateY(0) translateX(-0.45em) rotate(-360deg);

transform: translateY(0) translateX(-0.45em) rotate(-360deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

80% {

-webkit-transform: translateY(-1em) translateX(-0.55em) rotate(-360deg);

transform: translateY(-1em) translateX(-0.55em) rotate(-360deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

90%,

100% {

-webkit-transform: translateY(0) translateX(-0.65em) rotate(-360deg);

transform: translateY(0) translateX(-0.65em) rotate(-360deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

color: #e74c3c;

}

}

@keyframes jump4 {

0% {

-webkit-transform: translateY(0) translateX(0) rotate(0);

transform: translateY(0) translateX(0) rotate(0);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

50% {

-webkit-transform: translateY(-3em) translateX(-0.35em) rotate(-340deg);

transform: translateY(-3em) translateX(-0.35em) rotate(-340deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

70% {

-webkit-transform: translateY(0) translateX(-0.45em) rotate(-360deg);

transform: translateY(0) translateX(-0.45em) rotate(-360deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

80% {

-webkit-transform: translateY(-1em) translateX(-0.55em) rotate(-360deg);

transform: translateY(-1em) translateX(-0.55em) rotate(-360deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

90%,

100% {

-webkit-transform: translateY(0) translateX(-0.65em) rotate(-360deg);

transform: translateY(0) translateX(-0.65em) rotate(-360deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

color: #e74c3c;

}

}

@-webkit-keyframes jump0 {

0% {

-webkit-transform: translateY(0) translateX(0) rotate(0);

transform: translateY(0) translateX(0) rotate(0);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

50% {

-webkit-transform: translateY(-2em) translateX(-0.1em) rotate(-700deg);

transform: translateY(-2em) translateX(-0.1em) rotate(-700deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

70% {

-webkit-transform: translateY(0) translateX(-0.1em) rotate(-720deg);

transform: translateY(0) translateX(-0.1em) rotate(-720deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

80% {

-webkit-transform: translateY(-0.5em) translateX(-0.1em) rotate(-720deg);

transform: translateY(-0.5em) translateX(-0.1em) rotate(-720deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

90%,

100% {

-webkit-transform: translateY(0) translateX(-0.1em) rotate(-720deg);

transform: translateY(0) translateX(-0.1em) rotate(-720deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

color: #e74c3c;

}

}

@keyframes jump0 {

0% {

-webkit-transform: translateY(0) translateX(0) rotate(0);

transform: translateY(0) translateX(0) rotate(0);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

50% {

-webkit-transform: translateY(-2em) translateX(-0.1em) rotate(-700deg);

transform: translateY(-2em) translateX(-0.1em) rotate(-700deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

70% {

-webkit-transform: translateY(0) translateX(-0.1em) rotate(-720deg);

transform: translateY(0) translateX(-0.1em) rotate(-720deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

80% {

-webkit-transform: translateY(-0.5em) translateX(-0.1em) rotate(-720deg);

transform: translateY(-0.5em) translateX(-0.1em) rotate(-720deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

90%,

100% {

-webkit-transform: translateY(0) translateX(-0.1em) rotate(-720deg);

transform: translateY(0) translateX(-0.1em) rotate(-720deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

color: #e74c3c;

}

}

@-webkit-keyframes jump3 {

0% {

-webkit-transform: translateY(0) translateX(0) rotate(0);

transform: translateY(0) translateX(0) rotate(0);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

50% {

-webkit-transform: translateY(-3em) translateX(0.1em) rotate(-340deg);

transform: translateY(-3em) translateX(0.1em) rotate(-340deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

70% {

-webkit-transform: translateY(0) translateX(0.2em) rotate(-360deg);

transform: translateY(0) translateX(0.2em) rotate(-360deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

80% {

-webkit-transform: translateY(-1em) translateX(0.3em) rotate(-360deg);

transform: translateY(-1em) translateX(0.3em) rotate(-360deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

90%,

100% {

-webkit-transform: translateY(0) translateX(0.4em) rotate(-360deg);

transform: translateY(0) translateX(0.4em) rotate(-360deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

color: #e74c3c;

}

}

@keyframes jump3 {

0% {

-webkit-transform: translateY(0) translateX(0) rotate(0);

transform: translateY(0) translateX(0) rotate(0);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

50% {

-webkit-transform: translateY(-3em) translateX(0.1em) rotate(-340deg);

transform: translateY(-3em) translateX(0.1em) rotate(-340deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

70% {

-webkit-transform: translateY(0) translateX(0.2em) rotate(-360deg);

transform: translateY(0) translateX(0.2em) rotate(-360deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

}

80% {

-webkit-transform: translateY(-1em) translateX(0.3em) rotate(-360deg);

transform: translateY(-1em) translateX(0.3em) rotate(-360deg);

-webkit-animation-timing-function: ease-in;

animation-timing-function: ease-in;

}

90%,

100% {

-webkit-transform: translateY(0) translateX(0.4em) rotate(-360deg);

transform: translateY(0) translateX(0.4em) rotate(-360deg);

-webkit-animation-timing-function: ease-out;

animation-timing-function: ease-out;

color: #e74c3c;

}

}