css+svg实现一个500错误页面效果代码-html代码-BFW代码库

css+svg实现一个500错误页面效果代码

代码语言：html

代码描述：css+svg实现一个500错误页面效果代码

代码标签： 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
    }
    3.........完整代码请登录后点击上方下载按钮下载查看