رسم نمودار در 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;
}

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

<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>

اگر براتون جالب بود پس کلیک بر روی پلاس وان ، یک نظری هم بدهید

نویسنده

میلاد حیدری

19 ساله، ساکن تهران و دانشجوی مهندسی کامپیوتر ؛طراح وب سایت ، سئو کار با سابقه کاری ، مطالعه بسیار زیاد در امر سئو و برندینگ اینترنتی و آشنایی با زبان های همچون PHP,JavaScript,html5,CSS3, Jquery ، با زبان انگلیسی آشنایی کامل دارم و شدیدا طرفدار استقلال و فرهاد مجیدی هستم.