css简单实现火焰效果

最新推荐文章于 2021-11-05 10:18:44 发布

weixin_34111819

最新推荐文章于 2021-11-05 10:18:44 发布

阅读量223

点赞数

原文链接：https://my.oschina.net/mdu/blog/889159

版权

为什么80%的码农都做不了架构师？>>>

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

转载于:https://my.oschina.net/mdu/blog/889159