css实现文字书写新年快乐动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现文字书写新年快乐动画效果代码

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


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

<head>

  <meta charset="UTF-8">


  
  
<style>
html {
  /* FF3.6+ */
  /* Chrome,Safari4+ */
  /* Chrome10+,Safari5.1+ */
  /* Opera 11.10+ */
  /* IE10+ */
  background: -webkit-gradient(linear, left top, left bottom, from(#241d33), color-stop(51%, #171930), to(#091119));
  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;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
#new-year svg {
  width: 100%;
  height: 100%;
}

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

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

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

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

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

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

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

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

@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@-webkit-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;
  }
}
@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..........完整代码请登录后点击上方下载按钮下载查看