صفحه آفلاین متحرک

148

125120+

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

صفحه افلاین

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

این صفحه افلاین بدلیل فول کد بودن و استفاده نکردن از عکس سرعت لود بسیار عالی دارد

دمو قالب

<head><meta charset="UTF-8"><meta name="robots" content="noindex"> <title>در حال باز سازی</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <link href='http://www.fontonline.ir/css/BYekan.css' rel='stylesheet' type='text/css'> <style class="cp-pen-styles">body{ margin:0; color:#444; background:#8ab7a0; 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} .text{ font-family: BYekan,'BYekan',tahoma; } .boat{ font-family: BYekan,'BYekan',tahoma; top:50%; left:50%; margin-top:-75px; position:absolute; margin-left:-105px; } .boat .wrap{ margin:auto; width:210px; height:150px; overflow:hidden; position:relative; padding:50px 0 0 25px; } .boat .main{ bottom:-3px; position:relative; -webkit-animation:boat-start 1s infinite; animation:boat-start 1s infinite; } .boat .boat-top-layer .top:before, .boat .boat-top-layer .top:after, .boat .boat-top-layer .top .pole:before, .boat .boat-top-layer .top .pole:after, .boat .boat-top-layer .top .help:before, .boat .boat-top-layer .top .help:after, .boat .boat-top-layer .top .help span:before, .boat .boat-top-layer .top .help span:after, .boat .boat-top-layer .bottom:before, .boat .boat-top-layer .bottom:after, .boat .boat-mid-layer .top:before, .boat .boat-mid-layer .top:after, .boat .boat-mid-layer .bottom:before, .boat .boat-mid-layer .bottom:after, .boat .boat-bot-layer .top:before, .boat .boat-bot-layer .top:after, .boat .boat-bot-layer .bottom:before, .boat .boat-bot-layer .bottom:after, .boat .water .drop:before, .boat .water .drop:after{ content:''; position:absolute; } /* top - top */ .boat .boat-top-layer .top{ left:70px; width:55px; height:30px; position:relative; border:2px solid #fff; } .boat .boat-top-layer .top:before, .boat .boat-top-layer .top:after{ background:#fff; } .boat .boat-top-layer .top:before{ top:50%; left:-2px; height:2px; width:inherit; margin-top:-1px; } .boat .boat-top-layer .top:after{ top:-30px; width:2px; right:-2px; height:35px; } .boat .boat-top-layer .top .pole{ width:2px; left:-2px; z-index:1; height:50px; bottom:-8px; background:#fff; position:absolute; } .boat .boat-top-layer .top .pole:before, .boat .boat-top-layer .top .pole:after{ position:absolute; background:inherit } .boat .boat-top-layer .top .pole:before{ top:-5px; left:50%; width:15px; height:8px; border-radius:4px; margin-left:-7.5px; } .boat .boat-top-layer .top .pole:after{ bottom:0; left:30px; width:2px; height:35px; } .boat .boat-top-layer .top .help{ z-index:1; width:30px; height:30px; margin-top:-2px; margin-left:-1px; position:relative; border-radius:50%; border:8px solid #f04850; } .boat .boat-top-layer .top .help:before, .boat .boat-top-layer .top .help:after{ top:50%; left:50%; position:absolute; background:rgba(0,0,0,.3); } .boat .boat-top-layer .top .help:before{ height:2px; width:inherit; margin-top:-1px; margin-left:-15px; } .boat .boat-top-layer .top .help:after{ width:2px; height:inherit; margin-top:-15px; margin-left:-1px; } .boat .boat-top-layer .top .help span{ top:-2px; width:14px; height:14px; overflow:hidden; border-radius:50%; position:relative; display:inline-block; } .boat .boat-top-layer .top .help span:before, .boat .boat-top-layer .top .help span:after{ top:50%; left:50%; z-index:1; background:#fff; position:absolute; } .boat .boat-top-layer .top .help span:before{ width:2px; height:inherit; margin-top:-7px; margin-left:-1px; } .boat .boat-top-layer .top .help span:after{ height:2px; width:inherit; margin-top:-1px; margin-left:-7px; } /* top - bottom */ .boat .boat-top-layer .bottom{ left:55px; height:5px; width:75px; position:relative; background:#688b77; border-radius:5px 3px 0 0; } .boat .boat-top-layer .bottom:before, .boat .boat-top-layer .bottom:after{ background:#fff; } .boat .boat-top-layer .bottom:before{ left:8px; top:-30px; width:5px; height:35px; -webkit-transform:skewX(-25deg); -ms-transform:skewX(-25deg); transform:skewX(-25deg); } .boat .boat-top-layer .bottom:after{ bottom:0; left:30px; width:2px; height:85px; } /* middle - top */ .boat .boat-mid-layer .top{ left:60px; width:70px; height:20px; position:relative; background:#222e28; border-top:5px solid #fff; border-right:5px solid #fff; } .boat .boat-mid-layer .top:before{ top:-5px; left:-10px; width:18px; height:inherit; background:inherit; border-top:inherit; border-right:inherit; border-left:5px solid #fff; -webkit-transform:skewX(-25deg); -ms-transform:skewX(-25deg); transform:skewX(-25deg); } .boat .boat-mid-layer .top:after{ top:-5px; width:5px; height:5px; right:-10px; background:#fff; border-radius:0 3px 3px 0; } /* middle - bottom */ .boat .boat-mid-layer .bottom{ left:25px; width:105px; height:12px; background:#fff; position:relative; } .boat .boat-mid-layer .bottom:before{ left:-5px; width:10px; height:inherit; background:inherit; border-radius:3px 0 0 0; -webkit-transform:skewX(-25deg); -ms-transform:skewX(-25deg); transform:skewX(-25deg); } .boat .boat-mid-layer .bottom:after{ top:3px; right:5px; height:5px; width:20px; background:#d0e2d7; } /* bottom - top */ .boat .boat-bot-layer .top{ left:-10px; height:5px; width:180px; position:relative; background:#688b77; border-radius:5px 5px 0 0; } .boat .boat-bot-layer .top:before, .boat .boat-bot-layer .top:after{ width:5px; height:5px; bottom:100%; background:#222e28; border-radius:2px 2px 0 0; } .boat .boat-bot-layer .top:before{ left:10px; } .boat .boat-bot-layer .top:after{ right:25px; } /* bottom - bottom */ .boat .boat-bot-layer .bottom{ width:180px; height:25px; position:relative; border-radius:2px; background:#222e28; } .boat .boat-bot-layer .bottom:before{ left:-15px; width:25px; height:25px; background:inherit; border-radius:inherit; -webkit-transform:skewX(25deg); -ms-transform:skewX(25deg); transform:skewX(25deg); } .boat .boat-bot-layer .bottom:after{ top:-13px; left:28px; width:5px; height:5px; border-radius:50%; background:inherit; } .boat .water{ bottom:0; left:150px; position:absolute; } .boat .water .drops{ width:300px; height:22px; position:relative; } .boat .water .drop{ left:0; bottom:0; background:#fff; position:absolute; } .boat .water .drop:before, .boat .water .drop:after{ background:inherit; border-radius:inherit; } .boat .water .drop.drop-a, .boat .water .drop.drop-b, .boat .water .drop.drop-e, .boat .water .drop.drop-f, .boat .water .drop.drop-g{ height:5px; border-radius:3px 3px 0 0; } .boat .water .drop.drop-a{ width:10px; } .boat .water .drop.drop-b, .boat .water .drop.drop-e, .boat .water .drop.drop-f, .boat .water .drop.drop-g{ left:15px; width:22px; } .boat .water .drop.drop-c{ left:37px; width:32px; height:7px; border-radius:6px 6px 0 0; } .boat .water .drop.drop-c:before, .boat .water .drop.drop-c:after, .boat .water .drop.drop-d:before, .boat .water .drop.drop-d:after, .boat .water .drop.drop-g:before{ width:2px; height:2px; border-radius:50%; } .boat .water .drop.drop-c:before{ left:0; top:-5px; } .boat .water .drop.drop-c:after{ top:-8px; right:5px; width:4px; height:4px; } .boat .water .drop.drop-d{ left:68px; width:25px; height:10px; border-radius:10px 10px 0 0; } .boat .water .drop.drop-d:before{ top:-8px; left:8px; } .boat .water .drop.drop-d:after{ top:-2px; right:-8px; } .boat .water .drop.drop-e{ left:93px; } .boat .water .drop.drop-f{ width:50px; left:115px; height:4px; } .boat .water .drop.drop-g{ left:auto; right:75px; width:40px; height:2.5px; } .boat .water .drop.drop-g:before{ top:-5px; left:-5px; } .boat .water .drop.drop-g:after{ left:100%; width:12px; height:inherit; } .boat .water .drop.drop-h{ left:auto; right:25px; height:2px; width:25px; } .boat .water .drop.drop-h:before, .boat .water .drop.drop-h:after{ height:inherit; } .boat .water .drop.drop-h:before{ left:30px; width:10px; } .boat .water .drop.drop-h:after{ left:45px; width:4px; } .boat .water .drops-2{ bottom:0; left:30px; position:absolute; } .boat .water .drops-2 .drop.drop-a{ width:15px; border-radius:5px 5px 0 0; } .boat .water .drops-2 .drop.drop-b{ height:10px; border-radius:10px 10px 0 0; } .boat .water .drops-2 .drop.drop-c:before{ left:10px; top:-10px; } .boat .water .drops-2 .drop.drop-c:after{ top:-12px; right:-25px; } .boat .water .drops-2 .drop.drop-d{ height:8px; } .boat .water .drops-2 .drop.drop-d:before{ top:-15px; left:35px; } .boat .water .drops-2 .drop.drop-d:after{ top:-8px; right:-55px; } .boat .water .drops-2 .drop.drop-g:before{ right:0; top:-10px; left:auto; } .boat .water .drops-2 .drop.drop-h{ bottom:0; width:10px; left:auto; height:5px; right:45px; border-radius:5px 5px 0 0; } .boat .water .drops-2 .drop.drop-h:before, .boat .water .drops-2 .drop.drop-h:after{ display:none; } .drops-1{ -webkit-animation:blink .8s linear infinite; animation:blink .8s linear infinite; } .drops-2{ -webkit-animation:blink 1.6s linear infinite; animation:blink 1.6s linear infinite; } @-webkit-keyframes boat-start{ 0%{ -webkit-transform:none; transform:none; } 50%{ -webkit-transform:translateY(4px); transform:translateY(4px); } 100%{ -webkit-transform:none; transform:none; } } @keyframes boat-start{ 0%{ -webkit-transform:none; transform:none; } 50%{ -webkit-transform:translateY(4px); transform:translateY(4px); } 100%{ -webkit-transform:none; transform:none; } } @-webkit-keyframes blink{ 25%{ visibility:hidden; } 50%{ visibility:hidden; } 100%{ visibility:visible; } } @keyframes blink{ 25%{ visibility:hidden; } 50%{ visibility:hidden; } 100%{ visibility:visible; } }</style></head><body> <div class="text"> <pR> <bR><bR><bR> <pR> <bR><bR><bR> <pR> <bR><bR><bR> <center><h1>بزودی برمیگردیم</h1> در حال رفع مشکلت سایت هستیم</center> </div> <div class="boat"> <div class="wrap"> <div class="main"> <div class="boat-top-layer"> <div class="top"> <div class="pole"></div> <div class="help"><span></span></div> </div> <div class="bottom"></div> </div> <div class="boat-mid-layer"> <div class="top"></div> <div class="bottom"></div> </div> <div class="boat-bot-layer"><div class="top"></div> <div class="bottom"></div> </div> </div> </div> <div class="water"> <div class="drops clearfix drops-1"> <span class="drop drop-a"></span> <span class="drop drop-b"></span> <span class="drop drop-c"></span> <span class="drop drop-d"></span> <span class="drop drop-e"></span> <span class="drop drop-f"></span> <span class="drop drop-g"></span> <span class="drop drop-h"></span> </div> <div class="drops clearfix drops-2"> <span class="drop drop-a"></span> <span class="drop drop-b"></span> <span class="drop drop-c"></span> <span class="drop drop-d"></span> <span class="drop drop-e"></span> <span class="drop drop-f"></span> <span class="drop drop-g"></span> <span class="drop drop-h"></span> </div> </div> </div> <script src="/assets/editor/live/css_live_reload_init.js"></script> </body></html>

اگه از این سبک طراحی خوشتون اومد نظر بدید تا بیشتر از اینا بزارم

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

این کد رو کجایی قالبم بنویسم لطفا بگید تروخدا بگید

پاسخ : صفحه 404

خیلی خوب بود دم شما گرم

پاسخ : قابلی نداشت

عالی بود

پاسخ : قربانت

با سلام وخسته نباشید
یه سوال
اینو از کجا برداشتین ؟
من سه هفته پیش اینو تو سایتم گذاشتم
میخوام مطمئن شوم که از سایت من بر نداشتین!!!
ادرس مطلب : http://5skin.ir/%d9%82%d8%a7%d9%84%d8%a8-%d8%a2%d9%81%d9%84%d8%a7%db%8c%d9%86-%d8%b7%d8%b1%d8%ad-%d8%a7%d9%86%db%8c%d9%85%db%8c%d8%b4%d9%86-%da%a9%d8%b4%d8%aa%db%8c-%d9%85%d8%ae%d8%b5%d9%88%d8%b5-%d8%b1%d8%b2%d8%a8/

به ایمیلم جوابو بفرست
ممنون

پاسخ : متاسفانه این مطلب رو نویسنده زده حتما رسیدگی میشه

عالیه اموزش این هم میذارین
اقا مرتضی ممنونم از تموم موزش هتون اما توی اموزش های ویدئویی قالب هایی که درست میکنین خیلی متنشون واضح نیست اگه میشه با میکروفون تمامی متنو و جاهایی که میرین رو معرفی کنید
تشکر