svg加css火柴燃烧动画火焰-html代码-BFW代码库

svg加css火柴燃烧动画火焰

代码语言：html

代码描述：svg加css火柴燃烧动画火焰，利用svg进行火柴轮廓布局，再采用css进行动画实现

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        body {
            font-family: Lato,sans-serif;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            padding: 0;
            margin: 0;
            background: #21034f;
        }
        svg {
            width: 300px;
            margin-top: 60px;
        }
        circle {
            fill: #fff;
            animation: flame 2s ease-out infinite;
        }
        #ci2 {
            animation-delay: -.5s;
        }
        #ci3 {
            animation-delay: -1s;
        }
        #ci4 {
            animation-delay: -1.5s;
        }
@keyframes flame {
            from {
                r: 1px;
                opacity: .8;
            }
            to {
                r: 28px;
                opacity: 0;
            }
        }
    </style>

</head>
<body translate="no">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg8" version="1.1" viewBox="0 0 95.05 113.63">
        <defs id="defs2">
            <linearGradient id="linearGradient857">
                <stop id="stop853" offset="0" stop-color="#d089ff" stop-opacity="1" />
                <stop id="stop855" offset="1" stop-color="#7f00f5" stop-opacity="1" />
            </linearGradient>
            <linearGradient id="linearGradient859" x1="37.47" x2="62.79" y1="9.1" y2="90.19" gradientUnits="userSpaceOnUse" xlink:href="#linearGradient857&q.........完整代码请登录后点击上方下载按钮下载查看