zoukankan      html  css  js  c++  java
  • SVG 支持动画

    svg  支持动画

    animate 必须要写在要动的元素中

    animate:常见的几个类型

    attributeType:动画的的类型 

    anumateName:动画的名称

    begin:动画开始的时间

    from :动画的开始

    to:目的地

    dur(duration):持续时间

    repeatcount:动画重复次数 indefinite (无数次)

    例如:animateMotion:使用引用动画的元素 沿着某一个路径运动

    <svg style="background: yellowgreen; width="500" height= "500">

    <circle cx="65" cy="65"  r="20"  fill="red"> <animateMotion path=" m 0 0  l 200 100 l 100 80  z" dur="3s"  repeatcount="indefinite"></animateMotion></circle>

     

    </svg>

    例如 变形动画

    <svg style="background: blueviolet; width="500" height="500">

    <text x="100" y="100" font-size="30px" fill="red">天道酬勤

    <animatetransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" begin="0s" from="0 100 100 " to="360 100 100" repeatcount="indefinite"></animatetransform></text>

     

  • 相关阅读:
    laravel读excel
    React 还是 Vue: 你应该选择哪一个Web前端框架?
    React16版本的新特性
    你真的了解React吗
    express操作数据库
    跨域的九种解决方式
    Koa基本使用
    luogu3806 【模板】点分治1
    luogu2634 聪聪可可
    poj1741 Tree
  • 原文地址:https://www.cnblogs.com/sanshao221/p/6206603.html
Copyright © 2011-2022 走看看