خیلی از ماها سایت هایی رو دیدیم که وقتی باز میکنیم در ابتدا لودینگ (preloader) فلت متحرک به شکل زیبا اولش به نمایش درمیاد.حالا ما میخوایم به شما آموزش بدیم که چطوری با Css3 بیایم از این loading های متحرک به سبک فلت طراحی کنیم.
پیش نیاز هایی که باید یاد بگیرید …
قبل از اینکه از همه ، ابتدا ما چند صفت از CSS3 که ضرورتی برای ساختن این نوع از preloader ها هستند را شرح میدیم.
شبه عناصر before: و after:
شبه عناصر :before و :after همونطور که هم که از اسمشون پیداست میتونند در اول و آخر یک عنصر، عنصر جدیدی ایجاد کنند تا به وسیله ی اون بتونیم کنترل بیشتری برای استایل دادن به عناصر HTML داشته باشیم. برای اطلاعات بیشتر می تونید “CSS ::before Selector ” و ” CSS ::after Selector ” رو مشاهده کنید.
انیمیشن CSS3
وقتی که شما استایل های CSS را داخل قانون @keyframes مشخص می کنید، انیمیشن به تدریج در زمانی که مشخص شده از استایل فعلی به استایل جدید تغییر می یابد.برای دریافت یک تصویر متحرک، باید انیمیشن را به عنصر مرتبط کنید. ” آشنایی با انیمیشن ها ”
نمونه 1 – لودینگ حالت مربع دایره ای
اول – Html
این با استفاده کردن از چهار محدوده(span) ساخته شده. هرکدام یک دایره/مربع هست و خودش یک خود تحرکی بکار رفته در آن دارد.
|
1 2 3 4 5 6 |
<div id="preloader_2"> <span></span> <span></span> <span></span> <span></span> </div> |
دوم – Css
|
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 |
#preloader_2{ position: relative; left: 50%; width: 40px; height: 40px; } #preloader_2 span{ display:block; bottom:0px; width: 20px; height: 20px; background:#9b59b6; position:absolute; } #preloader_2 span:nth-child(1){ animation: preloader_2_1 1.5s infinite ease-in-out; } #preloader_2 span:nth-child(2){ left:20px; animation: preloader_2_2 1.5s infinite ease-in-out; } #preloader_2 span:nth-child(3){ top:0px; animation: preloader_2_3 1.5s infinite ease-in-out; } #preloader_2 span:nth-child(4){ top:0px; left:20px; animation: preloader_2_4 1.5s infinite ease-in-out; } @-keyframes preloader_2_1 { 0% {-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;} 50% {-transform: translateX(-20px) translateY(-10px) rotate(-180deg); border-radius:20px;background:#3498db;} 80% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;} 100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;} } @-keyframes preloader_2_2 { 0% {-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;} 50% {-transform: translateX(20px) translateY(-10px) rotate(180deg);border-radius:20px;background:#f1c40f;} 80% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;} 100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;} } @-keyframes preloader_2_3 { 0% {-transform: translateX(0px) translateY(0px) rotate(0deg);border-radius:0px;} 50% {-transform: translateX(-20px) translateY(10px) rotate(-180deg); border-radius:20px;background:#2ecc71;} 80% {-transform: translateX(0px) translateY(0px) rotate(-360deg);border-radius:0px;} 100% {-transform: translateX(0px) translateY(0px) rotate(-360deg); border-radius:0px;} } @-keyframes preloader_2_4 { 0% {-transform: translateX(0px) translateY(0px) rotate(0deg); border-radius:0px;} 50% {-transform: translateX(20px) translateY(10px) rotate(180deg); border-radius:20px;background:#e74c3c;} 80% {-transform: translateX(0px) translateY(0px) rotate(360deg); border-radius:0px;} 100% {-transform: translateX(0px) translateY(0px) rotate(360deg);border-radius:0px;} } |
نمونه 2 – لودینگ حالت موج رادیویی
اول – Html
این بوسیله ساختن پنج محدوده(span) دست یافته شده ، هرکدام به نمایندگی یک میله رادیوئی.
|
1 2 3 4 5 6 7 |
<div id="preloader_1"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> |
دوم – Css
جلوه به وسیله حرکت دادن عرض هر محدوده از 5px به 30px دست یافته شده. همچنین محدوده روی شاخص عمودی(Y) بوسیله 15px برای جلوه دادن اینکه آن از مرکز نمو داده شده حرکت می کند.
|
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 |
#preloader_1{ position:relative; } #preloader_1 span{ display:block; bottom:0px; width: 9px; height: 5px; background:#9b59b6; position:absolute; animation: preloader_1 1.5s infinite ease-in-out; } #preloader_1 span:nth-child(2){ left:11px; animation-delay: .2s; } #preloader_1 span:nth-child(3){ left:22px; animation-delay: .4s; } #preloader_1 span:nth-child(4){ left:33px; animation-delay: .6s; } #preloader_1 span:nth-child(5){ left:44px; animation-delay: .8s; } @keyframes preloader_1 { 0% {height:5px;transform:translateY(0px);background:#9b59b6;} 25% {height:30px;transform:translateY(15px);background:#3498db;} 50% {height:5px;transform:translateY(0px);background:#9b59b6;} 100% {height:5px;transform:translateY(0px);background:#9b59b6;} } |
امیدوارم که از این آموزش لذت برده باشید ♥
مرسی خیلی خوب بود
دنبال یه همچین لودینگی بودم