قالب | فلت | 404 متحرک

163

120470+

ارسال شده در شنبه 13 تیر 1394

قالب

سلام

من امروز براتون یه قالب متحرک برای صفحه 404 تهیه کردم که کاملا کد نویسی هست ینی در ساختش از عکس استفاده نشده

امید وارم خوشتون اومده باشه

<html class=""><head><meta charset="UTF-8"><meta name="robots" content="noindex"> <style class="cp-pen-styles">body{ margin:0; color:#444; background:#58d0fe; font:300 18px/18px Roboto, sans-serif; } *,:after,:before{box-sizing:border-box} .pull-left{float:left} .pull-right{float:right} .clearfix:after,.clearfix:before{content:'';display:table} .clearfix:after{clear:both;display:block} @font-face { font-family: "yekan"; src: url(fonts/Yekan.eot); src: url(fonts/Yekan.eot?#iefix) format("embedded-opentype"), url(fonts/Yekan.woff) format("woff"), url(fonts/Yekan.ttf) format("truetype"), url(fonts/Yekan.svg#BYekan) format("svg"); font-weight: normal; font-style: normal } h1 { font-family: "BYekan", Tahoma, Arial; font-size: 70px; text-decoration:none; font-weight:normal; line-height:24px; } h2 { font-family: "BYekan", Tahoma, Arial; font-size: 25px; text-decoration:none; font-weight:normal; line-height:24px; } .plane .fan, .plane .wheel .left, .plane .wheel .right, .plane .wings:before, .plane .wings:after, .plane .wheel .left:before, .plane .wheel .right:after{ background:#000; } .cloud .line-b:before, .cloud .line-b:after, .cloud .line-d:before, .cloud .line-d:after, .plane .wings:before, .plane .wings:after, .plane .cat .legs:before, .plane .cat .legs:after, .plane .wheel .left:before, .plane .wheel .right:after, .plane .fan .fan-wings .fan-a:before, .plane .fan .fan-wings .fan-b:before, .plane .fan .fan-wings .fan-c:before, .plane .fan .fan-wings .fan-d:before{ content:''; position:absolute; } .cloud{ width:120px; height:50px; overflow:hidden; position:fixed; } .cloud-a{ top:15%; right:15%; -webkit-animation:cloud 3s infinite; animation:cloud 3s infinite; } .cloud-b{ left:15%; bottom:15%; -webkit-animation:cloud 5s infinite; animation:cloud 5s infinite; } .cloud .line-a, .cloud .line-b, .cloud .line-c, .cloud .line-d, .cloud .line-e{ height:10px; width:100%; position:relative; border-radius:5px; background:#79dbff; } .cloud .line-b:before, .cloud .line-b:after, .cloud .line-d:before, .cloud .line-d:after{ height:inherit; width:inherit; background:#58d0fe; border-radius:inherit; } .cloud .line-a, .cloud .line-e{ width:60px; } .cloud .line-a{ left:20px; } .cloud .line-e{ left:45px; } .cloud .line-b:before{ top:0; left:-80px; } .cloud .line-b:after{ top:0; right:-55px; } .cloud .line-d:before{ top:0; left:-55px; } .cloud .line-d:after{ top:0; right:-80px; } .plane{ z-index:5; width:275px; height:130px; position:relative; margin:100px auto 0; -webkit-animation:plane-move 10s infinite; animation:plane-move 10s infinite; -webkit-animation-fill-mode:backwards; animation-fill-mode:backwards; } .plane .wings{ height:52px; position:relative; } .plane .wings:before, .plane .wings:after{ height:5px; width:100%; border-radius:3px; } .plane .wings:before{ top:0; } .plane .wings:after{ bottom:0; height:4px; } .plane .fan{ left:50%; z-index:1; width:50px; height:50px; bottom:-25px; border-radius:50%; margin-left:-25px; position:absolute; } .plane .fan .fan-wings{ top:50%; left:50%; width:110px; height:110px; overflow:hidden; margin-top:-55px; position:absolute; margin-left:-55px; border-radius:50%; } .plane .fan .fan-wings .fan-a, .plane .fan .fan-wings .fan-b, .plane .fan .fan-wings .fan-c, .plane .fan .fan-wings .fan-d{ width:inherit; height:inherit; position:absolute; -webkit-animation:engine-start 1s infinite; animation:engine-start 1s infinite; } .plane .fan .fan-wings .fan-a{ -webkit-animation-duration:.2s; animation-duration:.2s; } .plane .fan .fan-wings .fan-b{ -webkit-animation-duration:.4s; animation-duration:.4s; } . plane .fan .fan-wings .fan-c{ -webkit-animation-duration:.4s; animation-duration:.4s; } .plane .fan .fan-wings .fan-d{ -webkit-animation-duration:.2s; animation-duration:.2s; } .plane .fan .fan-wings .fan-a:before, .plane .fan .fan-wings .fan-b:before, .plane .fan .fan-wings .fan-c:before, .plane .fan .fan-wings .fan-d:before{ top:50%; left:50%; height:55px; width:110px; margin-top:-55px; margin-left:-55px; border-radius:110px 110px 0 0; background:rgba(255,255,255,.4); } .plane .fan .fan-wings .fan-a:before{ right:0; width:55px; height:110px; border-radius:110px 0 0 110px; } .plane .fan .fan-wings .fan-b:before{ right:0; height:55px; width:110px; border-radius:110px 110px 0 0; } .plane .fan .fan-wings .fan-c:before{ left:100%; width:55px; height:110px; border-radius:0 110px 110px 0; } .plane .fan .fan-wings .fan-d:before{ top:100%; width:110px; height:55px; border-radius:0 0 110px 110px; } .plane .cat{ bottom:0; z-index:2; width:22px; right:35px; height:20px; position:absolute; background:#1c1c1c; -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); border-radius:15px 15px 0 0; -webkit-animation:cat-move 10s infinite; animation:cat-move 10s infinite; } .plane .cat:before{ content:''; width:0; height:0; top:-5px; position:inherit; border:11px solid #1c1c1c; border-top:10px solid transparent; } .plane .cat .legs{ bottom:0; height:20px; width:inherit; position:inherit; } .plane .cat .legs:before, .plane .cat .legs:after{ top:12px; width:5px; height:17px; background:#1c1c1c; border-bottom:4px solid #f6f7f7; } .plane .cat .legs:before{ left:-5px; border-radius:6px 0 2px 2px; } .plane .cat .legs:after{ right:-5px; border-radius:0 6px 2px 2px; } .plane .wheel{ height:78px; } .plane .wheel .left, .plane .wheel .right{ bottom:0; width:10px; height:20px; border-radius:5px; position:absolute; } .plane .wheel .left{ left:60px; } .plane .wheel .right{ right:60px; } .plane .wheel .left:before, .plane .wheel .right:after{ top:-15px; width:78px; height:2px; } .plane .wheel .left:before{ left:-5px; -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg); } .plane .wheel .right:after{ right:-5px; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg); } @-webkit-keyframes engine-start{ 0%{ -webkit-transform:rotate(0deg); transform:rotate(0deg); } 100%{ -webkit-transform:rotate(-360deg); transform:rotate(-360deg); } } @keyframes engine-start{ 0%{ -webkit-transform:rotate(0deg); transform:rotate(0deg); } 100%{ -webkit-transform:rotate(-360deg); transform:rotate(-360deg); } } @-webkit-keyframes plane-move{ 10%{ -webkit-transform:rotate(0deg) translateY(0px); transform:rotate(0deg) translateY(0px); } 20%{ -webkit-transform:rotate(-4deg) translateY(10px); transform:rotate(-4deg) translateY(10px); } 30%{ -webkit-transform:rotate(0deg) translateY(0); transform:rotate(0deg) translateY(0); } 40%{ -webkit-transform:rotate(0deg) translateY(-4px); transform:rotate(0deg) translateY(-4px); } 50%{ -webkit-transform:rotate(0deg) translateY(0); transform:rotate(0deg) translateY(0); } 90%{ -webkit-transform:rotate(8deg) translateY(0); transform:rotate(8deg) translateY(0); } 100%{ -webkit-transform:rotate(-360deg) translateY(5px); transform:rotate(-360deg) translateY(5px); } } @keyframes plane-move{ 10%{ -webkit-transform:rotate(0deg) translateY(0px); transform:rotate(0deg) translateY(0px); } 20%{ -webkit-transform:rotate(-4deg) translateY(10px); transform:rotate(-4deg) translateY(10px); } 30%{ -webkit-transform:rotate(0deg) translateY(0); transform:rotate(0deg) translateY(0); } 40%{ -webkit-transform:rotate(0deg) translateY(-4px); transform:rotate(0deg) translateY(-4px); } 50%{ -webkit-transform:rotate(0deg) translateY(0); transform:rotate(0deg) translateY(0); } 90%{ -webkit-transform:rotate(8deg) translateY(0); transform:rotate(8deg) translateY(0); } 100%{ -webkit-transform:rotate(-360deg) translateY(5px); transform:rotate(-360deg) translateY(5px); } } @-webkit-keyframes cat-move{ 10%{ height:20px; -webkit-transform:translate(0) rotate(0); transform:translate(0) rotate(0); } 20%{ -webkit-transform:translate(0) rotate(0); transform:translate(0) rotate(0); } 30%{ -webkit-transform:translate(0) rotate(0); transform:translate(0) rotate(0); } 40%{ -webkit-transform:translate(0) rotate(0); transform:translate(0) rotate(0); } 50%{ height:20px; -webkit-transform:translate(0) rotate(0); transform:translate(0) rotate(0); } 90%{ -webkit-transform:translate(20px,0) rotate(0); transform:translate(20px,0) rotate(0); } 95%{ height:30px; -webkit-transform:translate(0,-20px) rotate(360deg); transform:translate(0,-20px) rotate(360deg); } 100%{ height:25px; -webkit-transform:translate(0,-15px) rotate(0); transform:translate(0,-15px) rotate(0); } } @keyframes cat-move{ 10%{ height:20px; -webkit-transform:translate(0) rotate(0); transform:translate(0) rotate(0); } 20%{ -webkit-transform:translate(0) rotate(0); transform:translate(0) rotate(0); } 30%{ -webkit-transform:translate(0) rotate(0); transform:translate(0) rotate(0); } 40%{ -webkit-transform:translate(0) rotate(0); transform:translate(0) rotate(0); } 50%{ height:20px; -webkit-transform:translate(0) rotate(0); transform:translate(0) rotate(0); } 90%{ -webkit-transform:translate(20px,0) rotate(0); transform:translate(20px,0) rotate(0); } 95%{ height:30px; -webkit-transform:translate(0,-20px) rotate(360deg); transform:translate(0,-20px) rotate(360deg); } 100%{ height:25px; -webkit-transform:translate(0,-15px) rotate(0); transform:translate(0,-15px) rotate(0); } } @-webkit-keyframes cloud{ 25%{ -webkit-transform:translate(0); transform:translate(0); } 50%{ -webkit-transform:translate(0,-10px); transform:translate(0,-10px); } 75%{ -webkit-transform:translate(15px,0); transform:translate(15px,0); } } @keyframes cloud{ 25%{ -webkit-transform:translate(0); transform:translate(0); } 50%{ -webkit-transform:translate(0,-10px); transform:translate(0,-10px); } 75%{ -webkit-transform:translate(15px,0); transform:translate(15px,0); } }</style></head><body> <div class="cloud cloud-a"> <div class="line-a"></div> <div class="line-b"></div> <div class="line-c"></div> <div class="line-d"></div> <div class="line-e"></div> </div> <center><h1> 404 </h1> <p> </p> <h2> صفحه مورد نظر شما یافت نشد </h2> </center> <div class="plane"> <p> </p> <div class="wings"> <div class="fan"> <div class="fan-wings"> <div class="fan-a"></div> <div class="fan-b"></div> <div class="fan-c"></div> <div class="fan-d"></div> </div> </div> <div class="cat"> <div class="legs"></div> </div> </div> <div class="wheel"> <div class="left"></div> <div class="right"></div> </div> </div> <div class="cloud cloud-b"> <div class="line-a"></div> <div class="line-b"></div> <div class="line-c"></div> <div class="line-d"></div> <div class="line-e"></div> </div> <script src="/assets/editor/live/css_live_reload_init.js"></script> </body></html>

پیشنمایش انلاین

دیدگاه های ارسال شده

این نظر توسط سردار گمنام در تاریخ 1395/01/07 ارسال شده است.

قالب قشنگی نیست شاید حرکت هلی کوپتر خوب باشه ، اما ربطی به 404 نداره . در ضمن فونتش رو یک استایلی رنگی چیزی میدادید حداقل موفق باشید
پاسخ : ممنون بخاطر نظرتون