برای ساخت مارپیچ متحرک یا هیبنوتیزمی نیاز است که یه اطلاعات پایه در مورد ویژگی های css داشته باشیم.
ویژگی هایی که در این پروژه استفاده کرده ایم رو اینجا براتون لیست می کنم:
Background: همانطوری که از اسمش پیداست برای قرار دادن تصویر، رنگ، گرادیانت و.. در پس زمینه استفاده می شود.
Margin: ویژگی CSS حاشیه شامل margin-left ، margin-right، margin-top، margin-bottom (بالا-پایین-چپ و راست)
margin برای یک المنت مقدار مثبت اون المنت رو از همسایگانش دورتر می کند، در حالی که مقدار منفی اون رو نزدیکتر می کند.
Content: محتوای یک عنصر را با مقدار تولید شده جایگزین می کند..
Border-radius: گوشه های لبه حاشیه بیرونی عنصر را گرد می کند.
Width: ویژگی width CSS عرض یک عنصر را تنظیم می کند.
Inset: ویژگی inset CSS مختصری است که با ویژگی های بالا، راست، پایین و/چپ برای position ها کاربرد دارد.
Height: ویژگی height CSS ارتفاع یک عنصر را مشخص می کند.
Position: ویژگی position CSS نحوه قرارگیری یک عنصر در یک سند را تنظیم می کند.
حالت های مختلف position:
Absolute : موقعیت ثابت به نسبت عنصر پدرش
Fixed : موقعیت فیکس در صفحه در همه حال
Relative : موقعیت نسبی نسبت به محل اولیه عنصر
Sticky : موقعیت چسبیده
خب حالا بریم سراغ کد هامون
تو مرحله اول با استفاده از css حالت استاتیک گردونه رو ایجاد می کنیم.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.hypnotic-spiral {
width: 150px;
height: 150px;
margin-left: 120px;
position: relative;
border-radius: 50%;
background: repeating-conic-gradient(
#0000,
#ffd60a 1deg 18deg,
#0000 20deg 36deg
);
animation: spin 4s infinite linear;
}
.hypnotic-spiral::before {
content: "";
position: absolute;
border-radius: 50%;
inset: 0;
background: inherit;
animation: inherit;
}
</style>
<title>mblue.ir</title>
</head>
<body>
<h1>Hypnosis spiral Animation</h1>
<div class="hypnotic-spiral"></div>
</body>
</html>که خروجی یه تصویر ثابت میشه
برای انیمیشن دادن به تصویری که ساختیم از @keyframes استفاده می کنیم.
و با استفادع از transform بهش چرخش می دیم.
تکه کد زیر رو به css اضافه کنید تا انیمیشن فعال شود.
@keyframes spin {
100% {
transform: rotate(0.5turn);
}
}خروجی حالا یه تصویر با انیمیشن چرخش میشه.
کد کامل پروژه رو اینجا می ذارم براتون تا راحت تر بتونین ازش استفاده کنید.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.hypnotic-spiral {
width: 150px;
height: 150px;
margin-left: 120px;
position: relative;
border-radius: 50%;
background: repeating-conic-gradient(
#0000,
#ffd60a 1deg 18deg,
#0000 20deg 36deg
);
animation: spin 4s infinite linear;
}
.hypnotic-spiral::before {
content: "";
position: absolute;
border-radius: 50%;
inset: 0;
background: inherit;
animation: inherit;
}
@keyframes spin {
100% {
transform: rotate(0.5turn);
}
}
</style>
<title>mblue.ir</title>
</head>
<body>
<h1>Hypnosis spiral Animation</h1>
<div class="hypnotic-spiral"></div>
</body>
</html>
