美文网首页
多变形 + 线性渐变/放射渐变 + animation

多变形 + 线性渐变/放射渐变 + animation

作者: Hush____ | 来源:发表于2021-12-21 15:01 被阅读0次
    <style>
            polygon{
                animation: strokeDefaultPoly 3s linear infinite alternate;
            }
            @keyframes strokeDefaultPoly {
                0% {
                    stroke-dasharray: 0 50;
                }
                100% {
                    stroke-dasharray: 500;
                }
            }
        </style>
    
    <svg width="64" height="73">
       <defs>
          <linearGradient id="linear" x1="0%" y1="0%" x2="0%" y2="100%">
             <stop offset="0%" stop-color="#ddd"/>
             <stop offset="50%" stop-color="rgba(8,68,158,0)"/>
             <stop offset="80%" stop-color="rgba(6,81,191,1)"/>
             <stop offset="100%" stop-color="rgba(0,108,255,0.35)"/>
          </linearGradient>
                             
          <linearGradient id="linear1" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#03ffea"/>
            <stop offset="100%" stop-color="#00CEFF"/>
          </linearGradient>
        </defs>
        <polygon fill="url(#linear)" points="30,1  60,17 60,52 30,69 1,52 1,17" stroke="url(#linear1)" stroke-width="2" />
    </svg>
    
    image.png

    放射性渐变:

    <svg height="80" style="position: absolute; left: 6px; top: 7px;">
        <defs>
            <radialGradient id="greyer1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                <stop offset="0%" style="stop-color:#000000; stop-opacity:0"/>
                <stop offset="100%" style="stop-color:#2B89A7; stop-opacity:1"/>
            </radialGradient>
        </defs>
        <polygon fill="url(#greyer1)" points="30,1 60,17 60,52 30,69 1,52 1,17" stroke="#00BFF0" stroke-width="2" style="transform: scale(0.9);"/>
    </svg>
    

    实现了效果:


    image.png

    相关文章

      网友评论

          本文标题:多变形 + 线性渐变/放射渐变 + animation

          本文链接:https://www.haomeiwen.com/subject/hysxqrtx.html