# 🧊 Animated Cubes Background ГСомСтричСский Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Ρ„ΠΎΠ½ с Ρ€Π°Π·Π»Π΅Ρ‚Π°ΡŽΡ‰ΠΈΠΌΠΈΡΡ ΠΈ Π²Ρ€Π°Ρ‰Π°ΡŽΡ‰ΠΈΠΌΠΈΡΡ ΠΊΡƒΠ±Π°ΠΌΠΈ. Π‘ΠΎΠ·Π΄Π°Π΅Ρ‚ эффСкт Π³Π»ΡƒΠ±ΠΈΠ½Ρ‹ ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΠΈ для Π»Π΅Π½Π΄ΠΈΠ½Π³ΠΎΠ² ΠΈΠ»ΠΈ гСроичСских (Hero) сСкций. ### ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΠΈ - **3D Motion**: ИспользованиС `scale` ΠΈ `rotate` Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΌ ΠΊΠ°Π΄Ρ€Π΅ создаСт иллюзию ΠΏΠΎΠ»Π΅Ρ‚Π° ΠΊΡƒΠ±ΠΎΠ² ΠΈΠ· Ρ†Π΅Π½Ρ‚Ρ€Π°. - **Pure CSS**: Анимация Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π±Π΅Π· JavaScript, Ρ‡Ρ‚ΠΎ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚ Π½Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ Π½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€. - **Staggered Effect**: Π Π°Π·Π½ΠΎΠ΅ врСмя появлСния ΠΊΡƒΠ±ΠΎΠ² Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ Ρ‡Π΅Ρ€Π΅Π· `animation-delay`. ### ВСхничСскиС Π΄Π΅Ρ‚Π°Π»ΠΈ - **Animation**: Основной Ρ†ΠΈΠΊΠ» `cube` длится 12 сСкунд с ΠΏΠ»Π°Π²Π½Ρ‹ΠΌ Π·Π°Ρ‚ΡƒΡ…Π°Π½ΠΈΠ΅ΠΌ (`opacity: 0`). - **Positions**: ΠšΡƒΠ±Ρ‹ распрСдСлСны ΠΏΠΎ экрану с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ `vw` (ΡˆΠΈΡ€ΠΈΠ½Π°) ΠΈ `vh` (высота). - **Typography**: Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΡˆΡ€ΠΈΡ„Ρ‚ **Montserrat**, ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ ΠΈΠ· Google Fonts.