css简单实现火焰效果
博客专区 > originDu 的博客 > 博客详情
css简单实现火焰效果
originDu 发表于8个月前
css简单实现火焰效果
  • 发表于 8个月前
  • 阅读 11
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

<!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动画等相关技术就可以实现。

共有 人打赏支持
粉丝 2
博文 44
码字总数 15850
×
originDu
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: