روز فرانت اند:ساخت انیمیشن بارگذاری سایت
امروز می خواهیم با ساخت انیمیشن ساده برای بارگذاری وب سایت آشنا شویم.یکی از موارد که امروزه در طراحی و زیبا سازی صفحات وب استفاده می شود نمایش یک انیمیشن در هنگام بارگذاری یا Load است.
برای شروع کار در سند HTML از یک عنصر div برای ایجاد یک شی و از سی اس اس برای ساخت و اعمال انیمیشن استفاده می کنیم.
<div class="loader"></div>
جهت ساخت انیمیشن در سی اس اس Css بهتره با کلاس های ساختگی و عناصر ساختگی و هم چنین با انیمیشن ها به خصوص دستور @keyframes اشنا باشیم تا بتوانیم نحوه ساخت انیمیشن را بهتر درک کنیم.(توصیه ما استفاده از دوره های رایگان آموزش Css و Css3 است.)
body { background-color: #181818; } .loader { width: 8em; height: 8em; position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); margin: 0px auto; overflow: hidden; &:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; background: linear-gradient(to bottom right, #F8E81C, #34D1CE, #C335D9); animation: loading 2s linear infinite; } } @keyframes loading { 0% { transform: translate3d(-7em,-7em,0); } 25% { transform: translate3d(7em,-7em,0); } 50% { transform: translate3d(7em,7em,0); } 75% { transform: translate3d(-7em,7em,0); } 100% { transform: translate3d(-7em,-7em,0); } } @keyframes color { 0% { background-color: #F8E81C; } 25% { background-color: #34D1CE; } 50% { background-color: #F8E81C; } 75% { background-color: #C335D9; } 100% { background-color: #F8E81C; } }
ساده ترین روش ساخت یک LOADER سایت استفاده از Css است که در این آموزش یادگرفتیم که چگونه ساخته می شود.میتوانید دمو و همچنین تمام پروژه رو از این لینک دانلود کنید.
برچسب:آموزش ویدئویی آنلاین, اموزش css, اموزش انلاین رایگان, اموزش وب, انیمیشن در Css, بارگذاری سایت, بهترین منبع اموزش وب, بهترین منبع وب, دستور @keyframes, روز فرانت اند, ساخت انیمیشن, ساخت انیمیشن css, ساخت انیمیشن در سی اس اس, عناصر ساختگی, فرانت اند, فرانت اند چیست, کلاس های ساختگی, متریال, مفهوم front-end, منوی آبشاری ریسپانسیو, منوی ابشاری, منوی کشویی