svg+css实现鼠标按住不放对着镜子哈气模糊效果代码
代码语言:html
所属分类:其他
代码描述:svg+css实现鼠标按住不放对着镜子哈气模糊效果代码
代码标签: svg css 鼠标 按住 不放 对着 镜子 哈气 模糊
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; width: 100vw; height: 100vh; } circle { r: 5%; } circle.grow { r: 30%; transition: r 1s ease-out; } circle.shrink { r: 0%; transition: r 10s ease-in; } text { font-size: 2vw; font-family: sans-serif; fill: yellow; stroke: black; stroke-width: 0.4vw; paint-order: stroke fill; } </style> </head> <body > <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"> <filter id="whiff" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%"> <feImage href="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png" preserveAspectRatio="xMidYMid slice" result="back"/> <feGaussianBlur stdDeviation="40" in="SourceGraphic"/> <feComponentTransfer result="cutoff"> <feFuncA type="linear" slope="19" intercept="-9"/> </feComponentTransfer> <feComposite operator="in" in="back" in2="blur"/> <feGaussianBlur stdDeviation=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0