svg+css实现文字描边新年快乐动画效果代码-html代码-BFW代码库

svg+css实现文字描边新年快乐动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现文字描边新年快乐动画效果代码，祝福2023年大家一切顺顺利利。

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
html {
  background: -moz-linear-gradient(top, #241d33 0%, #171930 51%, #091119 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #241d33), color-stop(51%, #171930), color-stop(100%, #091119));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #241d33 0%, #171930 51%, #091119 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #241d33 0%, #171930 51%, #091119 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #241d33 0%, #171930 51%, #091119 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #241d33 0%, #171930 51%, #091119 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#241d33", endColorstr="#091119", GradientType=0);
  /* IE6-9 */
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
}

#new-year {
  position: relative;
  top: 50%;
  width: 90%;
  height: 90%;
  margin: 0 auto 0 auto;
  transform: translateY(-50%);
}
#new-year svg {
  width: 100%;
  height: 100%;
}

.stroke-fill {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  stroke: #efefef;
}

#happy-stroke {
  animation: happy-dash 1.7s linear normal forwards;
}

#n-stroke {
  animation: dash 2s 1.8s linear normal forwards;
}

#ew-stroke {
  animation: dash 2s 2.5s linear normal forwards;
}

#y-stroke {
  animation: dash 2s 3.3s linear normal forwards;
}

#ye-stroke {
  animation: dash 1s 4s linear normal forwards;
}

#ear-stroke {
  animation: dash 2s 4.18s linear normal forwards;
}

#underline-stroke {
  animation: dash 0.5s 5.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) normal forwards;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes happy-dash {
  0% {
    stroke-dashoffset: 1000;
  }
  6% {
    stroke-dashoffset: 976;
  }
  6.01% {
    stroke-dashoffset: 958;
  }
  13% {
    stroke-dashoffset: 936;
  }
  13.01% {
    stroke-dashoffset: 905;
  }
  20% {
    stroke-dashoffset: 896;
  }
  20.01% {
    stroke-dashoffset: 864;
  }
  27% {
    stroke-dashoffset: 840;
  }
  27.01% {
    stroke-dashoffset: 830;
  }
  34% {
    stroke-dashoffset: 808;
  }
  34.01% {
    stroke-dashoffset: 775;
  }
  40% {
    stroke-dashoffset: 764;
  }
  40.01% {
    stroke-dashoffset: 738;
  }
  60% {
    stroke-dashoffset: 688;
  }
  60.01% {
    stroke-dashoffset: 658;
  }
  80% {
    stroke-dashoffset: 610;
  }
  80.01% {
    stroke-dashoffset: 580;
  }
  90% {
    stroke-dashoffset: 555;
  }
  90.01% {
    stroke-dashoffset: 543;
  }
  99.99% {
    stroke-dashoffset: 525;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
</style>




</head>


  <body>
<div id="new-year"><svg id=".........完整代码请登录后点击上方下载按钮下载查看