纯css实现的火苗-html代码-BFW代码库

纯css实现的火苗

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> CSS Flame Animation</title>

    <style>
        body {
            background: black;
        }

        .container {
            margin: 80px auto;
            width: 60px;
            height: 60px;
            position: relative;
            transform-origin: center bottom;
            animation-name: flicker;
            animation-duration: 3ms;
            animation-delay: 200ms;
            animation-timing-function: ease-in;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .flame {
            bottom: 0;
            position: absolute;
            border-bottom-right-radius: 50%;
            border-bottom-left-radius: 50%;
            border-top-left-radius: 50%;
            transform: rotate(-45deg) scale(1.5,1.5);
        }

        .yellow {
            left: 15px;
            width: 30px;
            height: 30px;
            background: gold;
            box-shadow: 0px 0px 9px 4px gold;
        }

        .orange {
            left: 10px;
            width: 40px;
            height: 40px;
            background: orange;
            box-shadow: 0px 0px 9px 4px orange;
        }

        .red {
            left: 5px;
            width: 50px;
            height: 50px;
            background: OrangeRed;
            box-shadow: 0px 0px 5px 4px OrangeRed;
        }

        .white {
            left: 15px;
            bottom: -4px;
            width: 30px;
            height: 30px;
            .........完整代码请登录后点击上方下载按钮下载查看