پی سی دی ال این سری برای شما کاربران گرامی کد قالب سایت در دست تعمیر را فراهم آورد. این قالب دارای افکت های متحرک زیبایی هست.عنوان قالب زمان بازشدن با افکت زیبایی نمایان میشود. لوگو یا عکسی که به آن داده به صورت مدام بالا و پایین میرود و در زیر آن نیز سایه ای ساخته شده و مدام با حرکت عکس کوچک و بزرگ میشود.
این قالب بسیار زیبا هست و تماما با سی اس اس نوشته شده. تنها کاری که شما باید انجام بدین آدرس عکس خودتون رو داخل کد ، خط 166 (از آخر خط 4) قرار بدین و اون رو در سایت یا وبلاگتون به ثبت برسونید.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>قالب در دست تعمیر</title> <style> body{overflow: hidden;background-color:#00BD3C;} .header{width:100%;height:auto;position:absolute;top:0px;left:0px;background-color: #262b37;} .header p{color: #c3c8d6;font-family: 'b yekan';font-size:22px;line-height:21px;font-weight:400;padding:10px;margin:0px;direction:rtl;} #Wrapper{width:500px;height:500px;position: absolute;top:50px;left:50%;margin-left:-250px;} #icon {width:150px;height:150px;position: absolute;left:50%;margin-left:-163px;-ms-transform: scale(0.5,0.5);-webkit-transform: scale(0.5,0.5);transform: scale(0.5,0.5);top:0; z-index: 11;-webkit-animation: jump 1s infinite;-moz-animation: jump 1s infinite;-o-animation: jump 1s infinite;-ms-animation: jump 1s infinite;animation: jump 1s infinite;} @keyframes jump { 0% {top: 0px;} 50% {top: 140px;height: 140px;} 55% {top: 160px; height: 120px; } 65% {top: 120px; height: 140px; border-radius: 70px;} 95% {top: 0px;} 100% {top: 0px;} } #iconShadow {position: absolute;left: 50%;bottom: 80px;z-index: 10;margin-left: -30px;width: 60px;height: 75px;background: rgba(20, 20, 20, .1);box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);border-radius: 30px / 40px; -webkit-transform: scaleY(.3);-moz-transform: scaleY(.3);-ms-transform: scaleY(.3);-o-transform: scaleY(.3);transform: scaleY(.3);-webkit-animation: shrink 1s infinite;-moz-animation: shrink 1s infinite;-o-animation: shrink 1s infinite;-ms-animation: shrink 1s infinite;animation: shrink 1s infinite;} @-webkit-keyframes jump { 0% {top: 0px;-webkit-animation-timing-function: ease-in;} 40% {} 50% {top: 140px;height: 140px;-webkit-animation-timing-function: ease-out;} 55% {top: 160px; height: 120px; border-radius: 70px / 60px;-webkit-animation-timing-function: ease-in;} 65% {top: 120px; height: 140px; border-radius: 70px;-webkit-animation-timing-function: ease-out;} 95% {top: 0px;-webkit-animation-timing-function: ease-in;} 100% {top: 0px;-webkit-animation-timing-function: ease-in;} } @-moz-keyframes jump { 0% {top: 10px;-moz-animation-timing-function: ease-in;} 40% {} 50% {top: 140px;height: 140px;-moz-animation-timing-function: ease-out;} 55% {top: 160px; height: 120px; border-radius: 70px / 60px;-moz-animation-timing-function: ease-in;} 65% {top: 120px; height: 140px; border-radius: 70px;-moz-animation-timing-function: ease-out;} 95% {top: 10px;-moz-animation-timing-function: ease-in;} 100% {top: 10px;-moz-animation-timing-function: ease-in;} } @-o-keyframes jump { 0% {top: 10px;-o-animation-timing-function: ease-in;} 40% {} 50% {top: 140px;height: 140px;-o-animation-timing-function: ease-out;} 55% {top: 160px; height: 120px; border-radius: 70px / 60px;-o-animation-timing-function: ease-in;} 65% {top: 120px; height: 140px; border-radius: 70px;-o-animation-timing-function: ease-out;} 95% {top: 10px;-o-animation-timing-function: ease-in;} 100% {top: 10px;-o-animation-timing-function: ease-in;} } @-ms-keyframes jump { 0% {top: 10px;-ms-animation-timing-function: ease-in;} 40% {} 50% {top: 140px;height: 140px;-ms-animation-timing-function: ease-out;} 55% {top: 160px; height: 120px; border-radius: 70px / 60px;-ms-animation-timing-function: ease-in;} 65% {top: 120px; height: 140px; border-radius: 70px;-ms-animation-timing-function: ease-out;} 95% {top: 10px;-ms-animation-timing-function: ease-in;} 100% {top: 10px;-ms-animation-timing-function: ease-in;} } @keyframes jump { 0% {top: 10px;animation-timing-function: ease-in;} 50% {top: 140px;height: 140px;animation-timing-function: ease-out;} 55% {top: 160px; height: 120px; border-radius: 70px / 60px;animation-timing-function: ease-in;} 65% {top: 120px; height: 140px; border-radius: 70px;animation-timing-function: ease-out;} 95% {top: 10px; animation-timing-function: ease-in;} 100% {top: 10px;animation-timing-function: ease-in;} } @-webkit-keyframes shrink { 0% {bottom: 0;margin-left: -30px;width: 60px;height: 75px;background: rgba(20, 20, 20, .1);box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);border-radius: 30px / 40px;-webkit-animation-timing-function: ease-in;} 50% {bottom: 30px;margin-left: -10px;width: 20px;height: 5px;background: rgba(20, 20, 20, .3);box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);border-radius: 20px / 20px;-webkit-animation-timing-function: ease-out;} 100% {bottom: 0;margin-left: -30px;width: 60px;height: 75px;background: rgba(20, 20, 20, .1);box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);border-radius: 30px / 40px;-webkit-animation-timing-function: ease-in;} } @-moz-keyframes shrink { 0% {bottom: 0;margin-left: -30px;width: 60px;height: 75px;background: rgba(20, 20, 20, .1);box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);border-radius: 30px / 40px;-moz-animation-timing-function: ease-in;} 50% {bottom: 30px;margin-left: -10px;width: 20px;height: 5px;background: rgba(20, 20, 20, .3);box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);border-radius: 20px / 20px;-moz-animation-timing-function: ease-out;} 100% {bottom: 0;margin-left: -30px;width: 60px;height: 75px;background: rgba(20, 20, 20, .1);box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);border-radius: 30px / 40px;-moz-animation-timing-function: ease-in;} } @-o-keyframes shrink { 0% {bottom: 0;margin-left: -30px;width: 60px;height: 75px;background: rgba(20, 20, 20, .1);box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);border-radius: 30px / 40px;-o-animation-timing-function: ease-in;} 50% {bottom: 30px;margin-left: -10px;width: 20px;height: 5px;background: rgba(20, 20, 20, .3);box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);border-radius: 20px / 20px;-o-animation-timing-function: ease-out;} 100% {bottom: 0;margin-left: -30px;width: 60px;height: 75px;background: rgba(20, 20, 20, .1);box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);border-radius: 30px / 40px;-o-animation-timing-function: ease-in;} } @-ms-keyframes shrink { 0% {bottom: 0;margin-left: -30px;width: 60px;height: 75px;background: rgba(20, 20, 20, .1);box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);border-radius: 30px / 40px;-ms-animation-timing-function: ease-in;} 50% {bottom: 30px;margin-left: -10px;width: 20px;height: 5px;background: rgba(20, 20, 20, .3);box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);border-radius: 20px / 20px;-ms-animation-timing-function: ease-out;} 100% {bottom: 0;margin-left: -30px;width: 60px;height: 75px;background: rgba(20, 20, 20, .1);box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);border-radius: 30px / 40px;-ms-animation-timing-function: ease-in;} } @keyframes shrink { 0% {bottom: 0;margin-left: -30px;width: 60px;height: 75px;background: rgba(20, 20, 20, .1);box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);border-radius: 30px / 40px;animation-timing-function: ease-in;} 50% {bottom: 30px;margin-left: -10px;width: 20px;height: 5px;background: rgba(20, 20, 20, .3);box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);border-radius: 20px / 20px;animation-timing-function: ease-out;} 100% {bottom: 0;margin-left: -30px;width: 60px;height: 75px;background: rgba(20, 20, 20, .1);box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);border-radius: 30px / 40px;animation-timing-function: ease-in;} } .header {font-size: .8em;text-align: center;padding: 10px;background-color: #262b37;color: #fff;box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .3);text-transform: uppercase;position: absolut;font-weight: bold;-webkit-animation: bounce 800ms ease-out;-moz-animation: bounce 800ms ease-out;-o-animation: bounce 800ms ease-out;animation: bounce 800ms ease-out;} /* Webkit, Chrome and Safari */ @-webkit-keyframes bounce { 0% {-webkit-transform:translateY(-100%);opacity: 0;} 5% {-webkit-transform:translateY(-100%);opacity: 0;} 15% {-webkit-transform:translateY(0);padding-bottom: 5px;} 30% {-webkit-transform:translateY(-50%);} 40% {-webkit-transform:translateY(0%);padding-bottom: 6px;} 50% {-webkit-transform:translateY(-30%);} 70% {-webkit-transform:translateY(0%);padding-bottom: 7px;} 80% {-webkit-transform:translateY(-15%);} 90% {-webkit-transform:translateY(0%);padding-bottom: 8px;} 95% {-webkit-transform:translateY(-10%);} 97% {-webkit-transform:translateY(0%);padding-bottom: 9px;} 99% {-webkit-transform:translateY(-5%);} 100% {-webkit-transform:translateY(0);padding-bottom: 9px;opacity: 1;} } /* Mozilla Firefox 15 below */ @-moz-keyframes bounce { 0% {-moz-transform:translateY(-100%);opacity: 0;} 5% {-moz-transform:translateY(-100%);opacity: 0;} 15% {-moz-transform:translateY(0);padding-bottom: 5px;} 30% {-moz-transform:translateY(-50%);} 40% {-moz-transform:translateY(0%);padding-bottom: 6px;} 50% {-moz-transform:translateY(-30%);} 70% {-moz-transform:translateY(0%);padding-bottom: 7px;} 80% {-moz-transform:translateY(-15%);} 90% {-moz-transform:translateY(0%);padding-bottom: 8px;} 95% {-moz-transform:translateY(-10%);} 97% {-moz-transform:translateY(0%);padding-bottom: 9px;} 99% {-moz-transform:translateY(-5%);} 100% {-moz-transform:translateY(0);padding-bottom: 9px;opacity: 1;} } /* Opera 12.0 */ @-o-keyframes bounce { 0% {-o-transform:translateY(-100%);opacity: 0;} 5% {-o-transform:translateY(-100%);opacity: 0;} 15% {-o-transform:translateY(0);padding-bottom: 5px;} 30% {-o-transform:translateY(-50%);} 40% {-o-transform:translateY(0%);padding-bottom: 6px;} 50% {-o-transform:translateY(-30%);} 70% {-o-transform:translateY(0%);padding-bottom: 7px;} 80% {-o-transform:translateY(-15%);} 90% {-o-transform:translateY(0%);padding-bottom: 8px;} 95% {-o-transform:translateY(-10%);} 97% {-o-transform:translateY(0%);padding-bottom: 9px;} 99% {-o-transform:translateY(-5%);} 100% {-o-transform:translateY(0);padding-bottom: 9px;opacity: 1;} } /* W3, Opera 12+, Firefox 16+ */ @keyframes bounce { 0% {transform:translateY(-100%);opacity: 0;} 5% {transform:translateY(-100%);opacity: 0;} 15% {transform:translateY(0);padding-bottom: 5px;} 30% {transform:translateY(-50%);} 40% {transform:translateY(0%);padding-bottom: 6px;} 50% {transform:translateY(-30%);} 70% {transform:translateY(0%);padding-bottom: 7px;} 80% {transform:translateY(-15%);} 90% {transform:translateY(0%);padding-bottom: 8px;} 95% {transform:translateY(-7%);} 97% {transform:translateY(0%);padding-bottom: 9px;} 99% {transform:translateY(-3%);} 100% {transform:translateY(0);padding-bottom: 9px;opacity: 1;} } </style> </head> <body> <h2 style="position:fixed; top:1000%; width:0px; height:0px; overflow:hidden; left:1000%;"><a href="http://pi3idl.com">کد وبلاگ</a></h2> <h2 style="position:fixed; top:1000%; width:0px; height:0px; overflow:hidden; left:1000%;"><a href="http://www.pi3idl.com/2014/10/animation-offline-page-code/">قالب سایت در دست تعمیر</a></h2> <div class="header"><p>سایت در دست تعمیر هست. به زودی بر میگردیم.</p></div> <div id="Wrapper"> <div id="icon"> <img src="http://www.pi3idl.com/wp-content/uploads/2014/10/green-animation-404-logo.png"/> </div> <div id="iconShadow"></div> </div> </body> </html> |
عالیهههههههههههه
خیلی با حاله !!!!
بخصوص همین لوگوش 😐