مراحل انیمیشن دکمه موجی CSS: حالت عادی، حین هاور و پایان اثرhighlearn.ir

آموزش ساخت دکمه موجی با CSS – انیمیشن حرفه‌ای بدون جاوااسکریپت

,

سلام دوستان! امروز می‌خواهیم با هم یک دکمه فوق‌العاده جذاب با افکت موجی دریا طراحی کنیم که کاملاً با CSS قابل ایجاد است. این آموزش برای همه سطوح مناسب است و نیاز به دانش قبلی خاصی ندارد.

پیش‌نیازها

برای این آموزش فقط نیاز دارید:

  1. یک ویرایشگر کد ساده مثل VSCode

  2. مرورگر وب (ترجیحاً Chrome یا Firefox)

  3. کمی اشتیاق برای یادگیری!

 

قدم اول: ساخت فایل‌های پروژه

  1. یک پوشه جدید ایجاد کنید

  2. داخل آن یک فایل با نام index.html بسازید

  3. یک فایل با نام style.css هم ایجاد کنید

قدم دوم: کد HTML پایه

کد زیر را در فایل index.html قرار دهید:

 

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>دکمه موجی CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <button class="wave-btn">کلیک کنید</button>
</body>
</html>

 

قدم سوم: استایل‌دهی پایه (CSS)

حالا به فایل style.css می‌رویم و این کدها را اضافه می‌کنیم:

 

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #f0f8ff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.wave-btn {
    position: relative;
    padding: 15px 30px;
    font-size: 18px;
    color: #0066cc;
    background: transparent;
    border: 2px solid #0066cc;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    font-weight: bold;
}

 

توضیح کدها:

  • body: صفحه را وسط‌چین می‌کند و یک پس‌زمینه آبی روشن قرار می‌دهد

  • .wave-btn: استایل اولیه دکمه ما که شامل:

    • حاشیه آبی

    • متن آبی

    • پس‌زمینه شفاف

    • گوشه‌های گرد

 

قدم چهارم: ساخت افکت موجی

حالا بخش جذاب کار! این کدها را به فایل CSS اضافه کنید:

 

.wave-btn::before {
    content: "";
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #0066cc, #004d99);
    z-index: -1;
    transition: all 0.6s ease-out;
    clip-path: polygon(
        0% 100%,
        100% 100%,
        100% 100%,
        0% 100%
    );
}

.wave-btn:hover {
    color: white;
}

.wave-btn:hover::before {
    bottom: 0;
    clip-path: polygon(
        0% 20%,
        20% 15%,
        40% 25%,
        60% 15%,
        80% 25%,
        100% 15%,
        100% 100%,
        0% 100%
    );
    animation: wave 2s linear infinite;
}

@keyframes wave {
    0% {
        clip-path: polygon(
            0% 20%,
            20% 15%,
            40% 25%,
            60% 15%,
            80% 25%,
            100% 15%,
            100% 100%,
            0% 100%
        );
    }
    50% {
        clip-path: polygon(
            0% 15%,
            20% 25%,
            40% 15%,
            60% 25%,
            80% 15%,
            100% 25%,
            100% 100%,
            0% 100%
        );
    }
    100% {
        clip-path: polygon(
            0% 20%,
            20% 15%,
            40% 25%,
            60% 15%,
            80% 25%,
            100% 15%,
            100% 100%,
            0% 100%
        );
    }
}

 

توضیح بخش‌های مهم:

  1. .wave-btn::before:

    • یک المان ساختگی ایجاد می‌کند

    • ابتدا در پایین دکمه مخفی است (bottom: -100%)

    • با گرادیان آبی طراحی شده

  2. هاور کردن:

    • وقتی موس روی دکمه می‌رود:

      • المان موج از پایین به بالا می‌آید

      • رنگ متن به سفید تغییر می‌کند

      • افکت موجی شروع می‌شود

  3. انیمیشن موج:

    • با clip-path شکل موج ایجاد می‌شود

    • @keyframes حرکت موج را کنترل می‌کند

 

قدم پنجم: تست و تنظیمات نهایی

  1. فایل را در مرورگر باز کنید

  2. روی دکمه هاور کنید و افکت زیبا را ببینید

  3. می‌توانید مقادیر زیر را تغییر دهید:

    • رنگ‌ها در linear-gradient

    • سرعت انیمیشن در 0.6s

    • شکل موج با تغییر اعداد در clip-path

 

جمع‌بندی

در این آموزش کامل یاد گرفتیم:

  • چگونه با CSS افکت موجی ایجاد کنیم

  • چطور از pseudo-element ها استفاده کنیم

  • روش ساخت انیمیشن‌های روان با CSS

  • تکنیک‌های تعاملی بدون جاوااسکریپت

 

حالا نوبت شماست! این کد را امتحان کنید و خلاقیت به خرج دهید. اگر سوالی دارید یا پروژه‌ای با این تکنیک ساخته‌اید، خوشحال می‌شویم در بخش نظرات با ما و دیگران به اشتراک بگذارید.

/0 دیدگاه /توسط
0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *