酷炫动画404页面模板代码
酷炫动画 404 页面模板代码
HTML 代码
<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>
CSS 代码
.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; } }
JS 代码
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 = 4; } 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 = 4; } else { document.querySelector('.firstDigit').textContent = randomNum(); i++; } }, time);
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 酷炫动画404页面模板代码
码云笔记 » 酷炫动画404页面模板代码