ساخت انیمیشن Curl با استفاده از CSS3
شیوه ی کار به این صورت است که ابتدا یک div در html تعریف می کنیم و کلاسی به نام all به آن نسبت می دهیم.
<div class="all">
</div>
<div class="all">
<img src="flower.jpg" alt="flower">
<div class="curl">
</div>
</div>
حالا به سند CSS خود می رویم و استایل دهی را آغاز می کنیم:
در ابتدا عرض و ارتفاع عکس خود را تغییر می دهیم.
img{
width: 400px;
height: 300px;
}
همونطور که مشاهده می کنید در اینجا یک مثلث توسی رنگ بر روی عکس ما وجود دارد. اما در واقع اگر عمیق تر نگاه کنید می توانیم پی ببریم که به جای یک مثلث ، یه مربع بر روی تصویر دیده می شود ؛ نیمه آن رنگ توسی و نیمه ی دیگر آن رنگ سفید دارد اما چون با رنگ background ما یکی است ، انگار تنها یک مثلث وجود دارد.
خب ما از همین روش استفاده می کنیم.
ابتدا می خواهم برای div ای که کلاس curl برای آن در نظر گرفته بودم یک سری استایل تعریف کنم.
.curl{
width: 60px;
Height: 60px;
Background-color: lightgray;
}
.curl{
Position: absolute;
Top:0;
left: 0;
}
همانطور که نظاره می کنید 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 را به 0 تغییر می دهیم تا وقتی که بر روی .all ، hover کردیم ، اندازه ی آن بزرگ تر شود. (لازم به ذکر است که برای ساخت چنین انیمیشنی باید از transition استفاده کنید.)
.curl{
Width: 0;
Height: 0;
Transition: 0.4s;
}
.all:hover .curl{
Width: 60px;
Height: 60px;
Transition: 0.4s; }
