امروز به شما نحوه ایجاد این انیمیشن پس زمینه را نشان خواهیم داد
این توهم حباب ها را می دهد که به طور تصادفی شکل می گیرند. اما در واقع، ما فقط چهار شکل SVG ثابت را با CSS می چرخانیم.
مرحله 1: ایجاد اشکال
ابتدا شکل ها را رسم می کنیم. من از Illustrator استفاده می کنم اما هر ویرایشگر برداری با پشتیبانی صادرات SVG کار می کند.
با ایجاد یک بوم مربع شروع کنید. من آن را 100 x 100 پیکسل دارم، اما از آنجایی که ما یک تصویر SVG می سازیم، برای هر اندازه صفحه نمایش بدون از دست دادن کیفیت مقیاس می شود. بنابراین، اندازه پیکسل مهم نیست.
شما به دو جفت شکل گرد نیاز دارید. تعداد اشکال خیلی مهم نیست. آنها فقط باید دایره ای باشند و به خوبی توسط ویوپورت برش داده شوند.
علاوه بر این، دایره ها را به نقاط مرکزی اضافه کنید. آنها در تصویر نهایی نمی مانند. آنها فقط یک راه آسان برای بدست آوردن مختصات نقاط مبدا برای چرخش اشکال هستند.
ما در این مرحله به سبک ها و رنگ ها اهمیت نمی دهیم. ما باید فقط اشکال را از Illustrator جمع آوری کنیم. بنابراین بیایید کل تصویر را به عنوان فایل .svg صادر کنیم.
مرحله 2: کد SVG را آماده کنید
در اینجا کد svg صادر شده از Illustrator آمده است:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M37-5C25.1-14.7,5.7-19.1-9.2-10-28.5,1.8-32.7,31.1-19.8,49c15.5,21.5,52.6,22,67.2,2.3C59.4,35,53.7,8.5,37-5Z" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
<path d="M20.6,4.1C11.6,1.5-1.9,2.5-8,11.2-16.3,23.1-8.2,45.6,7.4,50S42.1,38.9,41,24.5C40.2,14.1,29.4,6.6,20.6,4.1Z" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
<path d="M105.9,48.6c-12.4-8.2-29.3-4.8-39.4.8-23.4,12.8-37.7,51.9-19.1,74.1s63.9,15.3,76-5.6c7.6-13.3,1.8-31.1-2.3-43.8C117.6,63.3,114.7,54.3,105.9,48.6Z" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
<path d="M102,67.1c-9.6-6.1-22-3.1-29.5,2-15.4,10.7-19.6,37.5-7.6,47.8s35.9,3.9,44.5-12.5C115.5,92.6,113.9,74.6,102,67.1Z" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
<circle cx="13.2" cy="25.6" r="1.6" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
<circle cx="84.7" cy="93.3" r="1.7" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>
</svg>
بسته به ویرایشگر گرافیکی که استفاده می‌کنید و تنظیمات صادراتی، کد ممکن است متفاوت به نظر برسد. به هر حال، ما باید آن را با حذف تمام سبک های به ارث رسیده از ویرایشگر گرافیکی پاک کنیم. تنها عناصری که باید بمانند عبارتند از:
- را
viewBoxویژگی برای<svg> - 4
<path>عناصر برای حباب ها و آنهاdصفت - 2 عنصر اضافی
هنگامی که یک کد حداقل داشتیم، می‌توانیم آن را در صفحه HTML جاسازی کنیم و تصویر را روی تمام صفحه تنظیم کنیم:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Ksenia Kondrashova">
<style>
svg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M37-5C25.1-14.7,5.7-19.1-9.2-10-28.5,1.8-32.7,31.1-19.8,49c15.5,21.5,52.6,22,67.2,2.3C59.4,35,53.7,8.5,37-5Z"/>
<path d="M20.6,4.1C11.6,1.5-1.9,2.5-8,11.2-16.3,23.1-8.2,45.6,7.4,50S42.1,38.9,41,24.5C40.2,14.1,29.4,6.6,20.6,4.1Z"/>
<path d="M105.9,48.6c-12.4-8.2-29.3-4.8-39.4.8-23.4,12.8-37.7,51.9-19.1,74.1s63.9,15.3,76-5.6c7.6-13.3,1.8-31.1-2.3-43.8C117.6,63.3,114.7,54.3,105.9,48.6Z"/>
<path d="M102,67.1c-9.6-6.1-22-3.1-29.5,2-15.4,10.7-19.6,37.5-7.6,47.8s35.9,3.9,44.5-12.5C115.5,92.6,113.9,74.6,102,67.1Z"/>
<circle cx="13.2" cy="25.6" r="1.6" />
<circle cx="84.7" cy="93.3" r="1.7" />
</svg>
</body>
</html>
نکته بعدی اضافه کردن رنگ ها و نام کلاس ها به عناصر است. به سلامتی coolors.co برای پالت های تصادفی خوب btw.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path fill="#9b5de5" class="out-top" d="M37-5C25.1-14.7,5.7-19.1-9.2-10-28.5,1.8-32.7,31.1-19.8,49c15.5,21.5,52.6,22,67.2,2.3C59.4,35,53.7,8.5,37-5Z"/>
<path fill="#f15bb5" class="in-top" d="M20.6,4.1C11.6,1.5-1.9,2.5-8,11.2-16.3,23.1-8.2,45.6,7.4,50S42.1,38.9,41,24.5C40.2,14.1,29.4,6.6,20.6,4.1Z"/>
<path fill="#00bbf9" class="out-bottom" d="M105.9,48.6c-12.4-8.2-29.3-4.8-39.4.8-23.4,12.8-37.7,51.9-19.1,74.1s63.9,15.3,76-5.6c7.6-13.3,1.8-31.1-2.3-43.8C117.6,63.3,114.7,54.3,105.9,48.6Z"/>
<path fill="#00f5d4" class="in-bottom" d="M102,67.1c-9.6-6.1-22-3.1-29.5,2-15.4,10.7-19.6,37.5-7.6,47.8s35.9,3.9,44.5-12.5C115.5,92.6,113.9,74.6,102,67.1Z"/>
</svg>
من نگه می دارم <svg> پس زمینه شفاف است، بنابراین امکان تنظیم پس زمینه صفحه به رنگ زرد وجود دارد. یا می توانیم تنظیم کنیم background-color برای svg یا رنگ زرد را به تصویر اضافه کنید. ما واقعاً در مورد نحوه استفاده از رنگ ها انعطاف پذیر هستیم.
body {
background-color: #fee440;
}
مرحله 3: شکل ها را متحرک کنید
مرحله بعدی متحرک سازی است <path> عناصر با استفاده از CSS این کار را می توان با افزودن کد CSS معمولی خارج از آن انجام داد <svg> تگ یا با درج الف <style> مستقیماً در کد SVG قرار دهید. من CSS را وارد می‌کنم تا ساختار کد را تمیزتر نگه دارم، و به این دلیل که این امکان را به انیمیشن می‌دهد تا به عنوان یک فایل .svg جداگانه ذخیره شود.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<style>
</style>
</defs>
...
</svg>
هر یک از چهار شکل در یک جهت در یک حلقه بی پایان می چرخند. بنابراین ما فقط به یک تک نیاز داریم keyframes برای چرخش از 0 تا 360 درجه.
هر 4 تا کاملا آهسته اما با سرعت متفاوت حرکت می کنند. بنابراین برای هر لکه، ما فقط مدت زمان انیمیشن و نقطه مبدا را تغییر می دهیم.
برای نقاط مبدا از مختصات دایره ها استفاده می کنیم (به طور خاص، cx و cy ویژگی های). پس از اتمام، می توانیم حلقه ها را حذف کنیم.
<style>
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
.out-top {
animation: rotate 20s linear infinite;
transform-origin: 13px 25px;
}
.in-top {
animation: rotate 10s linear infinite;
transform-origin: 13px 25px;
}
.out-bottom {
animation: rotate 25s linear infinite;
transform-origin: 84px 93px;
}
.in-bottom {
animation: rotate 15s linear infinite;
transform-origin: 84px 93px;
}
</style>
...
// turns to transform-origin: 13px 25px
<circle cx="13.2" cy="25.6" r="1.6" />
// turns to transform-origin: 84px 93px
<circle cx="84.7" cy="93.3" r="1.7" />
تنظیم نقطه مبدا در پیکسل می تواند گیج کننده باشد. در واقع این مقادیر به پیکسل های صفحه نمایش مربوط نمی شود، بلکه مربوط به سیستم مختصات داخلی SVG است که یک بوم با اندازه 100 x 100 پیکسل است که ما در Illustrator ایجاد کردیم. باز هم، SVG به هر اندازه صفحه نمایش مقیاس می شود، بنابراین داشتن پیکسل برای نقطه مبدا به سادگی یک موضوع از نحو CSS است.
انیمیشن تمام شد!
مرحله 4: پاسخگویی را تنظیم کنید
بیایید صفحه را در مرورگر باز کنیم و آن را برای نسبت های مختلف صفحه نمایش امتحان کنیم. به طور پیش فرض، SVG کل را نگه می دارد viewBox همیشه با اضافه کردن فضای اضافی در طرفین قابل مشاهده است. به این ترتیب، ما می توانیم اشکال چرخان دایره ای را به وضوح ببینیم.
در عوض، می‌خواهیم تصویر را برش دهیم تا حباب‌ها فقط تا حدی قابل مشاهده باشند. می توان آن را به راحتی با preserveAspectRatio="xMidYMid slice" صفت.
خودشه! انیمیشن را می توان به صورت درون خطی یا ذخیره در فضای خارجی استفاده کرد blob.svg فایل. حتی بدون کوچک کردن، حجم فایل حدود 1.5 کیلوبایت است که بسیار عالی است
با کد روی کدپن بازی کنید یا نسخه ویدیویی این آموزش را بررسی کنید!
