Анимационный эффект костра с использованием CSS
Опубликовано: 27 Августа, 2022
В этой статье мы создадим эффект анимации костра с помощью CSS.
Подход:
- Создание деревянных бревен: мы можем использовать свойство clip-path , обрезать многоугольник и применить некоторый поворот, чтобы он выглядел так, как будто один из его концов находится внутри огня.
- Создайте пламя: для пламени мы создадим 5 языков пламени, т.е. красный, оранжевый, желтый, синий и черный. Эти языки пламени можно легко создать с помощью свойства border-radius .
- Эффект мерцания: свойство « Ключевые кадры» используется для создания анимации мерцания. Чтобы добиться этого эффекта, мы можем вращать пламя влево и вправо и в то же время масштабировать его.
- Создайте эффект свечения: это просто div , преобразованный в круг с использованием свойства border-radius .
HTML-код:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link rel = "stylesheet" href = "styles.css" > </ head > < body > < div class = "logs_container" > < div class = "log log_1" ></ div > < div class = "log log_3" ></ div > < div class = "log log_2" ></ div > < div class = "log_circle log_circle_1" ></ div > < div class = "log_circle log_circle_2" ></ div > < div class = "log_circle log_circle_3" ></ div > </ div > < div class = "glowing_circle" ></ div > < div class = "flame_container" > < div class = "flame_red flame" ></ div > < div class = "flame_orange flame" ></ div > < div class = "flame_yellow flame" ></ div > < div class = "flame_blue circle" ></ div > < div class = "flame_black circle" ></ div > </ div > </ body > </ html > |
Код CSS: Ниже приведено содержимое файла «styles.css», используемого в приведенном выше коде.
* { margin : 0 ; padding : 0 ; } body { background : #522e2a ; } .glowing_circle { height : 250px ; width : 250px ; position : fixed ; top : 44% ; left : 52% ; transform: translate( -50% , -50% ); background : #5c3631 ; border-radius: 1000px ; } .log { height : 60px ; width : 30px ; position : fixed ; top : 63.25 vh; background-color : #725442 ; clip-path: polygon( 30% 0% , 70% 0% , 100% 100% , 0% 100% ); } .log_ 1 { left : 49.25 vw; transform: rotate( 45 deg); } .log_ 2 { top : 64 vh; left : 51.25 vw; } .log_ 3 { left : 53.25 vw; transform: rotate( -45 deg); } .log_circle { background-color : #91725c ; position : fixed ; } .log_circle_ 1 { height : 35px ; width : 32px ; border-radius: 40px ; top : 68.75 vh; left : 47.5 vw; } .log_circle_ 2 { height : 37px ; width : 37px ; border-radius: 100px ; top : 71 vh; left : 50.9 vw; } .log_circle_ 3 { height : 35px ; width : 32px ; border-radius: 40px ; top : 68.75 vh; left : 55 vw; } .flame_container { position : fixed ; top : 50 vh; left : 50 vw; transform: translate( -50% , -50% ); width : 60px ; height : 60px ; animation: flame_flickering 3 ms 200 ms ease-in infinite alternate; } .flame { bottom : 0 ; position : absolute ; border-radius: 50% 0 50% 50% ; transform: rotate( -45 deg) scale( 1.5 , 1.5 ); } .flame_yellow { left : 15px ; width : 30px ; height : 20px ; background : gold; box-shadow: 0px 0px 9px 4px gold; } .flame_orange { left : 10px ; width : 40px ; height : 40px ; background : orange; box-shadow: 0px 0px 9px 4px orange; } .flame_red { left : 5px ; width : 50px ; height : 60px ; background : OrangeRed; box-shadow: 0px 0px 5px 4px OrangeRed; } . circle { border-radius: 50% ; position : absolute ; } .flame_blue { width : 10px ; height : 10px ; left : 25px ; bottom : -25px ; background : SlateBlue; box-shadow: 0px 0px 15px 10px SlateBlue; } .flame_black { width : 11px ; height : 11px ; left : 25px ; bottom : -40px ; background : black ; box-shadow: 0px 0px 15px 10px black ; } @keyframes flame_flickering { 0% { transform: rotate( -1 deg); } 15% { transform: rotate( 1 deg) scaleY( 0.95 ); } 30% { transform: rotate( -1 deg) scaleY( 0.9 ); } 45% { transform: rotate( 1 deg) scaleY( 0.95 ); } 60% { transform: rotate( -1 deg) scaleY( 1 ); } 75% { transform: rotate( 1 deg) scaleY( 1.05 ); } 90% { transform: rotate( -1 deg) scaleY( 1 ); } 100% { transform: rotate( 1 deg); } } |
Выход: