SVG效果1

今天开会时说到了一些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定义了元素在路径上运动的距离，

单位是数值或百分比。