css+svg实现燃烧的蜡烛火苗动画效果代码-html代码-BFW代码库

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%,.........完整代码请登录后点击上方下载按钮下载查看