css+svg实现燃烧的蜡烛火苗动画效果代码
代码语言：html
所属分类：动画
代码描述：css+svg实现燃烧的蜡烛火苗动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
#flame{
position:absolute;
bottom:0%;
left:50%;
transform:translate(-50%,0%);
/* border:2px solid blue; */
}
body{
background:#211;
}
</style>
</head>
<body >
<svg id="flame" width="100" height="200" viewbox="0 0 100 200">
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="color-matrix-blur"></feGaussianBlur>
<feColorMatrix in="blur" mode="matrix" result="color-matrix-filter" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 22 -15"></feColorMatrix>
<feComposite in="SourceGraphic" in2="filter" operator="atop"></feComposite>
</filter>
<filter id="f2" x="-200%" y="-200%" width="1000%" height="1000%">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" />
</filter>
<g class="fluid" filter="url(#goo)">
<circle r="25" fill="hsl(49,100%,70%)" cx="54%" cy="58%" filter="url(#goo)">
<animate attributeName="cx" begin="-1s" values="46%; 54%; 46%" dur="5s" begin="-4s" repeatCount="indefinite"></animate>
<animate attributeName="cy" begin="-1s" values="54%; 58%; 54%" dur="7s" begin="-5s" repeatCount="indefinite"></animate>
</circle>
<circle r="25" fill="hsl(49,100%,70%)" cx="49%" cy="27%" filter="url(#goo)">
<animate attributeName="cx" begin="-1s" values="46%; 54%; 46%" dur="7s" begin="-5s" repeatCount="indefinite"></animate>
<animate attributeName="cy" begin="-1s" values="54%; 58%; 54%" dur="5s" begin="-4s" repeatCount="indefinite"></animate>
</circle>
<circle r="20" fill="hsl(23,100%,50%)" cy="60%">
<animate attributeName="cx" begin="-10s" values="50%; 50%; 50%" dur="3s" repeatCount="indefinite"></animate>
</circle>
<circle r="19.5" fill="hsl(24,100%,50%)" cy="59%">
<animate attributeName="cx" begin="-9.99s" values="49.8%; 50.2%; 49.8%" dur="3s" repeatCount="indefinite"></animate>
</circle>
<circle r="19" fill="hsl(25,100%,50%)" cy="58%">
<animate attributeName="cx" begin="-9.98s" values="49.6%; 50.4%; 49.6%" dur="3s" repeatCount="indefinite"></animate>
</circle>
<circle r="18.5" fill="hsl(26,100%,50%)" cy="57%">
<animate attributeName="cx" begin="-9.97s" values="49.4%; 50.6%; 49.4%" dur="3s" repeatCount="indefinite"></animate>
</circle>
<circle r="18" fill="hsl(27,100%,50%)" cy="56%">
<animate attributeName="cx" begin="-9.96s" values="49.2%; 50.8%; 49.2%" dur="3s" repeatCount="indefinite"></animate>
</circle>
<circle r="17.5" fill="hsl(28,100%,50%)" cy="55%">
<animate attributeName="cx" begin="-9.95s" values="49%; 51%; 49%" dur="3s" repeatCount="indefinite"></animate>
</circle>
<circle r="17" fill="hsl(29,100%,50%)" cy="54%">
<animate attributeName="cx" begin="-9.94s" values="48.8%; 51.2%; 48.8%" dur="3s" repeatCount="indefinite"></animate>
</circle>
<circle r="16.5" fill="hsl(30,100%,50%)" cy="53%">
<animate attributeName="cx" begin="-9.93s" values="48.6%; 51.4%; 48.6%" dur="3s" repeatCount="indefinite"></animate>
</circle>
<circle r="16" fill="hsl(31,100%,50%)" cy="52%">
<animate attributeName="cx" begin="-9.92s" values="48.4%; 51.6%; 48.4%" dur="3s" repeatCount="indefinite"></animate>
</circle>
<circle r="15.5" fill="hsl(32,100%,50%)" cy="51%">
<animate attributeName="cx" begin="-9.91s" values="48.2%; 51.8%; 48.2%" dur="3s" repeatCount="indefinite"></animate>
</circle>
<circle r="15" fill="hsl(33,100%,50%)" cy="50%">
<animate attributeName="cx" begin="-9.9s" values="48%; 52%; 48%" dur="3s" repeatCount="indefinite"></animate>
</circle>
<circle r="14.5" fill="hsl(34,100%,50%)" c.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0