侧边栏壁纸
  • 累计撰写 35 篇文章
  • 累计收到 1 条评论

svg 之动画

逸曦穆泽
2021-06-23 / 0 评论 / 39 阅读 / 正在检测是否收录...

我知道,你可能很渴望,但你并不想,这很拉扯;撕裂的自我,让你发现自己还是平凡而普通的一个;可是,你还是受自身感官的影响,但并不否认的是,我们都是视觉性动物!哈哈。

才艺展示:

!(才艺展示)[https://img-blog.csdnimg.cn/20210623173136637.gif]

学习地点:

svg 菜鸟恋爱手册

真理实践:

亲自动手,丰衣足食!
脚踏实地,学得能力!

技能装饰(CSS):
/* (1) */
svg .lineBlack {stroke:#000;stroke-dasharray: 340; stroke-dashoffset: 40; animation: dashBlack 1.5s linear alternate infinite; }
svg .lineRed {stroke:red;stroke-dasharray: 30; stroke-dashoffset: 320; animation: dashRed 1.5s linear infinite; }
@keyframes dashBlack { from { stroke-dashoffset: 360; } to { stroke-dashoffset: 40; }}
@keyframes dashRed { from { stroke-dashoffset: 280; } to { stroke-dashoffset: -40; }}
 
/* (2) */
.circle{animation: aroundInfinite 3s infinite alternate linear forwards;}
@keyframes aroundInfinite {
    0% {fill:hsl(0, 100%, 50%);transform:translateX(0);}
    10% {fill:hsl(30, 100%, 50%);transform:translateX(9%);}
    20% {fill:hsl(60, 100%, 50%);transform:translateX(18%);}
    30% {fill:hsl(90, 100%, 50%);transform:translateX(27%);}
    40% {fill:hsl(120, 100%, 50%);transform:translateX(36%);}
    50% {fill:hsl(150, 100%, 50%);transform:translateX(45%);}
    60% {fill:hsl(180, 100%, 50%);transform:translateX(54%);}
    70% {fill:hsl(210, 100%, 50%);transform:translateX(63%);}
    80% {fill:hsl(240, 100%, 50%);transform:translateX(72%);}
    90% {fill:hsl(270, 100%, 50%);transform:translateX(81%);}
    100% {fill:hsl(300, 100%, 50%);transform:translateX(90%);}
}
/* (3) */
.cs {animation: animatAll 6s infinite alternate ease-in-out forwards;}
.csAnima {animation: animatAll 5s infinite alternate ease-in-out forwards;}
@keyframes animatAll {
    0% {fill:hsl(0, 100%, 50%);}
    20% {fill:hsl(50, 100%, 50%)}
    40% {fill:hsl(100, 100%, 50%)}
    50% {fill:hsl(150, 100%, 50%)}
    60% {fill:hsl(200, 100%, 50%)}
    80% {fill:hsl(250, 100%, 50%)}
    100% {fill:hsl(300, 100%, 50%)}
}
/* (4) */
.item {animation: itemAm4 6s infinite linear;}
.item2 {animation: itemAm3 6s infinite linear;}
.item3 {animation: itemAm2 6s infinite linear;}
.item4 {animation: itemAm 6s infinite linear;}
@keyframes itemAm {
    0% {fill:hsl(0, 100%, 50%)}
    10% {fill:hsl(30, 100%, 50%)}
    20% {fill:hsl(60, 100%, 50%)}
    30% {fill:hsl(120, 100%, 50%)}
    40% {fill:hsl(150, 100%, 50%)}
    50% {fill:hsl(180, 100%, 50%)}
    60% {fill:hsl(210, 100%, 50%)}
    70% {fill:hsl(240, 100%, 50%)}
    80% {fill:hsl(270, 100%, 50%)}
    90% {fill:hsl(300, 100%, 50%)}
    100% {fill:hsl(330, 100%, 50%)}
}
@keyframes itemAm2 {
     0% {fill:hsl(30, 100%, 50%)}
     10% {fill:hsl(60, 100%, 50%)}
     20% {fill:hsl(120, 100%, 50%)}
     30% {fill:hsl(150, 100%, 50%)}
     40% {fill:hsl(180, 100%, 50%)}
     50% {fill:hsl(210, 100%, 50%)}
     60% {fill:hsl(240, 100%, 50%)}
     70% {fill:hsl(270, 100%, 50%)}
     80% {fill:hsl(300, 100%, 50%)}
     90% {fill:hsl(330, 100%, 50%)}
    100% {fill:hsl(0, 100%, 50%)}
}
@keyframes itemAm3 {
    0% {fill:hsl(60, 100%, 50%)}
    10% {fill:hsl(120, 100%, 50%)}
    20% {fill:hsl(150, 100%, 50%)}
    30% {fill:hsl(180, 100%, 50%)}
    40% {fill:hsl(210, 100%, 50%)}
    50% {fill:hsl(240, 100%, 50%)}
    60% {fill:hsl(270, 100%, 50%)}
    70% {fill:hsl(300, 100%, 50%)}
    80% {fill:hsl(330, 100%, 50%)}
    90% {fill:hsl(0, 100%, 50%)}
    100% {fill:hsl(30, 100%, 50%)}
}
@keyframes itemAm4 {
    0% {fill:hsl(120, 100%, 50%)}
    10% {fill:hsl(150, 100%, 50%)}
    20% {fill:hsl(180, 100%, 50%)}
    30% {fill:hsl(210, 100%, 50%)}
    40% {fill:hsl(240, 100%, 50%)}
    50% {fill:hsl(270, 100%, 50%)}
    60% {fill:hsl(300, 100%, 50%)}
    70% {fill:hsl(330, 100%, 50%)}
    80% {fill:hsl(0, 100%, 50%)}
    90% {fill:hsl(30, 100%, 50%)}
    100% {fill:hsl(60, 100%, 50%)}
}
/* (5) */
.lc {animation: lc-animation 3s infinite alternate ease-in-out forwards;}
@keyframes lc-animation {
    0% {fill:#f00;}
    20% {fill:#FF7F00;}
    40% {fill:#ff0;}
    50% {fill:#0f0;}
    60% {fill:#0ff;}
    80% {fill:#00f;}
    100% {fill:#8B00ff;}
}
.maskImg{
    width:150px;
    height:137px;
    -webkit-mask-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
}
.linze_svg_mask{-webkit-mask-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));}
.linze_svg_graph{animation: linzeAnimat5 5s infinite alternate ease-in-out forwards;}
.linze_svg_graph2{animation: linzeAnimat6 5s infinite alternate ease-in-out forwards;}
.linze_svg_graph3{animation: linzeAnimat 5s infinite alternate ease-in-out forwards;}
.linze_svg_graph4{animation: linzeAnimat2 5s infinite alternate ease-in-out forwards;}
.linze_svg_font{animation: linzeAnimat 8s infinite  alternate ease-in-out forwards;}
.linze_svg_font2{animation: linzeAnimat2 8s infinite  alternate ease-in-out forwards;}
.linze_svg_font3{animation: linzeAnimat3 8s infinite  alternate ease-in-out forwards;}
.linze_svg_font4{animation: linzeAnimat4 8s infinite  alternate ease-in-out forwards;}
@keyframes linzeAnimat{
    0% {fill:hsl(180, 100%, 50%)} 20% {fill:hsl(240, 100%, 50%)} 40% {fill:hsl(300, 100%, 50%)}
    60% {fill:hsl(0, 100%, 50%);} 80% {fill:hsl(60, 100%, 50%)} 100% {fill:hsl(120, 100%, 50%)}
}
@keyframes linzeAnimat2 {
    0% {fill:hsl(240, 100%, 50%)} 20% {fill:hsl(300, 100%, 50%)} 40% {fill:hsl(0, 100%, 50%);}
    60% {fill:hsl(60, 100%, 50%)} 80% {fill:hsl(120, 100%, 50%)} 100% {fill:hsl(180, 100%, 50%)}
}
@keyframes linzeAnimat3 {
    0% {fill:hsl(300, 100%, 50%)} 20% {fill:hsl(0, 100%, 50%);} 40% {fill:hsl(60, 100%, 50%)}
    60% {fill:hsl(120, 100%, 50%)} 80% {fill:hsl(180, 100%, 50%)} 100% {fill:hsl(240, 100%, 50%)}
}
@keyframes linzeAnimat4 {
    0% {fill:hsl(0, 100%, 50%);} 20% {fill:hsl(60, 100%, 50%)} 40% {fill:hsl(120, 100%, 50%)}
    60% {fill:hsl(180, 100%, 50%)} 80% {fill:hsl(240, 100%, 50%)} 100% {fill:hsl(300, 100%, 50%)}
}
@keyframes linzeAnimat5 {
    0% {fill:hsl(60, 100%, 50%)} 20% {fill:hsl(120, 100%, 50%)} 40% {fill:hsl(180, 100%, 50%)}
    60% {fill:hsl(240, 100%, 50%);} 80% {fill:hsl(300, 100%, 50%)} 100% {fill:hsl(0, 100%, 50%)}
}
@keyframes linzeAnimat6 {
    0% {fill:hsl(120, 100%, 50%)} 20% {fill:hsl(180, 100%, 50%)} 40% {fill:hsl(240, 100%, 50%);}
    60% {fill:hsl(300, 100%, 50%)} 80% {fill:hsl(0, 100%, 50%)} 100% {fill:hsl(60, 100%, 50%)}
}
.linze_svg_heart{fill:red;}
自身得体(HTML):
<!--(1)-->
<svg width="280px" height="160px" version="1.1" viewBox="15 0 280 165">
    <path fill="transparent" stroke="#000" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80"></path>
    <path class="lineRed" fill="transparent" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80"></path>
<!--
    <path class="lineBlack" fill="transparent" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80"></path>
-->
</svg>
<!--(2)-->
<svg width="230px" height="70px" viewBox="45 0 200 85">
    <circle class="circle" fill="black" cx="45" cy="45" r="25"></circle>
</svg>
<!--(3)-->
<svg id="s9" style="width:480px;height:160px;">
    <!--渐变对象属于一种特效对象-->
    <defs>
        <linearGradient id="g3" x1="0%" y1="0%" x2="100%" y2="50%">
            <stop offset="0%" stop-color="red"></stop>
            <stop offset="17%" stop-color="orange"></stop>
            <stop offset="34%" stop-color="yellow"></stop>
            <stop offset="51%" stop-color="green"></stop>
            <stop offset="68%" stop-color="cyan"></stop>
            <stop offset="85%" stop-color="blue"></stop>
            <stop offset="100%" stop-color="purple"></stop>
        </linearGradient>
        <radialGradient id="g4">
            <stop offset="0%" stop-color="red"></stop>
            <stop offset="17%" stop-color="orange"></stop>
            <stop offset="34%" stop-color="yellow"></stop>
            <stop offset="51%" stop-color="green"></stop>
            <stop offset="68%" stop-color="cyan"></stop>
            <stop offset="85%" stop-color="blue"></stop>
            <stop offset="100%" stop-color="purple"></stop>
        </radialGradient>
    </defs>
    <!--<rect width="300" height="80" x="0" y="0" fill="url(#g4)">径性渐变</rect>-->
    <text font-size="60" x="0" y="60" fill="url(#g4)">径性渐变</text>
    <text font-size="60" x="0" y="150" fill="url(#g3)">线性渐变</text>
</svg>
<!--(4)-->
<svg style="width:480px;height:160px;" >
    <g>
        <text class="cs" opacity="0.8" font-style="normal" font-weight="normal" transform="matrix(3.48827 0 0 3.74669 -248.764 -570.764)" stroke="#000" xml:space="preserve" text-anchor="start" font-family="serif" font-size="31" stroke-width="0"  y="185.86124" x="76" >逸曦穆泽</text>
        <path class="csAnima" opacity="0.8" stroke="#000" d="m255.87284,13.4061c0,0 0,-1.06922 0.40011,-1.76138c0.22928,-0.39103 0.96151,-0.58977 0.96151,-0.58977c0,0 0.78632,-0.28748 1.73919,-0.22642c0.73822,0.04711 1.69276,0.44455 1.69276,0.44455c0,0 1.05472,0.02628 1.4167,0.56353c0.44193,0.66058 -0.2558,1.43109 -0.2558,1.43109c0,0 0.09256,0.44962 0.44856,0.82734c0.29329,0.31052 0.86396,0.56745 0.86396,0.56745c0,0 0.10816,0.07804 0.18912,0.22648c0.07166,0.13546 0.11345,0.34751 0.11345,0.34751c0,0 0.35169,0.25551 0.37592,0.57215c0.02686,0.33852 -0.27439,0.7407 -0.27439,0.7407c0,0 -0.13735,0.62571 -0.38686,1.07744c-0.16091,0.29327 -0.47279,0.48086 -0.47279,0.48086c0,0 -0.71465,0.59623 -1.58757,0.73392c-0.66024,0.1038 -1.5418,-0.24155 -1.5418,-0.24155c0,0 0.45289,1.40772 0.4018,2.84173c0.07237,2.2508 -1.65607,4.1508 -2.39546,6.68574c-0.26112,0.76372 -0.1002,1.65142 -0.1002,1.65142c0,0 -0.07498,2.22788 -0.35102,4.21168c-0.22496,1.63021 -0.65693,3.08719 -0.65693,3.08719c0,0 0.26436,0.8806 0.20007,1.44837c0.22406,0.14473 1.18269,0.77806 1.06071,1.28445c-0.18303,0.03195 -0.5219,-0.16389 -0.5219,-0.16389c0,0 -0.15526,0.1797 -0.34705,0.20704c-0.14099,0.02152 -0.27271,0.05214 -0.33444,-0.10499c-0.33044,0.07796 -0.91638,-0.20989 -0.91638,-0.20989c0,0 -0.45088,-0.35653 -0.66356,-0.736c-0.11513,-0.20345 -0.29676,-0.01497 -0.06105,-0.54848c0.23572,-0.53351 -0.02422,-0.63896 -0.02422,-0.63896c0,0 -0.52687,0.27383 -0.87789,0.25732c-0.17252,-0.00935 -0.30258,-0.31624 -0.30258,-0.31624c0,0 0.06336,-0.64048 0.02155,-1.20181c-0.0617,-0.79857 -0.23689,-1.6 -0.23689,-1.6c0,0 -0.42202,-0.49242 -0.75115,-1.90375c-0.22761,-0.97427 -0.25182,-2.34034 -0.41108,-3.34627c-0.15926,-1.02317 -0.47913,-1.69547 -0.45288,-1.6798c-0.76701,1.061 -1.72859,1.31285 -1.72859,1.31285c0,0 0.15694,1.61226 0.02489,2.92687c-0.12675,1.26757 -0.5418,2.23866 -0.5418,2.23866c0,0 -0.43876,1.16928 -0.57033,1.96089c-0.09364,0.56346 0.0187,0.70162 0.10418,0.84167c0.52123,0.66256 2.84517,-0.54078 3.39711,0.3256c0.05674,0.03452 0.17684,0.19693 0.31586,0.28893c0.14764,0.09779 0.44027,0.58083 0.35202,0.63545c-0.07332,0.04744 -0.23092,-0.00647 -0.23092,-0.00647c0,0 0.04246,0.2954 -0.05508,0.40323c-0.10418,0.10996 -0.34705,0.03519 -0.34705,0.03519c0,0 -0.15826,-0.13656 -0.4552,-0.17534c-0.28267,-0.03667 -0.70703,0.02441 -0.70703,0.02441c0,0 -1.15298,-0.45676 -2.17052,0.29903c-0.5366,0.30504 -0.94657,0.30693 -1.49003,0.38022c-0.30258,0.04098 -0.43961,-0.21489 -0.43961,-0.21489c0,0 -0.09987,0.14448 -0.29993,0.26953c-0.22793,0.13943 -0.47113,0.34499 -0.47113,0.34499c0,0 0.11413,0.15314 0.29762,0.26163c0.11579,0.06617 0.33443,0.10786 0.33443,0.10786c0,0 0.84456,0.14265 1.64266,-0.13439c0.13238,-0.00863 1.09985,0.55702 1.2256,0.67777c0.09589,0.09058 -0.09347,0.37006 -0.25415,0.44278c-0.82061,0.52872 -1.40159,-0.2524 -2.71596,0.2897c-1.21292,0.15985 -1.71432,-0.02015 -2.11876,-0.33926c-0.2684,-0.21134 -0.29031,-0.66275 -0.29031,-0.66275c0,0 -0.38852,-0.56571 -0.41937,-1.09185c-0.01328,-0.23214 0.51293,-1.05805 0.7329,-1.47924c0.18115,-0.34357 0.39383,-0.76405 0.39383,-0.76405c0,0 0.16987,-0.39101 0.285,-0.88985c0.08593,-0.36232 0.10186,-0.78994 0.2077,-1.13712c0.12674,-0.42555 0.35168,-0.76189 0.35168,-0.76189c0,0 -0.60849,-0.52544 -1.07464,-1.18314c-0.57697,-0.8169 -1.03251,-1.79659 -1.03251,-1.79659c0,0 -1.50164,-1.20899 -2.62306,-2.66343c-0.70967,-0.91828 -1.23755,-2.33822 -1.23755,-2.33822c0,0 -0.26299,0.29814 -0.63603,0.67531c-2.65059,2.67999 -2.86274,8.131 -3.69636,14.03777c-0.54226,3.84222 -1.83642,6.2948 -2.67616,7.09048c-0.76443,0.72524 -1.7236,0.76263 -1.7236,0.76263c0,0 -0.59953,0.01077 -0.66787,-0.12364c-0.0657,-0.12437 0.40277,-0.3968 0.40277,-0.3968c0,0 0.85973,-0.47971 1.39912,-1.23917c2.25869,-3.18018 2.4863,-12.40146 3.49813,-16.31129c0.51134,-1.97589 1.2007,-7.26222 6.01106,-10.14744c3.49554,-2.09661 11.05057,-3.51144 12.94312,-6.12689c0.38023,-0.52548 0.7923,-1.06848 0.7923,-1.06848z" stroke-width="0" />
    </g>
</svg>
<!--(5)-->
<svg style="width:469px;height:150px" >
    <g>
        <path class="csAnima" stroke="#000" d="m261.87284,18.4061c0,0 0,-1.06922 0.40011,-1.76138c0.22928,-0.39103 0.96151,-0.58977 0.96151,-0.58977c0,0 0.78632,-0.28748 1.73919,-0.22642c0.73822,0.04711 1.69276,0.44455 1.69276,0.44455c0,0 1.05472,0.02628 1.4167,0.56353c0.44193,0.66058 -0.2558,1.43109 -0.2558,1.43109c0,0 0.09256,0.44962 0.44856,0.82734c0.29329,0.31052 0.86396,0.56745 0.86396,0.56745c0,0 0.10816,0.07804 0.18912,0.22648c0.07166,0.13546 0.11345,0.34751 0.11345,0.34751c0,0 0.35169,0.25551 0.37592,0.57215c0.02686,0.33852 -0.27439,0.7407 -0.27439,0.7407c0,0 -0.13735,0.62571 -0.38686,1.07744c-0.16091,0.29327 -0.47279,0.48086 -0.47279,0.48086c0,0 -0.71465,0.59623 -1.58757,0.73392c-0.66024,0.1038 -1.5418,-0.24155 -1.5418,-0.24155c0,0 0.45289,1.40772 0.4018,2.84173c0.07237,2.2508 -1.65607,4.1508 -2.39546,6.68574c-0.26112,0.76372 -0.1002,1.65142 -0.1002,1.65142c0,0 -0.07498,2.22788 -0.35102,4.21168c-0.22496,1.63021 -0.65693,3.08719 -0.65693,3.08719c0,0 0.26436,0.8806 0.20007,1.44837c0.22406,0.14473 1.18269,0.77806 1.06071,1.28445c-0.18303,0.03195 -0.5219,-0.16389 -0.5219,-0.16389c0,0 -0.15526,0.1797 -0.34705,0.20704c-0.14099,0.02152 -0.27271,0.05214 -0.33444,-0.10499c-0.33044,0.07796 -0.91638,-0.20989 -0.91638,-0.20989c0,0 -0.45088,-0.35653 -0.66356,-0.736c-0.11513,-0.20345 -0.29676,-0.01497 -0.06105,-0.54848c0.23572,-0.53351 -0.02422,-0.63896 -0.02422,-0.63896c0,0 -0.52687,0.27383 -0.87789,0.25732c-0.17252,-0.00935 -0.30258,-0.31624 -0.30258,-0.31624c0,0 0.06336,-0.64048 0.02155,-1.20181c-0.0617,-0.79857 -0.23689,-1.6 -0.23689,-1.6c0,0 -0.42202,-0.49242 -0.75115,-1.90375c-0.22761,-0.97427 -0.25182,-2.34034 -0.41108,-3.34627c-0.15926,-1.02317 -0.47913,-1.69547 -0.45288,-1.6798c-0.76701,1.061 -1.72859,1.31285 -1.72859,1.31285c0,0 0.15694,1.61226 0.02489,2.92687c-0.12675,1.26757 -0.5418,2.23866 -0.5418,2.23866c0,0 -0.43876,1.16928 -0.57033,1.96089c-0.09364,0.56346 0.0187,0.70162 0.10418,0.84167c0.52123,0.66256 2.84517,-0.54078 3.39711,0.3256c0.05674,0.03452 0.17684,0.19693 0.31586,0.28893c0.14764,0.09779 0.44027,0.58083 0.35202,0.63545c-0.07332,0.04744 -0.23092,-0.00647 -0.23092,-0.00647c0,0 0.04246,0.2954 -0.05508,0.40323c-0.10418,0.10996 -0.34705,0.03519 -0.34705,0.03519c0,0 -0.15826,-0.13656 -0.4552,-0.17534c-0.28267,-0.03667 -0.70703,0.02441 -0.70703,0.02441c0,0 -1.15298,-0.45676 -2.17052,0.29903c-0.5366,0.30504 -0.94657,0.30693 -1.49003,0.38022c-0.30258,0.04098 -0.43961,-0.21489 -0.43961,-0.21489c0,0 -0.09987,0.14448 -0.29993,0.26953c-0.22793,0.13943 -0.47113,0.34499 -0.47113,0.34499c0,0 0.11413,0.15314 0.29762,0.26163c0.11579,0.06617 0.33443,0.10786 0.33443,0.10786c0,0 0.84456,0.14265 1.64266,-0.13439c0.13238,-0.00863 1.09985,0.55702 1.2256,0.67777c0.09589,0.09058 -0.09347,0.37006 -0.25415,0.44278c-0.82061,0.52872 -1.40159,-0.2524 -2.71596,0.2897c-1.21292,0.15985 -1.71432,-0.02015 -2.11876,-0.33926c-0.2684,-0.21134 -0.29031,-0.66275 -0.29031,-0.66275c0,0 -0.38852,-0.56571 -0.41937,-1.09185c-0.01328,-0.23214 0.51293,-1.05805 0.7329,-1.47924c0.18115,-0.34357 0.39383,-0.76405 0.39383,-0.76405c0,0 0.16987,-0.39101 0.285,-0.88985c0.08593,-0.36232 0.10186,-0.78994 0.2077,-1.13712c0.12674,-0.42555 0.35168,-0.76189 0.35168,-0.76189c0,0 -0.60849,-0.52544 -1.07464,-1.18314c-0.57697,-0.8169 -1.03251,-1.79659 -1.03251,-1.79659c0,0 -1.50164,-1.20899 -2.62306,-2.66343c-0.70967,-0.91828 -1.23755,-2.33822 -1.23755,-2.33822c0,0 -0.26299,0.29814 -0.63603,0.67531c-2.65059,2.67999 -2.86274,8.131 -3.69636,14.03777c-0.54226,3.84222 -1.83642,6.2948 -2.67616,7.09048c-0.76443,0.72524 -1.7236,0.76263 -1.7236,0.76263c0,0 -0.59953,0.01077 -0.66787,-0.12364c-0.0657,-0.12437 0.40277,-0.3968 0.40277,-0.3968c0,0 0.85973,-0.47971 1.39912,-1.23917c2.25869,-3.18018 2.4863,-12.40146 3.49813,-16.31129c0.51134,-1.97589 1.2007,-7.26222 6.01106,-10.14744c3.49554,-2.09661 11.05057,-3.51144 12.94312,-6.12689c0.38023,-0.52548 0.7923,-1.06848 0.7923,-1.06848z" stroke-width="0"/>
        <text class="item" transform="matrix(2.60603 0 0 2.75358 -88.7077 -91.0991)" stroke="#000" xml:space="preserve" text-anchor="start" font-family="sans-serif" font-size="31" y="73" x="47.89445" stroke-width="0">逸</text>
        <text class="item2" transform="matrix(2.7075 0 0 2.74626 -133.132 -99.6626)" stroke="#000" xml:space="preserve" text-anchor="start" font-family="sans-serif" font-size="31" y="77" x="100.15328" stroke-width="0">曦</text>
        <text class="item3" transform="matrix(2.65625 0 0 2.80488 -271.625 -68.5854)" stroke="#000" xml:space="preserve" text-anchor="start" font-family="sans-serif" font-size="31" y="63.51304" x="195.11765" stroke-width="0">穆</text>
        <text class="item4" transform="matrix(2.64413 0 0 2.90742 -441.557 -92.6556)" stroke="#000" xml:space="preserve" text-anchor="start" font-family="sans-serif" font-size="31" y="70.14421" x="298.42406" stroke-width="0">泽</text>
    </g>
</svg>
<!--(6)-->
<svg width="480" height="160" xmlns="http://www.w3.org/2000/svg">
    <g>
        <text class="lc" opacity="0.8" font-style="normal" font-weight="normal" transform="matrix(3.48827 0 0 3.74669 -248.764 -570.764)" stroke="#000" xml:space="preserve" text-anchor="start" font-family="sans-serif" font-size="31" stroke-width="0" y="186.12815" x="78.2934" fill="#cc7c65">爱你是谁</text>
        <path class="csAnima" opacity="0.8" stroke="#000" d="m262.87284,13.4061c0,0 0,-1.06922 0.40011,-1.76138c0.22928,-0.39103 0.96151,-0.58977 0.96151,-0.58977c0,0 0.78632,-0.28748 1.73919,-0.22642c0.73822,0.04711 1.69276,0.44455 1.69276,0.44455c0,0 1.05472,0.02628 1.4167,0.56353c0.44193,0.66058 -0.2558,1.43109 -0.2558,1.43109c0,0 0.09256,0.44962 0.44856,0.82734c0.29329,0.31052 0.86396,0.56745 0.86396,0.56745c0,0 0.10816,0.07804 0.18912,0.22648c0.07166,0.13546 0.11345,0.34751 0.11345,0.34751c0,0 0.35169,0.25551 0.37592,0.57215c0.02686,0.33852 -0.27439,0.7407 -0.27439,0.7407c0,0 -0.13735,0.62571 -0.38686,1.07744c-0.16091,0.29327 -0.47279,0.48086 -0.47279,0.48086c0,0 -0.71465,0.59623 -1.58757,0.73392c-0.66024,0.1038 -1.5418,-0.24155 -1.5418,-0.24155c0,0 0.45289,1.40772 0.4018,2.84173c0.07237,2.2508 -1.65607,4.1508 -2.39546,6.68574c-0.26112,0.76372 -0.1002,1.65142 -0.1002,1.65142c0,0 -0.07498,2.22788 -0.35102,4.21168c-0.22496,1.63021 -0.65693,3.08719 -0.65693,3.08719c0,0 0.26436,0.8806 0.20007,1.44837c0.22406,0.14473 1.18269,0.77806 1.06071,1.28445c-0.18303,0.03195 -0.5219,-0.16389 -0.5219,-0.16389c0,0 -0.15526,0.1797 -0.34705,0.20704c-0.14099,0.02152 -0.27271,0.05214 -0.33444,-0.10499c-0.33044,0.07796 -0.91638,-0.20989 -0.91638,-0.20989c0,0 -0.45088,-0.35653 -0.66356,-0.736c-0.11513,-0.20345 -0.29676,-0.01497 -0.06105,-0.54848c0.23572,-0.53351 -0.02422,-0.63896 -0.02422,-0.63896c0,0 -0.52687,0.27383 -0.87789,0.25732c-0.17252,-0.00935 -0.30258,-0.31624 -0.30258,-0.31624c0,0 0.06336,-0.64048 0.02155,-1.20181c-0.0617,-0.79857 -0.23689,-1.6 -0.23689,-1.6c0,0 -0.42202,-0.49242 -0.75115,-1.90375c-0.22761,-0.97427 -0.25182,-2.34034 -0.41108,-3.34627c-0.15926,-1.02317 -0.47913,-1.69547 -0.45288,-1.6798c-0.76701,1.061 -1.72859,1.31285 -1.72859,1.31285c0,0 0.15694,1.61226 0.02489,2.92687c-0.12675,1.26757 -0.5418,2.23866 -0.5418,2.23866c0,0 -0.43876,1.16928 -0.57033,1.96089c-0.09364,0.56346 0.0187,0.70162 0.10418,0.84167c0.52123,0.66256 2.84517,-0.54078 3.39711,0.3256c0.05674,0.03452 0.17684,0.19693 0.31586,0.28893c0.14764,0.09779 0.44027,0.58083 0.35202,0.63545c-0.07332,0.04744 -0.23092,-0.00647 -0.23092,-0.00647c0,0 0.04246,0.2954 -0.05508,0.40323c-0.10418,0.10996 -0.34705,0.03519 -0.34705,0.03519c0,0 -0.15826,-0.13656 -0.4552,-0.17534c-0.28267,-0.03667 -0.70703,0.02441 -0.70703,0.02441c0,0 -1.15298,-0.45676 -2.17052,0.29903c-0.5366,0.30504 -0.94657,0.30693 -1.49003,0.38022c-0.30258,0.04098 -0.43961,-0.21489 -0.43961,-0.21489c0,0 -0.09987,0.14448 -0.29993,0.26953c-0.22793,0.13943 -0.47113,0.34499 -0.47113,0.34499c0,0 0.11413,0.15314 0.29762,0.26163c0.11579,0.06617 0.33443,0.10786 0.33443,0.10786c0,0 0.84456,0.14265 1.64266,-0.13439c0.13238,-0.00863 1.09985,0.55702 1.2256,0.67777c0.09589,0.09058 -0.09347,0.37006 -0.25415,0.44278c-0.82061,0.52872 -1.40159,-0.2524 -2.71596,0.2897c-1.21292,0.15985 -1.71432,-0.02015 -2.11876,-0.33926c-0.2684,-0.21134 -0.29031,-0.66275 -0.29031,-0.66275c0,0 -0.38852,-0.56571 -0.41937,-1.09185c-0.01328,-0.23214 0.51293,-1.05805 0.7329,-1.47924c0.18115,-0.34357 0.39383,-0.76405 0.39383,-0.76405c0,0 0.16987,-0.39101 0.285,-0.88985c0.08593,-0.36232 0.10186,-0.78994 0.2077,-1.13712c0.12674,-0.42555 0.35168,-0.76189 0.35168,-0.76189c0,0 -0.60849,-0.52544 -1.07464,-1.18314c-0.57697,-0.8169 -1.03251,-1.79659 -1.03251,-1.79659c0,0 -1.50164,-1.20899 -2.62306,-2.66343c-0.70967,-0.91828 -1.23755,-2.33822 -1.23755,-2.33822c0,0 -0.26299,0.29814 -0.63603,0.67531c-2.65059,2.67999 -2.86274,8.131 -3.69636,14.03777c-0.54226,3.84222 -1.83642,6.2948 -2.67616,7.09048c-0.76443,0.72524 -1.7236,0.76263 -1.7236,0.76263c0,0 -0.59953,0.01077 -0.66787,-0.12364c-0.0657,-0.12437 0.40277,-0.3968 0.40277,-0.3968c0,0 0.85973,-0.47971 1.39912,-1.23917c2.25869,-3.18018 2.4863,-12.40146 3.49813,-16.31129c0.51134,-1.97589 1.2007,-7.26222 6.01106,-10.14744c3.49554,-2.09661 11.05057,-3.51144 12.94312,-6.12689c0.38023,-0.52548 0.7923,-1.06848 0.7923,-1.06848z" stroke-width="0"/>
    </g>
</svg>
<img class="maskImg" src="/logo.png">
 
<svg class="linze_svg_mask" style="width:266px;height:200px">
    <g>
        <path class="linze_svg_graph" stroke="#000" d="m70.87239,89.42019c0,0 0,-3.17952 0.99422,-5.23778c0.56973,-1.16281 2.3892,-1.7538 2.3892,-1.7538c0,0 1.95388,-0.85488 4.32163,-0.67329c1.83438,0.14008 4.20625,1.32195 4.20625,1.32195c0,0 2.62082,0.07816 3.52028,1.67575c1.09814,1.96435 -0.63562,4.25562 -0.63562,4.25562c0,0 0.23,1.33702 1.11459,2.46024c0.72879,0.9234 2.14681,1.68743 2.14681,1.68743c0,0 0.26875,0.23206 0.46994,0.67348c0.17806,0.40281 0.28192,1.03338 0.28192,1.03338c0,0 0.87391,0.75981 0.93411,1.7014c0.06675,1.00664 -0.68181,2.2026 -0.68181,2.2026c0,0 -0.34128,1.86066 -0.96128,3.20396c-0.39984,0.8721 -1.17482,1.42994 -1.17482,1.42994c0,0 -1.77579,1.77301 -3.94487,2.18244c-1.64061,0.30868 -3.83113,-0.7183 -3.83113,-0.7183c0,0 1.12536,4.18612 0.99841,8.4504c0.17982,6.69318 -4.11507,12.34318 -5.95236,19.88129c-0.64884,2.27107 -0.24897,4.91079 -0.24897,4.91079c0,0 -0.18632,6.625 -0.87223,12.5242c-0.55899,4.84774 -1.63238,9.18035 -1.63238,9.18035c0,0 0.6569,2.61862 0.49714,4.30699c0.55676,0.43038 2.93881,2.31371 2.63569,3.81955c-0.45481,0.095 -1.29684,-0.48737 -1.29684,-0.48737c0,0 -0.3858,0.53438 -0.86236,0.61566c-0.35035,0.064 -0.67766,0.15504 -0.83103,-0.31222c-0.8211,0.23184 -2.27706,-0.62414 -2.27706,-0.62414c0,0 -1.12037,-1.0602 -1.64884,-2.18862c-0.28608,-0.605 -0.73739,-0.04452 -0.1517,-1.631c0.58572,-1.58648 -0.06017,-1.90006 -0.06017,-1.90006c0,0 -1.3092,0.81428 -2.18143,0.7652c-0.42868,-0.0278 -0.75186,-0.94039 -0.75186,-0.94039c0,0 0.15745,-1.90458 0.05356,-3.57381c-0.15332,-2.37469 -0.58864,-4.7579 -0.58864,-4.7579c0,0 -1.04865,-1.46429 -1.86648,-5.66115c-0.56557,-2.89717 -0.62574,-6.95944 -1.02148,-9.95074c-0.39574,-3.0426 -1.19056,-5.0418 -1.12533,-4.9952c-1.90589,3.15507 -4.29527,3.904 -4.29527,3.904c0,0 0.38996,4.79436 0.06185,8.7036c-0.31495,3.76934 -1.3463,6.65706 -1.3463,6.65706c0,0 -1.09025,3.47708 -1.41719,5.83106c-0.23269,1.67556 0.04646,2.08639 0.25888,2.50287c1.29517,1.97023 7.06982,-1.6081 8.4413,0.96822c0.14099,0.10264 0.43942,0.5856 0.78486,0.85918c0.36686,0.29079 1.09401,1.7272 0.87471,1.88962c-0.18219,0.14106 -0.5738,-0.01925 -0.5738,-0.01925c0,0 0.1055,0.87842 -0.13686,1.19908c-0.25888,0.32698 -0.86236,0.10464 -0.86236,0.10464c0,0 -0.39325,-0.40608 -1.13111,-0.52142c-0.7024,-0.10904 -1.75685,0.07258 -1.75685,0.07258c0,0 -2.86498,-1.35826 -5.39341,0.88923c-1.33337,0.90709 -2.35207,0.9127 -3.7025,1.13064c-0.75186,0.12185 -1.09236,-0.63901 -1.09236,-0.63901c0,0 -0.24817,0.42963 -0.74528,0.80151c-0.56638,0.41463 -1.17069,1.02589 -1.17069,1.02589c0,0 0.28359,0.45539 0.73953,0.778c0.28772,0.19677 0.831,0.32073 0.831,0.32073c0,0 2.09859,0.4242 4.08175,-0.39964c0.32895,-0.02565 2.73297,1.65639 3.04543,2.01547c0.23826,0.26935 -0.23226,1.10043 -0.63152,1.31668c-2.03909,1.57224 -3.48275,-0.75055 -6.74875,0.86147c-3.01393,0.47535 -4.25981,-0.05993 -5.26481,-1.00886c-0.66694,-0.62847 -0.72137,-1.9708 -0.72137,-1.9708c0,0 -0.96541,-1.68223 -1.04206,-3.24683c-0.033,-0.69032 1.27455,-3.1463 1.82115,-4.39879c0.45013,-1.02167 0.9786,-2.27205 0.9786,-2.27205c0,0 0.4221,-1.16273 0.70817,-2.64612c0.21352,-1.07742 0.2531,-2.34904 0.51611,-3.38145c0.31492,-1.26545 0.87388,-2.26561 0.87388,-2.26561c0,0 -1.51201,-1.56249 -2.67031,-3.51829c-1.43367,-2.4292 -2.56562,-5.34249 -2.56562,-5.34249c0,0 -3.73135,-3.59517 -6.5179,-7.92021c-1.76343,-2.73068 -3.07512,-6.95312 -3.07512,-6.95312c0,0 -0.65349,0.88656 -1.58043,2.00816c-6.58631,7.96944 -7.11347,24.17902 -9.1849,41.74389c-1.34743,11.42554 -4.56321,18.71875 -6.64986,21.08486c-1.89948,2.15664 -4.28288,2.26783 -4.28288,2.26783c0,0 -1.48974,0.03202 -1.65955,-0.36766c-0.16325,-0.36985 1.00083,-1.17995 1.00083,-1.17995c0,0 2.1363,-1.42651 3.4766,-3.68489c5.6125,-9.45686 6.17807,-36.87804 8.69232,-48.50464c1.2706,-5.87566 2.98356,-21.59554 14.93656,-30.17529c8.68588,-6.23466 27.45898,-10.44191 32.16168,-18.21944c0.94482,-1.5626 1.96875,-3.17733 1.96875,-3.17733z" fill="#ff7f00"/>
        <path class="linze_svg_graph2" stroke="#000" d="m140.44268,180.90259c0.02743,-4.65786 5.19794,-6.19235 7.32046,-9.4239c8.19326,-7.98921 16.17636,-17.21288 21.19853,-29.80366c5.33541,-12.86449 8.22885,-28.62256 6.0585,-43.54471c-1.15092,-9.25933 -7.34513,-16.66999 -13.89927,-15.51109c-4.31661,0.85804 -9.30277,2.30174 -11.80039,8.09237c-2.71108,2.95856 -1.21952,9.89265 2.39474,7.25906c4.62403,-2.5646 10.43176,2.66498 10.24888,10.0772c0.00536,7.02819 -4.89126,11.98617 -9.45449,11.32648c-5.08255,-0.07384 -10.11385,-6.03237 -10.00762,-13.75692c-0.35224,-12.44985 7.06153,-22.61813 14.99721,-25.22744c7.09578,-3.21259 15.34513,-1.91988 21.32867,4.76317c4.4523,4.42203 7.95844,11.12582 8.68994,19.03852c1.57935,10.28751 -0.46169,20.90428 -4.00232,29.85428c-4.55038,12.05722 -11.50313,21.92785 -19.57405,29.00862c-7.49607,6.94567 -15.29321,13.21849 -23.35934,18.65546c-0.04649,-0.26913 -0.09298,-0.53828 -0.13948,-0.80742l0,0.00001zm53.85088,-50.76155c-3.85924,-2.53925 -3.00779,-12.85733 1.48425,-13.08939c3.36121,-1.13921 6.50081,3.9651 5.46322,8.68529c-0.65453,4.41708 -4.30417,6.3315 -6.94747,4.40409zm0,-28.22568c-3.85924,-2.53924 -3.00779,-12.85733 1.48425,-13.08938c3.36121,-1.1392 6.50081,3.9651 5.46322,8.68529c-0.67153,4.43206 -4.28538,6.32343 -6.94747,4.40409z" fill="#f6ff00"/>
        <path class="linze_svg_graph3" stroke="#000" d="m186.37063,182.18064c-5.53831,-0.75633 -10.68251,-4.87009 -9.63771,-9.67223c0.5288,-5.27178 5.70822,-9.51468 10.91951,-12.31016c6.93555,-3.81999 16.41838,-5.23905 24.06149,-1.94437c0.44784,-26.57304 0.19261,-53.15273 0.26045,-79.72878c4.81979,-0.94418 3.2614,4.16118 4.35605,6.52218c1.04453,6.94262 6.80016,12.39025 12.52923,17.25472c7.10784,6.11441 14.65536,12.59753 16.96567,21.06865c2.52279,9.82834 -1.5103,19.88284 -6.74419,28.69091c-0.379,2.8229 -6.77918,6.90699 -3.72991,1.80586c5.13444,-8.72637 9.37615,-18.77624 5.87157,-28.43933c-3.33738,-9.64194 -13.73975,-17.69441 -26.12304,-19.13828c-0.08003,20.35968 0.19488,40.72321 -0.29348,61.07963c-1.21741,5.99629 -7.65484,10.44548 -14.11045,12.98601c-4.45145,1.56805 -9.47552,2.51677 -14.32517,1.82519l0,-0.00001z" fill="#ff4300"/>
        <path class="linze_svg_graph4" stroke="#000" d="m108.16877,180.34111c-8.3174,-1.11647 -12.80827,-11.55304 -4.49749,-15.37613c8.66379,-3.76961 13.81651,9.65007 4.35292,10.96176c-5.18198,1.63933 6.72797,4.38459 8.94777,1.62808c6.9361,-2.83496 5.86465,-10.21354 4.19586,-15.41005c-0.57914,-3.98104 -1.30338,-8.2431 -7.25161,-5.98054c-14.35059,0.97499 -25.71196,-11.31878 -24.57077,-22.81955c0.38744,-10.84779 10.90994,-18.27762 18.70159,-25.81062c-2.55802,-9.85505 -3.33039,-21.24034 4.08506,-29.82827c6.83049,-6.98104 10.29749,5.79369 11.45289,10.1285c2.56646,10.13261 -2.55084,20.78037 -11.06593,27.923c0.81306,3.38803 1.61305,6.77833 2.44164,10.16369c8.9983,-1.46704 17.58759,4.9536 18.07839,12.47417c1.39038,6.79119 -3.76791,13.20461 -10.81361,16.12327c-0.11585,5.83168 3.70011,11.88087 2.32898,17.90292c-1.31677,6.22626 -9.58578,9.27944 -16.38569,7.91977l0,0zm9.39392,-26.56913c2.54936,-4.04105 -2.07482,-11.17783 -2.32871,-16.36502c0.09985,-9.04535 -11.2624,1.75217 -7.88351,6.19413c1.00161,2.62841 9.69536,7.44851 1.70946,4.47577c-8.33749,-4.21375 -7.95561,-15.05551 -0.33754,-19.63323c6.39129,-1.19547 2.48773,-8.39746 1.28345,-10.76305c-7.84987,6.04108 -16.74735,13.64802 -15.39356,23.42556c1.01977,9.16445 12.85078,14.7239 22.95041,12.66584l0,0zm5.28173,-1.74927c7.48692,-4.05868 7.24121,-14.7104 -0.95002,-18.01406c-8.74009,-3.89982 -2.75368,6.31706 -2.59354,10.20597c1.21294,1.48872 0.52586,10.16334 3.54356,7.80809zm-9.22722,-48.8252c4.6054,-4.70456 9.86987,-11.49649 6.63552,-17.71655c-6.96515,-3.88247 -10.83574,6.61433 -11.00704,11.21065c-0.06337,2.98036 -0.58349,13.25314 4.37152,6.50589l0,0l0,0z" fill="#ffff56"/>
        <text class="linze_svg_font" font-style="italic" font-weight="normal" transform="matrix(1.18409 0 0 1.21589 -5.64032 8.05385)" stroke="#000" xml:space="preserve" text-anchor="start" font-family="sans-serif" font-size="24" stroke-width="0" y="57.50008" x="19.39673" fill="#ffff00">逸</text>
        <text class="linze_svg_font2" font-style="italic" font-weight="normal" transform="matrix(1.47004 0 0 1.53276 -36.8924 -19.38)" stroke="#000" xml:space="preserve" text-anchor="start" font-family="sans-serif" font-size="24" y="41.03136" x="61.01658" stroke-width="0" fill="#ff7f00">曦</text>
        <text class="linze_svg_font3" font-style="italic" font-weight="normal" transform="matrix(1.56 0 0 1.41935 -79.52 -7.54839)" stroke="#000" xml:space="preserve" text-anchor="start" font-family="sans-serif" font-size="24" y="35.25" x="155.17949" stroke-width="0" fill="#ff007f">穆</text>
        <text class="linze_svg_font4" font-style="italic" font-weight="normal" transform="matrix(1.2229 0 0 1.25766 -57.8739 6.11921)" stroke="#000" xml:space="preserve" text-anchor="start" font-family="sans-serif" font-size="24" y="48.45804" x="219.14439" stroke-width="0" fill="#ff00ff">泽</text>
        <path class="linze_svg_heart" stroke="#000" id="svg_25" d="m128.00496,45.67661c-8.60745,-8.6236 -11.68496,-14.07873 -11.7099,-20.7568c-0.02274,-6.08788 3.77628,-11.96358 7.7133,-11.92969c1.96597,0.01695 6.1831,2.25763 7.6764,4.07873c0.75241,0.91758 1.10879,0.8271 2.78396,-0.70683c4.5591,-4.17469 9.0111,-4.26232 11.89442,-0.23409c4.60815,6.43795 3.76919,14.12604 -2.41174,22.10067c-3.28613,4.23977 -10.46233,11.76137 -11.22127,11.76137c-0.23093,0 -2.35726,-1.94102 -4.72517,-4.31336l0,0z" stroke-width="0" fill="#ff0000"/>
    </g>
</svg>
0

评论 (0)

取消