آموزش ساخت افکت تصویر با تم اینستاگرام و انیمیشن چرخش دوره‌ای در CSS

مقدمه

شبکه‌های اجتماعی همواره منبع الهام‌بخش بزرگی برای طراحان وب بوده‌اند. یکی از جذاب‌ترین المان‌های بصری اینستاگرام، حلقه‌ی گرادیان رنگی دور عکس‌های پروفایل در بخش استوری است. در این آموزش قصد داریم نه تنها این افکت رنگی فوق‌العاده را با CSS پیاده‌سازی کنیم، بلکه یک انیمیشن چرخشی دوره‌ای به آن اضافه کنیم که هر چند ثانیه یک‌بار با یک چرخش نرم، پویایی خاصی به وب‌سایت شما ببخشد.

ساختار HTML پروژه

برای شروع کار، ابتدا به یک ساختار HTML ساده نیاز داریم. ما یک ظرف نگه‌دارنده (Container) برای تصویر ایجاد می‌کنیم و خود تصویر را درون یک بخش با کلاس مربوط به گرادیان اینستاگرام قرار می‌دهیم:

< div class="insta-profile-wrapper" >
    < div class="insta-story-ring" >
        < img src="https://picsum.photos/150/150" alt="پروفایل کاربر" / >
    < / div >
< / div >

استایل‌دهی و ایجاد افکت اینستاگرام با CSS

رنگ‌های به کار رفته در لوگو و حلقه استوری اینستاگرام ترکیبی از رنگ‌های زرد، نارنجی، سرخابی و بنفش است. ما این ترکیب رنگی را با استفاده از ویژگی linear-gradient در پس‌زمینه حلقه‌ دور عکس اعمال می‌کنیم. همچنین برای ایجاد فاصله بین عکس و گرادیان، یک مرز (Border) همرنگ با پس‌زمینه به تصویر اصلی می‌دهیم.

کدهای CSS مربوط به استایل‌دهی:

.insta-profile-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.insta-story-ring {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    padding: 5px; /* فاصله گرادیان تا لبه بیرونی */
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    /* اتصال انیمیشن چرخش */
    animation: periodic-rotate 10s ease-in-out infinite;
}

.insta-story-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid #1e1e1e; /* ایجاد فاصله سفید یا تاریک بین عکس و گرادیان */
    object-fit: cover;
}

انیمیشن چرخش دوره‌ای (Periodic Rotation)

برای اینکه چرخش تصویر به صورت مداوم و خسته‌کننده نباشد، از تکنیک زمان‌بندی در Keyframes استفاده می‌کنیم. در این روش، تصویر در اکثر مواقع ثابت است (مثلاً از درصد 0 تا 80 زمان انیمیشن) و فقط در انتهای بازه زمانی (از 80% تا 100%) یک دور کامل می‌چرخد. این کار باعث ایجاد حالت مکث و چرخش ناگهانیِ جذاب می‌شود.

@keyframes periodic-rotate {
    0%, 80% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

نتیجه‌گیری

با ترکیب ویژگی‌های ساده اما قدرتمند CSS مانند linear-gradient، فرآیند گرد کردن لبه‌ها با border-radius و انیمیشن‌های شخصی‌سازی‌شده، می‌توانید المان‌های تعاملی و بسیار مدرنی خلق کنید که تجربه کاربری وب‌سایت شما را بهبود می‌بخشند.

پیشنمایش