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

网友评论0