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