svg火苗燃烧动画效果代码
代码语言:html
所属分类:动画
代码描述:svg火苗燃烧动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #211; } #campfire { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 280px; width: 280px; } </style> </head> <body translate="no"> <svg viewBox="0 0 210 210" xmlns="http://www.w3.org/2000/svg" id="campfire"> <defs> <filter id="turb" x="-100%" y="-100%" width="300%" height="300%"> <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2.5" result="turbulence" seed="69" /> <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="35" /> </filter> <filter id="blur" x="-100%" y="-100%" width="300%" height="300%"> <feGaussianBlur in="SourceGraphic" stdDeviation="9" /> </filter> <filter id="blur2" x="-100%" y="-100%" width="300%" height="300%"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> <radialGradient id="grad" cx="50%" cy="100%" fx="50%"> <stop offset="0%" stop-color="#aaf" /> <stop offset="20%" stop-co.........完整代码请登录后点击上方下载按钮下载查看
网友评论0