css简单实现火焰效果

时间：2024-03-12 12:11:38

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="flame.css"/>
<style>
/*清除边距*/
body, div {
    margin: 0;
    padding: 0;
}
/*设置背景色*/
body {
    background: #000;
}

.flame {
    width: 300px;
    height: 300px;
    margin: 200px auto;
    /*background: #FFFFFF;*/
    position: relative;
}
/*火焰效果，用简单div实现*/
.flame div:nth-child(-n+6) {
    width: 0px;
    height: 0px;
    background: #D81818;
    border-radius: 20%;
    transform: rotateZ(45deg);
    position: absolute;
    left: 45%;
    top: 60%;
}

.flame div:nth-child(1) {
    animation: gun 6s linear Infinite;
}

.flame div:nth-child(2) {
    animation: gun1 6s linear Infinite;
    animation-delay: 1s;
}

.flame div:nth-child(3) {
    animation: gun 6s linear Infinite;
    animation-delay: 2s;
}
.flame div:nth-child(4) {
    animation: gun1 6s linear Infinite;
    animation-delay: 3s;
}
.flame div:nth-child(5) {
    animation: gun 6s linear Infinite;
    animation-delay:4s;
}
.flame div:nth-child(6) {
    animation: gun1 6s linear Infinite;
    animation-delay:5s;
}
/*添加伪类元素实现火花效果*/
.flame1::before {
    content: "";
    width: 0px;
    height: 0px;
    background: #FFC001;
    border-radius: 50%;
    transform: rotateZ(45deg);
    position: absolute;
    left: 45%;
    top: 60%;
    animation: gun2 4s ease-in Infinite;
    animation-delay: 1s;
    background: radial-gradient(
            5px at center,
            red,
            #FFC001
    )
}
.flame3::before {
    content: "";
    width: 0px;
    height: 0px;
    background: #FFC001;
    border-radius: 50%;
    transform: rotateZ(45deg);
    position: absolute;
    left: 45%;
    top: 60%;
    animation: gun2 4s ease-in Infinite;
    animation-delay: 3s;
    background: radial-gradient(
            5px at center,
            red,
            #FFC001
    )
}
.flame5::before {
    content: "";
    width: 0px;
    height: 0px;
    background: #FFC001;
    border-radius: 50%;
    transform: rotateZ(45deg);
    position: absolute;
    left: 45%;
    top: 60%;
    animation: gun2 4s ease-in Infinite;
    animation-delay: 6s;
    background: radial-gradient(
            5px at center,
            red,
            #FFC001
    )
}
/*设置动画实现火焰上升*/
@keyframes gun {
    0% {
        width: 10px;
        height: 10px;
        transform: translateY(0px) translateX(0px) rotateZ(45deg);
    }
    100% {
        width: 40px;
        height: 40px;
        transform: translateY(-200px) translateX(-30px) rotateZ(45deg);
        opacity:0.2;
    }
}

@keyframes gun1 {
    0% {
        width: 10px;
        height: 10px;
        transform: translateY(0px) translateX(0px) rotateZ(45deg);
    }
    100% {
        width: 40px;
        height: 40px;
        transform: translateY(-200px) translateX(30px) rotateZ(45deg);
        opacity:0.2;
    }
}

@keyframes gun2 {
    0% {
        width: 3px;
        height: 3px;
        transform: translateY(0px) translateX(0px) rotateZ(45deg);
    }
    50%{
        width: 5px;
        height: 5px;
        transform: translateY(-130px) translateX(-30px) rotateZ(45deg);
    }
    100% {
        width: 5px;
        height: 5px;
        transform: translateY(-200px) translateX(-70px) rotateZ(45deg);
    }
}
/*树枝*/
.branch1, .branch2 {
    width: 260px;
    height: 20px;
    background: #DB4732;
    position: absolute;
    top: 80%;
    left: 8%;
}

.branch1 {
    transform: rotateZ(15deg);
}

.branch2 {
    transform: rotateZ(-15deg);
}
</style>    
</head>
<body>
<div class="flame">
    <div class="flame1"></div>
    <div class="flame2"></div>
    <div class="flame3"></div>
    <div class="flame4"></div>
    <div class="flame5"></div>
    <div class="flame6"></div>
    <div class="flame7"></div>
    <div class="flame8"></div>
    <div class="branch1"></div>
    <div class="branch2"></div>
</div>
</body>
</html>

　　这是一个简单用css+div布局实现的火焰效果，在网上看到觉得挺有趣，也比较美观，所以模仿一下。

这里没有用任何的js代码，仅用css动画等相关技术就可以实现。

相关文章