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

代码语言：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="new-year-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 200"  >
	<defs>
		<path id="happy-path" d="M190.479,20.124h6.193v7.014h6.768v-7.014h6.221v20.043h-6.221V32.06h-6.768v8.107h-6.193V20.124zM231.698,36.858h-7.031l-0.977,3.309h-6.324l7.533-20.043h6.756l7.531,20.043h-6.485L231.698,36.858zM230.413,32.524l-2.212-7.205l-2.189,7.205H230.413zM246.728,20.124h10.295c2.242,0,3.921,0.533,5.038,1.6c1.116,1.066,1.675,2.584,1.675,4.553c0,2.023-0.608,3.605-1.825,4.744c-1.217,1.14-3.074,1.709-5.571,1.709h-3.391v7.438h-6.221V20.124zM252.948,28.669h1.518c1.194,0,2.032-0.207,2.516-0.622c0.483-0.415,0.725-0.945,0.725-1.593c0-0.629-0.21-1.162-0.629-1.6c-0.419-0.438-1.208-0.656-2.365-0.656h-1.764V28.669zM272.548,20.124h10.295c2.242,0,3.921,0.533,5.038,1.6c1.116,1.066,1.675,2.584,1.675,4.553c0,2.023-0.608,3.605-1.825,4.744c-1.217,1.14-3.074,1.709-5.571,1.709h-3.391v7.438h-6.221V20.124zM278.769,28.669h1.518c1.194,0,2.032-0.207,2.516-0.622c0.483-0.415,0.725-0.945,0.725-1.593c0-0.629-0.21-1.162-0.629-1.6c-0.419-0.438-1.208-0.656-2.365-0.656h-1.764V28.669zM296.373,20.124h6.879l4.038,6.762l4.046-6.762h6.843l-7.793,11.648v8.395h-6.207v-8.395L296.373,20.124z"/>
		<path id="ear-path" d="M406.717,124.56c-1.023,1.445-2.131,3.061-4.259,2.772c-2.259-0.306-2.811-2.237-3.431-4.025c-0.09-0.259-0.105-0.545-0.15-0.819c-1.198-7.405-0.307-14.724,1.18-21.96c0.799-3.895,2.174-7.672,3.292-11.508c-3.756-1.819-5.97-1.39-8.683,2.002c-1.294,1.616-2.771,1.333-4.323,0.876c-1.474-0.433-2.901-0.685-3.395-2.762c-0.613-2.582-1.802-5.054-2.979-7.458c-0.29-0.592-1.583-1.118-2.265-0.972c-0.666,0.143-1.388,1.093-1.657,1.842c-0.966,2.682,0.569,6.094,3.312,8.143c0.597,0.446,1.206,1.379,1.187,2.07c-0.252,8.868-1.593,17.586-4.166,26.074c-0.714,2.359-1.863,4.654-3.183,6.745c-1.709,2.709-3.949,2.404-5.259-0.554c-0.473-1.068-0.806-2.224-1.03-3.372c-1.571-8.042-0.969-16.072,0.276-24.081c0.541-3.475,1.262-6.922,2.03-11.08c-2.842,0.461-5.271,0.856-8.04,1.305c-2.777-2.893-5.969-3.495-10.297-1.569c-3.491,1.554-5.731,4.333-7.347,7.667c-3.203,6.611-4.091,13.695-3.843,20.916c0.114,3.297-0.852,6.144-2.391,8.896c-1.642,2.934-4.114,4.489-7.558,4.103c-3.216-0.362-5.17-2.456-6.106-5.293c-0.84-2.544-1.691-7.769-1.691-10.524l0.084-2.648c0.247-5.555,1.097-10.806,3.217-15.757c0.632-1.479,1.789-3.119,3.12-4.198l-2.099-2.424c-5.873,2.566-8.426,7.539-10.233,12.924c-0.868,2.546-2.155,7.69-2.04,10.239l0.069,2.272c-0.083,3.547,0.183,6.039,1.506,10.314c1.837,5.941,6.042,9.225,11.444,9.458c5.932,0.258,9.823-2.789,12.34-7.917c0.259-0.528,0.543-1.044,0.944-1.81c0.315,1.01,0.517,1.725,0.759,2.425c0.908,2.628,2.006,5.249,5.117,5.746c3.177,0.507,5.182-1.707,6.457-4.084c2.088-3.894,3.695-8.044,5.508-12.085c0.164-0.368,0.358-0.723,0.74-1.487c0.055,1.197,0.045,1.896,0.125,2.585c0.502,4.368,1.067,8.74,3.901,12.351c2.864,3.646,7.474,3.907,10.706,0.594c0.956-0.98,1.946-2.116,2.394-3.369c1.42-3.972,2.914-7.966,3.791-12.077c1.398-6.56,2.325-13.221,3.421-19.648c2.08,0.713,4.336,1.487,6.505,2.23c-0.692,4.938-1.538,10.006-2.083,15.107c-0.541,5.071-0.499,10.156,1.406,15.017c1.645,4.198,5.27,5.917,9.611,4.661c4.363-1.262,7.274-3.958,8.469-15.164l-0.934,0.089C409.422,119.302,409.147,121.126,406.717,124.56zM360.222,112.837c-0.603,2.653-1.947,5.189-3.273,7.602c-0.5,0.912-1.993,1.929-2.876,1.802c-0.886-0.128-2.027-1.518-2.26-2.538c-0.585-2.551-0.721-5.207-1.161-8.857c0.768-3.898,1.515-8.763,2.736-13.507c0.877-3.414,2.829-6.417,6.002-8.203c1.146-0.644,2.727-0.679,4.103-0.657c0.426,0.007,1.276,1.201,1.183,1.714C363.292,97.761,361.926,105.338,360.222,112.837zM419.532,115.219c0-12.133,0.254-46.425,0.254-52.913c0-0.084,0.59-0.084,0.674-0.084c0.926,0,8.088,6.909,8.088,7.583c0,3.117-4.717,38.252-4.717,46.762c-0.676,0.337-1.602,0.59-2.359,0.59C420.376,117.157,419.532,116.651,419.532,115.219zM426.19,127.857c0,2.696-1.686,5.392-4.889,5.392c-3.874,0-5.392-2.274-5.392-4.802c0-2.949,2.107-6.066,5.308-6.066C424.505,122.381,426.19,125.161,426.19,127.857z"/>
		<path id="y-path" d="M284.696,170.172c2.44-0.078,5.23-0.183,7.442-1.135c5.449-2.347,8.231-7.203,9.789-12.566c1.444-4.97,2.521-10.111,3.114-15.251c0.979-8.493-0.432-26.082-0.432-26.082l-0.169-2.341c-0.758-7.796-2.058-16.429-3.284-24.289c-0.423,1.21-0.863,2.415-1.265,3.631c-3.14,9.52-6.693,18.855-12.234,27.295c-2.69,4.095-5.7,7.95-9.874,10.625c-1.839,1.18-3.917,2.179-6.024,2.716c-6.749,1.715-11.068-1.434-11.976-8.368c-0.948-7.247,0.464-14.272,1.939-21.281c2.25-10.681,4.739-21.332,4.853-32.316c0.03-2.888-0.238-5.858-0.924-8.654c-0.959-3.902-3.937-5.207-7.319-3.044c-2.317,1.482-4.464,3.613-5.961,5.924c-4.692,7.242-6.827,15.456-7.992,23.912c-0.405,2.947-0.479,5.969-0.369,8.944c0.051,1.351,0.957,2.659,1.401,4.012c0.203,0.618,0.225,1.296,0.329,1.946c-0.743-0.149-1.937-0.068-2.153-0.488c-0.971-1.891-2.089-3.862-2.39-5.916c-1.99-13.571,1.077-25.854,10.161-36.31c3.738-4.303,8.579-6.77,14.435-6.909c4.879-0.116,7.738,1.895,9.072,6.569c1.468,5.149,1.241,10.41,0.129,15.511c-2.142,9.832-4.768,19.556-7.025,29.364c-1.231,5.35-2.259,10.765-1.54,16.321c0.682,5.263,3.711,7.056,8.691,5.091c3.983-1.571,6.778-4.603,9.171-7.966c7.643-10.748,11.921-22.843,13.908-35.793c0.686-4.465,1.089-8.973,1.705-13.45c0.179-1.293,0.417-2.677,1.049-3.779c0.518-0.906,1.659-1.457,2.523-2.165c0.622,0.915,1.563,1.754,1.8,2.759c0.459,1.949,0.477,3.998,0.758,5.993c0.914,6.464,1.869,12.923,2.798,19.386c0.808,5.636,1.886,13.371,2.661,18.825l0.207,2.318c0.615,8.838,0.812,17.805-0.532,26.59c-1.421,9.283-3.696,18.275-9.8,25.778c-3.688,4.534-8.481,7.071-14.315,7.646c-0.942,0.093-1.849,0.114-2.717,0.068L284.696,170.172z"/>
		<path id="ye-path" d="M287.053,173.223c-9.205,0.907-15.088-5.002-14.533-14.351c0.552-9.3,4.909-16.955,10.026-24.326c5.606-8.077,11.912-15.37,20.146-20.848c0.546-0.364,1.748-0.901,1.748-0.901s2.031-0.758,3.403-1.14s3.649-0.766,3.649-0.766c2.687-0.505,4.427-0.816,6.499-0.763c4.118,0.106,8.034-0.783,8.034-0.783c7.391-1.539,12.221-11.504,10.252-18.448c-0.608-2.147-2.502-2.798-4.165-1.3l-2.16.........完整代码请登录后点击上方下载按钮下载查看