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

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

代码语言：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-da.........完整代码请登录后点击上方下载按钮下载查看