SVG动画效果展示-优快云博客

这篇博客通过几个实例展示了SVG的各种动画效果，包括弹幕效果、旋转、改变透明度、超链接弹幕、绘画渐隐、文字沿路径移动以及图片背景上的弹幕等，详细介绍了如何使用SVG实现这些动态效果。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
     body{
	background-image:url('0.jpg');
	background-repeat: no-repeat; /**背景图填充位置：不填充**/
	background-attachment: fixed; /**这个属性必须与 background-image 一起使用**/
    }
  </style>
 </head>
 <body>
    <p>弹幕效果</p>
    <svg width="100%" height="25" >
        <g>
            <text font-family="微软雅黑" font-size="20" y="20" x="100%">
                前方高能٩(｡•́‿•̀｡)۶
                <animate attributename="x" from="100%" to="-200" begin="0s" dur="3s" repeatcount="indefinite"></animate>
            </text>
        </g>
    </svg>
    <p>旋转效果</p>
    <svg width="400" height="400" style="box-sizing:border-box">
        <g transform="rotate(262.54 180 180)" style="box-sizing:border-box">
            <text font-family="微软雅黑" font-size="30" y="160" x="160" style="box-sizeing:border-box">
                旋转木马
                <animate attributename="transform" begin="0s" dur="10s" type="rotate" from=" 0 180 180" to="360 180 180" repeatcount="indefinite" style="box-sizing:border-box"></animate>
            </text>	
        </g>
    </svg>
    <p>改变透明度效果</p>
    <center>
        <svg  xmlns="http://www.w3.org/2000/svg" version="1.1">
          &

SVG——小事例