قلب فوریه ❤

این یک ارسال برای Frontend Challenge است – نسخه فوریه ، CSS Art: فوریه.
الهام
فوریه یک ماه تحول است. این کار با آخرین سرماخوردگی زمستان آغاز می شود ، عشق را در روز ولنتاین در آغوش می گیرد ، در طول ماه تاریخ سیاه ، از مقاومت در برابر تجلیل می کند و از اولین علائم بهار استقبال می کند. هنر CSS من این سفر را با یک انیمیشن قلب مورفین ، که نمادی از عناصر اصلی فوریه است ، ضبط می کند:
یک قلب یخ ❄ (نمایانگر آخرین نفس زمستان)
ضربان قرمز ضرب و شتم ❤ (نماد عشق و اتصال)
یک مشت محکم ✊🏽 (نشانگر قدرت ، توانمندسازی و ماه تاریخ سیاه)
یک گل شکوفه 🌸 (نشانه گذار به بهار و تجدید)
این قطعه هنری پویا نشان دهنده چگونگی بافتن های فوریه ، احساسات ، تاریخ ها و چرخه های طبیعی مختلف است.
نسخه آزمایشی
Import React ، {Usestate} از 'React' ؛
واردات {StageAnimation} از './components/stageanimation' ؛
واردات {ذرات بازپرداخت} از './components/particlesbackground' ؛
واردات {درخشش ، ماه ، خورشید} از 'lucide-reag-act' ؛
واردات './styles/animations.css' ؛
برنامه تابع ()
محاصره کردن [isDarkMode, setIsDarkMode] = useState (درست) ؛
بازگشت (
{/* Theme Toggle */}
Click to witness the transformation
"From winter's embrace to spring's renewal,
through the strength of unity to the blossoming of hope."
A journey of transformation and growth
🔹 مفهوم سازی: من می خواستم با استفاده از انیمیشن های صاف ، شیب ها و شکل دادن به شکل ، مرزهای هنر CSS را فشار دهم تا یک داستان را بیان کنم.
دستیابی به انتقال شکل یکپارچه بدون SVG به فیلترهای کلیپ مسیر و CSS نیاز دارد.
ایجاد یک اثر سه بعدی برای عمق جعبه سایه ، تبدیل و چشم انداز.
اطمینان از زمان صاف بین انیمیشن ها با استفاده از متغیرهای KeyFrames و CSS.
laving یادگیری کلیدی:
انیمیشن های پیشرفته CSS: من مسیر کلیپ ، فیلتر و تبدیل را برای شکل گیری شکل بررسی کردم.
عمق لایه بندی در CSS خالص: سایه ها و دیدگاه ها به تقویت جذابیت بصری کمک می کند.
تعامل در CSS Art: Hover و کلیک جلوه ها یک لمس جذاب را اضافه کردند.
💡 مراحل بعدی:
من دوست دارم با اضافه کردن جلوه های صوتی ، کاوش در ادغام WebGL یا ایجاد انتقال کنترل کاربر ، این قطعه را بیشتر اصلاح کنم.