网站建设,外贸网站,多语言建站,网站设计,前端制作,程序嵌套,长期维护
svg动画制作实例
作者:zhangbo2023-11-10 12:23 热度:6920

下面是一个使用SVG动画制作的实例:


```html

<!DOCTYPE html>

<html>


<head>

    <style>

        .circle {

            fill: yellow;

            animation-name: grow;

            animation-duration: 3s;

            animation-timing-function: ease-in-out;

            animation-iteration-count: infinite;

        }


        @keyframes grow {

            0% {

                r: 10;

            }

            50% {

                r: 50;

            }

            100% {

                r: 10;

            }

        }

    </style>

</head>


<body>

    <svg width="200" height="200">

        <circle class="circle" cx="100" cy="100" r="10" />

    </svg>

</body>


</html>

```


这个示例演示了一个圆形变大又变小的动画效果。在CSS样式中,`.circle` 类被设置为黄色填充,并且使用`grow` 动画将圆形的半径从10逐渐变大到50,然后再变回10。动画的持续时间为3秒,通过`animation-iteration-count` 属性设置为无限循环。


在`<svg>` 标签中,使用`<circle>` 元素创建了一个圆形,并将其`class` 属性设置为`circle`,以应用动画效果。


专注于技术开发,多年从业QQ:78305180