این دمو ساده نحوه استفاده از انیمیشن های CSS را برای جلوه های بصری جالب توضیح می دهد.
افزودن پس زمینه متحرک به وب سایت یا برنامه شما می تواند به طراحی منحصر به فرد و جالب کمک کند. پس‌زمینه‌های خلاقانه می‌توانند احساسات را القا کنند و تجربه کاربر را افزایش دهند.
راه های زیادی برای ایجاد یک پس زمینه متحرک برای برنامه شما وجود دارد، اما ترکیبی ساده از HTML ساده و CSS به خوبی کار می کند. این مثال را بررسی کنید، یاد بگیرید که کد آن چگونه کار می کند و یک نسخه نمایشی زنده از پس زمینه متحرک نهایی را ببینید.
ساختار HTML را ایجاد کنید
شما می خواهید یک پس زمینه آبی رنگ با حباب هایی ایجاد کنید که رشد می کنند و به سمت بالا شناور می شوند. شما می توانید نتیجه نهایی را در این Codepen مشاهده کنید.
با ایجاد یک بخش با بسته بندی کلاس برای قرار دادن انیمیشن شروع کنید.
سپس، 10 div ایجاد کنید که نشان دهنده حباب ها باشد. در داخل هر div، یک span با نقطه کلاس ایجاد کنید. اگر در HTML تازه کار هستید، می توانید این تگ های ضروری HTML را در 10 دقیقه یاد بگیرید.
<body>
<section class="wrapper">
<h1>Animated Background</h1>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
<div><span class="dot"></span></div>
</section>
</body>
سبک با کد CSS
شما می توانید افکت های پس زمینه باور نکردنی را تنها با استفاده از HTML ایجاد کنید. اما برای این پروژه از CSS برای استایل و متحرک سازی پس زمینه استفاده خواهید کرد.
ابتدا حاشیه و padding را روی 0 قرار دهید تا مطمئن شوید که هیچ فاصله ای در اطراف پس زمینه وجود ندارد.
* {
margin: 0;
padding: 0;
}
سپس با استفاده از کلاس wrapper به بخش والد استایل دهید. این بخش دارای 100% عرض و ارتفاع برای پر کردن کل صفحه خواهد بود. رنگ پس زمینه آن را به عنوان سایه آبی تنظیم کنید و به آن یک موقعیت مطلق بدهید.
.wrapper {
height: 100%;
width: 100%;
background-color: #0066cc;
position: absolute;
}
H1 را با یک موقعیت مطلق نیز طراحی کنید. برای قرار دادن آن در مرکز صفحه، با تنظیم موقعیت بالای سمت چپ آن بر روی 50% شروع کنید. سپس از translate استفاده کنید تا آن را به سمت بالا و چپ حرکت دهید، بنابراین مرکز آن دقیقاً در وسط باشد.
.wrapper h1 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
font-family: sans-serif;
word-spacing: 2px;
color: #fff;
font-size: 2rem;
font-weight: 900;
}
در مرحله بعد به دیوی ها که دایره ای خواهند بود، حالت دهید تا مانند حباب های متحرک عمل کنند. به هر div ارتفاع، عرض و حاشیه بدهید. شعاع حاشیه بزرگ تضمین می کند که مرز دایره ای است. همچنین، با استفاده از ویژگی CSS animation، مدت زمان انیمیشن را تنظیم کنید.
.wrapper div {
height: 60px;
width: 60px;
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 100px;
position: absolute;
top: 10%;
left: 10%;
animation: 4s linear infinite;
}
نقطه ها را با ارتفاع و عرض 5 پیکسل طراحی کنید. به نقطه ها شعاع حاشیه و پس زمینه سفید بدهید. هر یک را کاملاً نزدیک به سمت راست بالای قسمت اصلی خود قرار دهید.
div .dot {
height: 5px;
width: 5px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.5);
position: absolute;
top: 20%;
right: 20%;
}
سپس، از انتخابگر فرزند n برای قرار دادن هر div با تنظیمات مختلف استفاده کنید. می توانید انیمیشن را انیمیشن نام گذاری کنید. بعداً با استفاده از @keyframes آن را تعریف خواهید کرد.
از nth-child(2) برای آدرس دادن به اولین div استفاده کنید زیرا اولین فرزند عنصر .wrapper h1 است.
.wrapper div:nth-child(2) {
top: 20%;
left: 20%;
animation: animate 8s linear infinite;
}
.wrapper div:nth-child(3) {
top: 60%;
left: 80%;
animation: animate 10s linear infinite;
}
.wrapper div:nth-child(4) {
top: 40%;
left: 40%;
animation: animate 3s linear infinite;
}
.wrapper div:nth-child(5) {
top: 66%;
left: 30%;
animation: animate 7s linear infinite;
}
.wrapper div:nth-child(6) {
top: 90%;
left: 10%;
animation: animate 9s linear infinite;
}
می‌توانید به دیوهای پایین‌تر درصد بیشتری بدهید تا در فواصل زمانی مختلف به بالا بروند.
.wrapper div:nth-child(7) {
top: 30%;
left: 60%;
animation: animate 5s linear infinite;
}
.wrapper div:nth-child(8) {
top: 70%;
left: 20%;
animation: animate 8s linear infinite;
}
.wrapper div:nth-child(9) {
top: 75%;
left: 60%;
animation: animate 10s linear infinite;
}
.wrapper div:nth-child(10) {
top: 50%;
left: 50%;
animation: animate 6s linear infinite;
}
.wrapper div:nth-child(11) {
top: 45%;
left: 20%;
animation: animate 10s linear infinite;
}
از @keyframes برای تغییر تدریجی و چرخاندن دایره ها و نقاط در فواصل مختلف استفاده کنید. در کد زیر نقطه ها 70 درجه و دایره ها 360 می چرخند.این چرخش افکت حباب را ایجاد می کند.
@keyframes animate {
0% {
transform: scale(0) translateY(0) rotate(70deg);
}
100% {
transform: scale(1.3) translateY(-100px) rotate(360deg);
}
}
با استفاده از الگوهای CSS می توانید پس زمینه ها را شیک تر کنید. الگوها به شما این امکان را می دهند که امواج، شبکه ها، برگ ها و الگوهای دیگر ایجاد کنید تا به شما در ایجاد انیمیشن های شگفت انگیز کمک کنند.
با استفاده از CSS می توانید بسیاری از ویژگی ها را متحرک کنید
شما می توانید انواع مختلفی از انیمیشن ها را با استفاده از CSS ایجاد کنید. این موارد شامل تغییر رنگ پس‌زمینه و تاخیر در زمان اجرای یک انیمیشن است.
همچنین می‌توانید تعداد دفعات اجرای یک انیمیشن را حتی تا بی نهایت تنظیم کنید. همچنین می توانید جهت حرکت انیمیشن را تنظیم کنید: جلو یا عقب. بازی کردن با انیمیشن ها سرگرم کننده است و می توانید از آنها برای زنده کردن برنامه های خود استفاده کنید.