纯css无div实现打火机火苗燃烧动画效果代码-html代码-BFW代码库

纯css无div实现打火机火苗燃烧动画效果代码

代码语言：html

所属分类：动画

代码描述：纯css无div实现打火机火苗燃烧动画效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
<style>
:root {
  --bg: #010101;
  --color-orange-light: #e69050;
  --color-orange: #e37a2f;
  --color-orange-dark: #c76723;
  --color-red-light: #bd657f;
  --color-red: #99263a;
  --color-red-dark: #762034;
  --color-white:#acae9e;
  --color-white-light:white;
  --color-white-dark:white;
  --color-metal:#9fa0a2;
  --color-metal-light:#e9eae5;
  --color-metal-dark:#7f7f7f;
  --color-metal-darker:#444444;
  --color-flame: radial-gradient(circle at bottom center, #2d3b69 10%, #a18882 20%, #a18882 30%, #fffeff 40%);
  --color-flame-glow: #c8976b;
}

html {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5vmin;
}

body {
  position: relative;
  top: -3rem;
  left: 1.2rem;
  position: relative;
  width: 1.2rem;
  height: 0.5rem;
  border-radius: 0.2rem 0.5rem 0.1rem 0.1rem;
  background: var(--color-red-dark);
  box-shadow: 0rem -0.2rem 0 var(--color-red), 0rem -0.1rem 0 var(--color-red), -0.1rem -0.3rem 0 var(--color-red-light), -0.1rem -0.2rem 0 var(--color-red-light), 0.6rem 0.2rem 0 var(--bg), -0.1rem 0.2rem 0 var(--color-red-dark), -2rem -0.9rem var(--color-metal-darker), -1.7rem -0.9rem var(--color-metal), -1.9rem -0.9rem var(--color-metal), -2.2rem -0.9rem var(--color-metal), -1.9rem -0.7rem 0.2rem var(--color-metal-light), -1.9rem -0.4rem 0.2rem var(--color-metal-light), -1.9rem -0.1rem 0.2rem var(--color-metal-light), -1.9rem 0.2rem 0.2rem var(--color-metal-light), -1.9rem 0.4rem 0.2rem var(--color-metal-light), -1.8rem -0.7rem 0.2rem var(--color-metal-dark), -1.8rem -0.4rem 0.2rem var(--color-metal-dark), -1.8rem -0.1rem 0.2rem var(--color-metal-dark), -1.8rem 0.2rem 0.2rem var(--color-metal-dark), -1.8rem 0.4rem 0.2rem var(--color-metal-dark), -2.2rem -0.7rem 0.2rem var(--color-metal-dark), -2.2rem -0.4rem 0.2rem var(--color-metal-dark), -2.2rem -0.1rem 0.2rem var(--color-metal-dark), -2.2rem 0.2rem 0.2rem var(--color-metal-dark), -2.2rem 0.4rem 0.2rem var(--color-metal-dark), -1.9rem -0.2rem 0 0.6rem var(--color-metal), -1.9rem -0.4rem 0 0.6rem var(--color-metal), -2.5rem 0.4rem var(--color-metal), -2.5rem 0.2rem var(--color-metal), -1rem 0.2rem var(--color-metal), -2.2rem 0.9rem 0.4rem var(--color-orange-dark), -2.2rem 1.2rem 0.4rem var(--color-orange-dark), -2.2rem 1.5rem 0.4rem var(--color-orange-dark), -2.2rem 1.8rem 0.4rem var(--color-orange-dark), -2.2rem 2.1rem 0.4rem var(--color-orange-dark), -2.2rem 2.4rem 0.4rem var(--color-orange-dark), -2.2rem 2.7rem 0.4rem va.........完整代码请登录后点击上方下载按钮下载查看