500错误页面效果
代码语言：html
所属分类：布局界面
代码描述：500错误页面效果
代码标签： 效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
.main-error-page {
min-height: 600px;
margin: 0px auto;
width: auto;
max-width: 560px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.error-title {
max-width: 529px;
font-family: Roboto;
font-size: 38px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: #4b4b62;
margin-bottom: 16px;
}
.error-subtitle {
max-width: 568px;
font-family: Roboto;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.31;
letter-spacing: normal;
text-align: center;
color: #4b4b62;
margin-bottom: 24px;
}
svg {
margin-bottom: 16px;
}
.full-torradeira {
}
.torradeira {
}
.pao-atras {
animation: leftright 1s alternate infinite;
transform-origin: center;
}
.pao-frente {
animation: leftright 1s 0.3s alternate infinite;
transform-origin: center;
}
.olho-esq {
animation: sad 2s alternate infinite;
transform-origin: center;
}
.olho-dir {
animation: sad 2s alternate infinite;
transform-origin: center;
}
.boca {
animation: sad 2s alternate infinite;
transform-origin: center;
}
.raios {
-webkit-animation: flicker-4 4s linear infinite both;
animation: flicker-4 4s linear infinite both;
}
.tomada {
-webkit-animation: vibrate-1 3s linear infinite both;
animation: vibrate-1 3s linear infinite both;
}
.fio-500 {
-webkit-animation: vibrate-1 3s linear infinite both;
animation: vibrate-1 3s linear infinite both;
}
.fio{
-webkit-animation: vibrate-1 3s linear infinite both;
animation: vibrate-1 3s linear infinite both;
}
@keyframes scales {
from {
transform: scale(0.98);
}
to {
transform: scale(1);
}
}
/* ----------------------------------------------
* Generated by Animista on 2020-4-1 14:58:16
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation flicker-4
* ----------------------------------------
*/
@-webkit-keyframes flicker-4 {
0%,
100% {
opacity: 1;
}
31.98% {
opacity: 1;
}
32% {
opacity: 0;
}
32.8% {
opacity: 0;
}
32.82% {
opacity: 1;
}
34.98% {
opacity: 1;
}
35% {
opacity: 0;
}
35.7% {
opacity: 0;
}
35.72% {
opacity: 1;
}
36.98% {
opacity: 1;
}
37% {
opacity: 0;
}
37.6% {
opacity: 0;
}
37.62% {
opacity: 1;
}
67.98% {
opacity: 1;
}
68% {
opacity: 0;
}
68.4% {
opacity: 0;
}
68.42% {
opacity: 1;
}
95.98% {
opacity: 1;
}
96% {
opacity: 0;
}
96.7% {
opacity: 0;
}
96.72% {
opacity: 1;
}
98.98% {
opacity: 1;
}
99% {
opacity: 0;
}
99.6% {
opacity: 0;
}
99.62% {
opacity: 1;
}
}
@keyframes flicker-4 {
0%,
100% {
opacity: 1;
}
31.98% {
opacity: 1;
}
32% {
opacity: 0;
}
32.8% {
opacity: 0;
}
32.82% {
opacity: 1;
}
34.98% {
opacity: 1;
}
35% {
opacity: 0;
}
35.7% {
opacity: 0;
}
35.72% {
opacity: 1;
}
36.98% {
opacity: 1;
}
37% {
opacity: 0;
}
37.6% {
opacity: 0;
}
37.62% {
opacity: 1;
}
67.98% {
opacity: 1;
}
68% {
opacity: 0;
}
68.4% {
opacity: 0;
}
68.42% {
opacity: 1;
}
95.98% {
opacity: 1;
}
96% {
opacity: 0;
}
96.7% {
opacity: 0;
}
96.72% {
opacity: 1;
}
98.98% {
opacity: 1;
}
99% {
opacity: 0;
}
99.6% {
opacity: 0;
}
99.62% {
opacity: 1;
}
}
/* ----------------------------------------------
* Generated by Animista on 2020-4-1 15:17:57
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation vibrate-1
* ----------------------------------------
*/
@-webkit-keyframes vibrate-1 {
0% {
-webkit-transform: translate(0);
transform: translate(0);
}
20% {
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}
40% {
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px);
}
60% {
-webkit-transform: translate(2px, 2px);
transform: translate(2px, 2px);
}
80% {
-webkit-transform: translate(2px, -2px);
transform: translate(2px, -2px);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
@keyframes vibrate-1 {
0% {
-webkit-transform: translate(0);
transform: translate(0);
}
20% {
-webkit-transform: translate(-2px, 2px);
transform: translate(-2px, 2px);
}
40% {
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px);
}
60% {
-webkit-transform: translate(2px, 2px);
transform: translate(2px, 2px);
}
80% {
-webkit-transform: translate(2px, -2px);
transform: translate(2px, -2px);
}
100% {
-webkit-transform: translate(0);
transform: translate(0);
}
}
/* ----------------------------------------------
* Generated by Animista on 2020-4-1 15:42:45
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation wobble-ver-right
* ----------------------------------------
*/
@-webkit-keyframes wobble-ver-right {
0%,
100% {
-webkit-transform: translateY(0) rotate(0);
transform: translateY(0) rotate(0);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
15% {
-webkit-transform: translateY(-30px) rotate(6deg);
transform: translateY(-30px) rotate(6deg);
}
30% {
-webkit-transform: translateY(15px) rotate(-6deg);
transform: translateY(15px) rotate(-6deg);
}
45% {
-webkit-transform: translateY(-15px) rotate(3.6deg);
transform: translateY(-15px) rotate(3.6deg);
}
60% {
-webkit-transform: translateY(9px) rotate(-2.4deg);
transform: translateY(9px) rotate(-2.4deg);
}
75% {
-webkit-transform: translateY(-6px) rotate(1.2deg);
transform: translateY(-6px) rotate(1.2deg);
}
}
@keyframes sad {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(10deg) rotateY(5deg);
}
}
@keyframes leftright{
0%{
transform: rotateZ( 0deg)
}
100%{
transform: rotateZ( -15deg)
}
}
</style>
</head>
<body translate="no">
<div class="main-error-page">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0