NEW

Cách Tạo Trang Báo Lỗi "Error 404" Giống Quí Đz Cực Ngầu

Xin chào các bạn, đã đến với blog của mình hôm nay ở bài viết này mình xin chia sẻ cách trang báo lỗi error giống Nguyễn Ngọc Quí Đz, cực ngầu và độc.

Cách Tạo Trang Báo Lỗi "Error 404" Giống Quí Đz Cực Ngầu Và Độc
Bước 1: Chèn đoạn code bên dưới sau thẻ <body>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'><style>body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:100vh;font-family:&quot;Bad Script&quot;,cursive;font-size:16px;background:#f2f2f2}
.wrap-404{overflow:hidden;padding:2rem 1rem}
.label{text-align:center;font-size:.75em}
.numbers{padding:2rem 0 0;text-align:center}
.number{position:relative;display:inline-block;width:150px;-webkit-transform:translateX(60%);transform:translateX(60%)}
.four{position:relative;width:30px;height:150px;border:1px solid #000}
.four::before,.four::after{content:&#39;&#39;;position:absolute;border:1px solid #000}
.four::before{top:50%;right:-1rem;width:120px;height:30px}
.four::after{top:0;left:-60px;width:30px;height:120px}
.zero{position:relative;width:30px;height:150px;border:1px solid #000}
.zero span{position:absolute;top:0;left:-60px;width:30px;height:150px;border:1px solid #000}
.zero::before,.zero::after{content:&#39;&#39;;position:absolute;border:1px solid #000}
.zero::before{top:1rem;right:-1rem;width:120px;height:30px}
.zero::after{bottom:1rem;right:-1rem;width:120px;height:30px}
.text{position:relative;padding-top:6rem;text-align:center;font-size:1.125em}
.text a{color:#000}
.text::before{content:&#39;&#39;;position:absolute;top:4rem;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:6rem;height:1px;background-image:repeating-linear-gradient(to left,rgba(0,0,0,0.35) 0,rgba(0,0,0,0.35) 0.5rem,transparent 0.5rem,transparent 1rem)}
.sleep-walker{position:relative;height:1px;margin:5rem 0 3rem;background-image:repeating-linear-gradient(to left,transparent 0,transparent 0.12rem,rgba(0,0,0,0.15) 0.125rem,rgba(0,0,0,0.15) 0.25rem)}
.man{position:absolute;top:-1.4rem;left:0;width:1px;height:2rem;opacity:.6;-webkit-transform:scale(0.5);transform:scale(0.5);-webkit-animation:walking 50s linear infinite;animation:walking 50s linear infinite}
.man .head{position:relative;width:.5rem;height:.5rem;-webkit-transform:translateX(-1px);transform:translateX(-1px);border:1px solid #000;border-radius:50%}
.man .head::before{content:&#39;&#39;;position:absolute;top:.28rem;left:0;width:170%;height:1px;background:#000;-webkit-transform-origin:0% 0%;transform-origin:0% 0%;-webkit-transform:rotate(-25deg);transform:rotate(-25deg)}
.man .torso{position:relative;width:1px;height:50%;margin:0 auto;background:#000}
.man .torso .arm-a,.man .torso .arm-b{position:absolute;top:10%;left:0;width:100%;height:85%;-webkit-transform-origin:top center;transform-origin:top center;background:#000}
.man .torso .arm-a::before,.man .torso .arm-b::before{content:&#39;&#39;;position:absolute;bottom:-.1rem;left:0rem;width:.18rem;height:.18rem;border:1px solid #000;border-radius:50%}
.man .torso .arm-a{-webkit-transform:rotate(-20deg);transform:rotate(-20deg);-webkit-animation:walk1 1.3s linear alternate infinite;animation:walk1 1.3s linear alternate infinite}
.man .torso .arm-b{-webkit-transform:rotate(20deg);transform:rotate(20deg);-webkit-animation:walk2 1.3s linear alternate infinite;animation:walk2 1.3s linear alternate infinite}
.man .legs{position:relative;width:1px;height:50%;margin:0 auto}
.man .legs .leg-a,.man .legs .leg-b{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-transform-origin:top center;transform-origin:top center;background:#000}
.man .legs .leg-a::before,.man .legs .leg-b::before{content:&#39;&#39;;position:absolute;bottom:0;left:0;width:4px;height:1px;background:#000}
.man .legs .leg-a{-webkit-transform:rotate(-20deg);transform:rotate(-20deg);-webkit-animation:walk1 1.3s linear alternate infinite;animation:walk1 1.3s linear alternate infinite}
.man .legs .leg-b{-webkit-transform:rotate(20deg);transform:rotate(20deg);-webkit-animation:walk2 1.3s linear alternate infinite;animation:walk2 1.3s linear alternate infinite}
@-webkit-keyframes walking{0%{left:0;-webkit-transform:scale(0.5) rotateY(0deg);transform:scale(0.5) rotateY(0deg)}49.9%{-webkit-transform:scale(0.5) rotateY(0deg);transform:scale(0.5) rotateY(0deg)}50%{-webkit-transform:scale(0.5) rotateY(180deg);transform:scale(0.5) rotateY(180deg);left:100%}100%{-webkit-transform:scale(0.5) rotateY(180deg);transform:scale(0.5) rotateY(180deg);left:0}}
@keyframes walking{0%{left:0;-webkit-transform:scale(0.5) rotateY(0deg);transform:scale(0.5) rotateY(0deg)}49.9%{-webkit-transform:scale(0.5) rotateY(0deg);transform:scale(0.5) rotateY(0deg)}50%{-webkit-transform:scale(0.5) rotateY(180deg);transform:scale(0.5) rotateY(180deg);left:100%}100%{-webkit-transform:scale(0.5) rotateY(180deg);transform:scale(0.5) rotateY(180deg);left:0}}
@-webkit-keyframes walk1{0%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}50%{-webkit-transform:rotate(20deg);transform:rotate(20deg)}}
@keyframes walk1{0%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}50%{-webkit-transform:rotate(20deg);transform:rotate(20deg)}}
@-webkit-keyframes walk2{0%{-webkit-transform:rotate(20deg);transform:rotate(20deg)}50%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}}
@keyframes walk2{0%{-webkit-transform:rotate(20deg);transform:rotate(20deg)}50%{-webkit-transform:rotate(-20deg);transform:rotate(-20deg)}}
@media all and (max-width:768px){header h1{margin-bottom:3rem}.man{-webkit-animation-duration:30s;animation-duration:30s}}
@media all and (max-width:768px){.numbers{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.number{width:90px;-webkit-transform:translateX(36%) scale(0.5);transform:translateX(36%) scale(0.5)}}
</style><div class='wrap-404'><div class='label'>Error</div><div class='numbers'><div class='number'><div class='four'/></div><div class='number'><div class='zero'><span/></div></div><div class='number'><div class='four last'/></div></div><div class='text'><p>Trang bạn đang tìm đã bị xóa</p><p>Bấm vào<a href='/'>đây</a>để quay về trang chủ.</p></div><div class='sleep-walker'><div class='man'><div class='head'/><div class='torso'><div class='arm-a'/><div class='arm-b'/></div><div class='legs'><div class='leg-a'/><div class='leg-b'/></div></div></div></div>

Lưu HTML và xem kết quả
Share:

Không có nhận xét nào