css+svg实现一个500错误页面效果代码
代码语言：html
所属分类：布局界面
代码描述：css+svg实现一个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:0 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
}
.pao-atras {
animation:leftright 1s alternate infinite;
transform-origin:center
}
.pao-frente {
animation:leftright 1s .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)
}
}@-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
}
}@-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)
}
}@-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>
<!-- partial:index.partial.html -->
<div class="main-error-page"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="auto" height="290" viewBox="0 0 470 290"><defs><path id="prefix__a" d="M221.677 31.582c-55.54 19.895-112.156 36.51-167.848 55.993C33.02 94.854 8.92 106.19 5.062 129.52c-2.513 15.198 5.634 31.108 17.898 38.96 5.99 3.835 13.34 6.531 16.472 13.261 4.87 10.459-3.88 22.449-13.113 28.531-9.236 6.083-20.5 10.905-24.704 21.695-1.121 2.876-1.61 5.944-1.615 9.05v.082c.006 4.547 1.05 9.169 2.674 13.386 10.06 26.125 39.391 37.567 65.477 36.17 26.086-1.398 50.827-12.414 76.417-18.085 43.668-9.678 88.389-3.63 133.098 2.418 45.256 6.122 90.501 12.244 .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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