ساخت انیمیشن Curl با استفاده از CSS3

شیوه ی کار به این صورت است که ابتدا یک div در html تعریف می کنیم و کلاسی به نام all به آن نسبت می دهیم.
<div class="all">


</div>
سپس درون این div یک تصویر و یک div دیگر نیز تعریف می کنیم. سپس به div جدید خود کلاسی به نام curl برای آن در نظر می گیریم.
<div class="all">
  <img src="flower.jpg" alt="flower">
  <div class="curl">

  </div>
</div>
دقت داشته باشید که تصویر و فایل index ما هر دو در یک پوشه قرار دارند بنابراین از آدرس نسبی استفاده می کنیم!
حالا به سند CSS خود می رویم و استایل دهی را آغاز می کنیم:
در ابتدا عرض و ارتفاع عکس خود را تغییر می دهیم.
img{
width: 400px;
height: 300px;
}

ما قصد ساخت همچین چیزی را برای عکس خود داریم :

انیمیشن Curl در CSS3

 

 

همونطور که مشاهده می کنید در اینجا یک مثلث توسی رنگ بر روی عکس ما وجود دارد. اما در واقع اگر عمیق تر نگاه کنید می توانیم پی ببریم که به جای یک مثلث ، یه مربع بر روی تصویر دیده می شود ؛ نیمه آن رنگ توسی و نیمه ی دیگر آن رنگ سفید دارد اما چون با رنگ background ما یکی است ، انگار تنها یک مثلث وجود دارد.
خب ما از همین روش استفاده می کنیم.
ابتدا می خواهم برای div ای که کلاس curl برای آن در نظر گرفته بودم یک سری استایل تعریف کنم.
.curl{
width: 60px;
Height: 60px;
Background-color: lightgray;
}
سپس می خواهم که این div دقیقا سمت بالا و چپ عکس ما قرار بگیرد. به این منظور باید postion آن را به absolute تغییر دهیم و left و top آن را برابر 0 قرار دهیم.
.curl{
Position: absolute;
Top:0;
left: 0;
}
تا به اینجا باید به این شکل در آمده باشد:


Curl Css3

 

 

همانطور که نظاره می کنید position این div ما نسبت به صفحه محاسبه می شود ؛ یعنی وقتی دستور top:0  و left:0 را دادیم ، div ما با فاصله ی 0 از صفحه از سمت بالا و چپ قرار گرفت. برای حل این مشکل باید برای div اصلی خود (با کلاس all) یک postion با مقدار relative در نظر بگیریم.  
.all{
Position: relative;
Float: left;
}
حالا می بینیم که این مشکل هم برطرف شده است :
خب در ابتدا background قبلی curl را پاک می کنیم . برای رنگ بندی آن به دو قسمت باید از gradient استفاده کنیم . در نهایت آن را 45 درجه به صورت پادساعتگرد می چرخانیم.
.curl{
Background-image : linear-gradient(-45deg , lightgray 55%, white 60%); }
خب تا الان باید همچین چیزی ساخته باشید :

Curl css3

 

 

حالا در نهایت عرض و ارتفاع curl را به 0 تغییر می دهیم تا وقتی که بر روی .all ، hover کردیم ، اندازه ی آن بزرگ تر شود. (لازم به ذکر است که برای ساخت چنین انیمیشنی باید از transition استفاده کنید.)
.curl{
Width: 0;
Height: 0;
Transition: 0.4s;
}
.all:hover .curl{
Width: 60px;
Height: 60px;
Transition: 0.4s; }

 

Was this answer helpful? 1 Users Found This Useful (13 Votes)