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

148

121360+

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

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

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

این نظر توسط سام در تاریخ 1397/06/24 ارسال شده است.

این کد رو کجایی قالبم بنویسم لطفا بگید تروخدا بگید
پاسخ : صفحه 404

این نظر توسط farhad yazdi در تاریخ 1395/01/11 ارسال شده است.

خیلی خوب بود دم شما گرم
پاسخ : قابلی نداشت

این نظر توسط nader در تاریخ 1394/04/28 ارسال شده است.

عالی بود
پاسخ : قربانت

این نظر توسط علی در تاریخ 1394/04/28 ارسال شده است.

با سلام وخسته نباشید
یه سوال
اینو از کجا برداشتین ؟
من سه هفته پیش اینو تو سایتم گذاشتم
میخوام مطمئن شوم که از سایت من بر نداشتین!!!
ادرس مطلب : 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/

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

این نظر توسط علی امینی در تاریخ 1394/04/18 ارسال شده است.

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