رسم نمودار در Css3

 

امروز قصد داریم یک انیمیشن خیلی کوتاه با CSS3 را با یکدیگر ایجاد نمائیم که اگر این روش را یاد بگیرد می توانید به راحتی شروع به رسم نموداری با CSS3 نمائید .

قبل از اینکه وارد مبحث آموزش شویم  بهتر است در ابتدا خروجی را به شما نشان دهیم:

کلیک نمائید !!!

همانطور که خروجی را مشاهده نمودید ، در این بخش قصد داریم این انیمیشن کوتاه را به شما دوستان یاد دهیم .

در ابتدا برای عنصر div یک استایل تعریف می کنیم :

div.r {
width: 100px;
margin: 5px 0;
padding: 5px;
color: white;
background-color:#3bbe8b;
text-align: right;
border-radius: 5px;

}
  • radius : این کد که برابر با 5 می باشد برای مشخص کردن خمیدگی گوشه ها کاربرد دارد.

سپس یک کد هم برای div می نویسیم ،زمانی که اشاره گر ماوس روی شکل ما قرار گرفت :

div.r:hover {
width: 500px;
background-color: #4794d5;
font-weight:bold;
color:yellow;

}

این کد نشان می دهد وقتی که اشاره گر ماوس روی شکل قرار گرفت طول آن به 500 ارتقاع یابد و از لحاظ ظاهری ، رنگ نیز تغییر کند.

حال وقت تعیین سرعت شروع نمودار می باشد :

ease : در ابتدا سرعت کم ، سپس زیاد و مجددا کم می شود :

#ease {
-webkit-transition: 3s ease;
-moz-transition: 3s ease;
-o-transition: 3s ease;
-ms-transition: 3s ease;
transition: 3s ease;
}

linear : با همان سرعتی که شروع می شود ، خاتمه پیدا می کند :

#linear {
-webkit-transition: 3s linear;
-moz-transition: 3s linear;
-o-transition: 3s linear;
-ms-transition: 3s linear;
transition: 3s linear;
}

ease-in : دارای سرعت شروع کندی می باشد :

#easein {
-webkit-transition: 3s ease-in;
-moz-transition: 3s ease-in;
-o-transition: 3s ease-in;
-ms-transition: 3s ease-in;
transition: 3s ease-in;
}

ease-out : دارای سرعت پایان کندی می باشد :

#easeout {
-webkit-transition: 3s ease-out;
-moz-transition: 3s ease-out;
-o-transition: 3s ease-out;
-ms-transition: 3s ease-out;
transition: 3s ease-out;
}

ease-in-out : سرعت شروع و پایان کند می باشد :

#easeinout {
-webkit-transition: 3s ease-in-out;
-moz-transition: 3s ease-in-out;
-o-transition: 3s ease-in-out;
-ms-transition: 3s ease-in-out;
transition: 3s ease-in-out;
}
نکته : ما در این قسمت چون می خواستیم 5 رده بندی سرعت را نمایش دهیم ، آنها را در id های تعریف نمودیم ، اما اگر شما بخواهید میتوانید بدون تعریف کردن id یا class این کار را انجام دهید ، برای اینکار کافیست این 5 ویژگی را در قابل transition انجام دهید.

حال وقت فراخوانی کد استایل ما می باشد :

<div id="ease">ease</div>
<div id="linear">linear</div>
<div id="easein">ease-in</div>
<div id="easeout">ease-out</div>
<div id="easeinout">ease-in-out</div>
نکته : ما در این قسمت ، اندازه سرعت را برابر با 3 ثانیه قرار داده ایم .
نکته : برای رسم اشکال فوق می توانستیم از keyframes نیز  استفاده نمائیم . در قسمت های بعدی مثال هایی را در رابطه با این دستور خواهیم زد.

ارسال نظر