svg文本路径爱心动画效果-html代码-BFW代码库

svg文本路径爱心动画效果

代码语言：html

所属分类：表白

代码描述：svg文本路径爱心动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body{background: #be0e2e;font-family: consolas; color:white; }
svg {
  
  width: 110vmin;
  display:block;
  position:absolute;
  margin:auto;
  top:0;bottom:0;left:0;right:0;
  z-index:1;
}
text {
  fill: white;
  font-family: consolas;
  font-size: 9px;
}

p{position:absolute;z-index:2}

label{-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;opacity:.8}
</style>

</head>
<body translate="no">
<p><label><input type="checkbox" id="cb" />See the path</label></p>
<svg id="theSvg" viewBox="-120 -30 240 180" enable-background="new 0 0 174 148" xml:space="preserve">
<defs>
<filter id="f" filterUnits="userSpaceOnUse" x="-120" y="-30" width="120%" height="120%">
<feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur"></feGaussianBlur>
<feOffset in="blur" dx="3" dy="5" result="shadow"></feOffset>
<feFlood flood-color="rgba(3,0,0,1)" result="color" />
<feCom.........完整代码请登录后点击上方下载按钮下载查看