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

163

121900+

ارسال شده در شنبه 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>

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