码迷,mamicode.com
首页 > 其他好文 > 详细

svg动画效果

时间:2020-03-05 11:50:02      阅读:80      评论:0      收藏:0      [点我收藏+]

标签:black   html   idt   efi   class   org   css   his   google   

<!DOCTYPE html>
<html>
<body>

<p><b>Note:</b> This example only works in Firefox and Google Chrome.</p>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="20" y="20" width="250" height="250" style="fill:blue">
      <animate attributeType="CSS" attributeName="opacity" values="0.5;1;0.5" dur="1s" repeatCount="indefinite" />
  </rect>
</svg>

</body>
</html>
<!DOCTYPE html>
<html>
<body>

<p><b>Note:</b> This example only works in Firefox and Google Chrome.</p>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="20" y="20" width="250" height="250" style="fill:blue">
    <animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
  </rect>
</svg>

</body>
</html>
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
    <rect x="0" y="0" width="300" height="100" fill="yellow" stroke-width="1" stroke="red" />
    <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
        <animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
    </circle>
</svg>

 

svg动画效果

标签:black   html   idt   efi   class   org   css   his   google   

原文地址:https://www.cnblogs.com/LcxSummer/p/12419268.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!