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

代码语言：html
所属分类：动画
代码描述：css+svg实现新年快乐文字描边动画效果代码
下面为部分代码预览，完整代码请点击下载或在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: 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 {
          -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-.........完整代码请登录后点击上方下载按钮下载查看