500页面

发表于：2024-08-31 08:13:52浏览：111次TAG： #500页面
效果图

图片alt
代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>500</title>

<style>
.error .clip .shadow {
    height:180px;
}
.error .clip:nth-of-type(2) .shadow {
    width:130px;
}
.error .clip:nth-of-type(1) .shadow,.error .clip:nth-of-type(3) .shadow {
    width:250px;
}
.error .digit {
    width:150px;
    height:150px;
    line-height:150px;
    font-size:120px;
    font-weight:bold;
}
.error h2 {
    font-size:32px;
}
.error .msg {
    top:-190px;
    left:30%;
    width:80px;
    height:80px;
    line-height:80px;
    font-size:32px;
}
.error span.triangle {
    top:70%;
    right:0%;
    border-left:20px solid #535353;
    border-top:15px solid transparent;
    border-bottom:15px solid transparent;
}
.error .container-error-404 {
    top:50%;
    margin-top:250px;
    position:relative;
    height:250px;
    padding-top:40px;
}
.error .container-error-404 .clip {
    display:inline-block;
    transform:skew(-45deg);
}
.error .clip .shadow {
    overflow:hidden;
}
.error .clip:nth-of-type(2) .shadow {
    overflow:hidden;
    position:relative;
    box-shadow:inset 20px 0px 20px -15px rgba(150,150,150,0.8),20px 0px 20px -15px rgba(150,150,150,0.8);
}
.error .clip:nth-of-type(3) .shadow:after,.error .clip:nth-of-type(1) .shadow:after {
    content:"";
    position:absolute;
    right:-8px;
    bottom:0px;
    z-index:9999;
    height:100%;
    width:10px;
    background:linear-gradient(90deg,transparent,rgba(173,173,173,0.8),transparent);
    border-radius:50%;
}
.error .clip:nth-of-type(3) .shadow:after {
    left:-8px;
}
.error .digit {
    position:relative;
    top:8%;
    color:white;
    background:#1E9FFF;
    border-radius:50%;
    display:inline-block;
    transform:skew(45deg);
}
.error .clip:nth-of-type(2) .digit {
    left:-10%;
}
.error .clip:nth-of-type(1) .digit {
    right:-20%;
}
.error .clip:nth-of-type(3) .digit {
    left:-20%;
}
.error h2 {
    font-size:24px;
    color:#A2A2A2;
    font-weight:bold;
    padding-bottom:20px;
}
.error .tohome {
    font-size:16px;
    color:#07B3F9;
}
.error .msg {
    position:relative;
    z-index:9999;
    display:block;
    background:#535353;
    color:#A2A2A2;
    border-radius:50%;
    font-style:italic;
}
.error .triangle {
    position:absolute;
    z-index:999;
    transform:rotate(45deg);
    content:"";
    width:0;
    height:0;
}
@media(max-width:767px) {
    .error .clip .shadow {
    height:100px;
}
.error .clip:nth-of-type(2) .shadow {
    width:80px;
}
.error .clip:nth-of-type(1) .shadow,.error .clip:nth-of-type(3) .shadow {
    width:100px;
}
.error .digit {
    width:80px;
    height:80px;
    line-height:80px;
    font-size:52px;
}
.error h2 {
    font-size:18px;
}
.error .msg {
    top:-110px;
    left:15%;
    width:40px;
    height:40px;
    line-height:40px;
    font-size:18px;
}
.error span.triangle {
    top:70%;
    right:-3%;
    border-left:10px solid #535353;
    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
}
.error .container-error-404 {
    height:150px;
}
}</style>
</head>
<body>
<div class="error">
    <div class="container-floud">
        <div style="text-align: center">
            <div class="container-error-404">
                <div class="clip">
                    <div class="shadow">
                        <span class="digit thirdDigit"></span>
                    </div>
                </div>
                <div class="clip">
                    <div class="shadow">
                        <span class="digit secondDigit"></span>
                    </div>
                </div>
                <div class="clip">
                    <div class="shadow">
                        <span class="digit firstDigit"></span>
                    </div>
                </div>
                <div class="msg">OH!
                    <span class="triangle"></span>
                </div>
            </div>
            <h2 class="h1">网络开小差了</h2>
        </div>
    </div>
</div>

<script>
function randomNum() {
    return Math.floor(Math.random() * 9) + 1;
}

var loop1, loop2, loop3, time = 30,
    i = 0,
    number;
loop3 = setInterval(function() {
    if (i > 40) {
        clearInterval(loop3);
        document.querySelector('.thirdDigit').textContent = 5;
    } else {
        document.querySelector('.thirdDigit').textContent = randomNum();
        i++;
    }
}, time);
loop2 = setInterval(function() {
    if (i > 80) {
        clearInterval(loop2);
        document.querySelector('.secondDigit').textContent = 0;
    } else {
        document.querySelector('.secondDigit').textContent = randomNum();
        i++;
    }
}, time);
loop1 = setInterval(function() {
    if (i > 100) {
        clearInterval(loop1);
        document.querySelector('.firstDigit').textContent = 0;
    } else {
        document.querySelector('.firstDigit').textContent = randomNum();
        i++;
    }
}, time);
</script>

</body>
</html>
栏目分类全部>