صفحة إنتظار رائعة لموقعك
درس اليوم هو كيفية عمل صفحة إنتظار رائعة لموقعك كود HTML رمز Code: <div class="spinner"> <div class="ball"> </div> <p>Loading</p> </div> سيكون ball هو الكرة التي ستتحرك في صفحة الإنتظار و الآن كود CSS رمز Code: body{ background-color:#645cc1; text-align: center; } .spinner{ width: 100px; height: 50px; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; text-align: center; } .ball{ width: 20px; height: 20px; background-color: #fff; border-radius: 50%; display: inline-block; -webkit-animation: motion 3s ease-in infinite; } p{ color: #fff; margin-top: 5px; font-family: sans-serif; letter-spacing: 3px; font-size: 10px; } @-webkit-keyframes motion{ 0%{ -webkit-transform: translateX(0) scale(1); } 25%{ -webkit-transform: translateX(-50px) scale(0.3); } 50%{ -webkit-transform: translateX(0) scale(1); } 75% {-webkit-transform: translateX(50px) scale(0.3);} 100% {-webkit-transform: translateX(0) scale(1);} } و هذا كود CSS الذي سيمح بتوسيط الكرة و كلمة LOADING و الذي يسمح بتحريك الكرة الآن و هو الأهم كيفية تحريك الكرة قمنا بعمل animation جديد تحت إسم motion و في هذا الـanimation سنقوم بتحريك الكرة على 4 مراحل أولا : 0% الكرة في مكانها الأصلي و بحجمها الأصلي ثانيا : 25% الكرة تتأرجح نحو اليسار و ذلك بإستعمال : -webkit-transform: translateX(-50px) scale(0.3); ثالثا : 50% الكرة ترجع إلى مكانها الأصلي -webkit-transform: translateX(0) scale(1); رابعا الكرة تتأرجح نحو اليمين : {-webkit-transform: translateX(50px) scale(0.3);} و أخيرا الكرة ترجع إلى مكانها الأصلي الأمثلة موجودة هنا CSS3 Loader و الموضوع الاصلي هنا Creat A Beautiful CSS3 Loader | TDN |
الساعة الآن 12:08 AM. |
Powered by vBulletin Version 3.8.12
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd
Trans