纯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 var(--color-orange-dark), -2.2rem 3rem 0.4rem var(--color-orange-dark), -2.2rem 3.3rem 0.4rem var(--color-orange-dark), -2.2rem 3.6rem 0.4rem var(--color-orange-dark), -2.2rem 3.9rem 0.4rem var(--color-orange-dark), -2.2rem 4.2rem 0.4rem var(--color-orange-dark), -2.2rem 4.5rem 0.4rem var(--color-orange-dark), -2.2rem 4.8rem 0.4rem var(--color-orange-dark), -2.2rem 5.1rem 0.4rem var(--color-orange-dark), -2.2rem 5.4rem 0.4rem var(--color-orange-dark), -2.2rem 5.7rem 0.4rem var(--color-orange-dark), -2.2rem 6rem 0.4rem var(--color-orange-dark), -2.2rem 6.3rem 0.4rem var(--color-orange-dark), -2.2rem 6.6rem 0.4rem var(--color-orange-dark), -2.2rem 6.9rem 0.4rem var(--color-orange-dark), -2.2rem 7.1rem 0.4rem var(--color-orange-dark), -2.2rem 7.4rem 0.4rem var(--color-orange-dark), -2.2rem 7.7rem 0.4rem var(--color-orange-dark), -2.2rem 8rem 0.4rem var(--color-orange-dark), -0.4rem 0.6rem 0.3rem var(--color-orange-light), -0.4rem 0.9rem 0.3rem var(--color-orange-light), -0.4rem 1.2rem 0.3rem var(--color-orange-light), -0.4rem 1.5rem 0.3rem var(--color-orange-light), -0.4rem 1.8rem 0.3rem var(--color-orange-light), -0.4rem 2.1rem 0.3rem var(--color-orange-light), -0.4rem 2.4rem 0.3rem var(--color-orange-light), -0.4rem 2.7rem 0.3rem var(--color-orange-light), -0.4rem 3rem 0.3rem var(--color-orange-light), -0.4rem 3.3rem 0.3rem var(--color-orange.........完整代码请登录后点击上方下载按钮下载查看
网友评论0