css布局实现燃烧的火苗效果代码-html代码-BFW代码库

css布局实现燃烧的火苗效果代码

代码语言：html

代码描述：css布局实现燃烧的火苗效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        body {
          background: black;
          font-family: Arial, sans-serif;
        }
        
        @keyframes burn {
          0%, 100% { border-radius: 5% 87% 45% 85%; width: 30vmin; }
          20% { border-radius: 5% 85% 49% 82%; }
          40% { border-radius: 0% 85% 45% 87%; width: 28vmin; }
          60% { border-radius: 2% 87% 42% 90%; }
          80% { border-radius: 5% 97% 45% 88%; width: 31vmin; }
        }
        
        /* see comment below */
        #animation:checked ~ .match {
          animation: burn 4s infinite;
          width: 50vmin;
        }
        
        .match {
          /* 
          The animation is disabled because it can be CPU-consuming.
          Uncomment the next CSS line to re-enable it. 
          */
          /* animation: burn 4s infinite; */
          width: 30vmin;
          aspect-ratio: 1;
          background:
            radial-gradient(100% 100% at 90% 90%, #000, #0003 20%, #0000 50%),
            radial-gradient(farthest-side at 110% 120%, #000, #631, #fc0, #0000),
            radial-gradient(at 100% 100%, #fc08, #ff00 60%),
            linear-gradient(135deg, #fff0 20%, #ff0)
            ;
          background-color: #ffe;
          border-radius: 2% 87% 45% 85%;
          box-shadow:
            inset 2vmin 2vmin 2vmin -1.5vmin #fa08,
            inset  -1vmin -1vmin 4vmin -2vmin #00f7,
            inset  0vmin  -1vmin 4vmin -2vmin #00f8,
            inset  -1vmin -1vmin 2vmin -2vmin #000,
            inset  -1vmin -1vmin 3vmin -1vmi.........完整代码请登录后点击上方下载按钮下载查看