美文网首页
SVG效果1

SVG效果1

作者: 0清婉0 | 来源:发表于2021-03-11 20:18 被阅读0次

    今天开会时说到了一些SVG效果,于是就网上收集了一些,收藏起来,留待以后学习SVG

    【文字弹幕】

    <svg width="100%" height="25" xmlns="http://www.w3.org/2000/svg">

        <g>

            <text font-family="microsoft yahei,sans-serif" font-size="20" y="20" x="100%" fill="#898989">

                前方高能٩(。•́‿•̀。)۶

                <animate attributename="x" from="100%" to="-200" begin="0s" dur="3s" repeatcount="indefinite"></animate>

            </text>

        </g>

    </svg>

    【SVG路径动画】

    <svg dth="300px" height="175px" version="1.1" xmlns="http://www.w3.org/2000/svg">

        <path fill="transparent" stroke="#888888" stroke-width="1" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>

    </svg>

    <div class="ball"></div>

    .ball {

      width: 10px;

      height: 10px;

      background-color: red;

      border-radius: 50%;

      offset-path: path('M10 80 Q 77.5 10, 145 80 T 280 80');

      offset-distance: 0%;

      animation: red-ball 2s linear alternate infinite;

      margin-top:-11.5em;

    }

    @keyframes red-ball {

      from {

        offset-distance: 0%;

      }

      to {

        offset-distance: 100%;

      }

    }

    其实路径动画并不难,

    offset-path指定元素的运动路径

    offset-distance定义了元素在路径上运动的距离,

    单位是数值或百分比。

    相关文章

      网友评论

          本文标题:SVG效果1

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