使用CSS实现动态的SVG效果

动态的SVG效果很炫酷,那该如何实现这一效果呢?这里尝试一种简单的方法,结合CSS的动画效果和SVG元素,实现简单的动态SVG。

示例一:多个黄色小球的运动

示例二:一个简单的动态SVG示例

在这里,我们让一个黄色的小球从左到右慢慢滑动,一直在重复这一过程。

接下来的部分,逐步说明是如何实现这个动作的。

CSS动画效果的知识点

@keyframes 和 animation 这两个css类在实现动画效果时经常被用到。

@keyframes

@keyframes可以用来自定义类。这里,使用@keyframes自定义类popup,实现效果为:在0%的时间点下元素不移动,在50%的时间点下元素移动到200px处,在100%的时间点下元素移动到400px处。

css 复制代码
@keyframes popup {
    0% {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(200px);
    }
    100% {
        transform: translateX(400px);
    }
}

animation

animation 为一系列animation-*的缩写形式,完整的类名如下:

  • animation-name 用来定义动画名,结合上面说到的@keyframes一起使用
  • animation-duration 表示动画持续的时间长短
  • animation-timing-function 指定动画的速度曲线
  • animation-delay 表示动画延迟多长时间开始
  • animation-iteration-count 表示动画重复的次数
  • animation-direction 指定动画是向前播放、向后播放还是交替播放

关于示例部分的两种方式如下

css 复制代码
.move {  
  animation-name: popup;  
  animation-duration: 3s;  
  animation-timing-function: ease-in;  
  animation-delay: 0s;  
  animation-iteration-count: infinite;  
  animation-direction: alternate;  
}
css 复制代码
.move {
    animation: popup 3s 0s ease-in infinite alternate;
}

SVG 元素的绘制

如何生成SVG元素呢?

方法之一是手搓SVG元素,按照SVG元素的规则自己完成。这种方式实现简单的元素还可以,对于复杂元素则不适用。

这里生成SVG元素的方式是借助draw.io软件,可以绘制好想要的图形,然后导出为SVG格式即可。如果需要格式化,可以使用在线的xml格式化工具,使得SVG的源文件具有更好的可读性,方便添加css代码。

在以下的SVG元素中,给<ellipse>增加了class="move"的自定义类,使得之前定义的move动画效果可以应用在当前的SVG元素上,代码如下:

xml 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400px" height="60px">
    <defs />
    <rect fill="#FFFFFF" width="100%" height="100%" x="0" y="0" />
    <ellipse id="move" class="move"  cx="30" cy="30" rx="20" ry="20" fill="#F5CB3A" stroke="#F5CB3A" pointer-events="all"/>
</svg>    

这样一个会动的黄色小球就可以正常工作了。

附示例二SVG代码

xml 复制代码
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="400px" height="60px">
    <defs />
    <rect fill="#FFFFFF" width="100%" height="100%" x="0" y="0" />
    <ellipse id="move" class="move"  cx="30" cy="30" rx="20" ry="20" fill="#F5CB3A" stroke="#F5CB3A" pointer-events="all"/>
    <style>
    .move {
        animation: popup 3s 0s ease-in infinite;
    }

    @keyframes popup {
        0% {
            transform: translateX(0px);
        }
        50% {
            transform: translateX(200px);
        }
        100% {
            transform: translateX(400px);
        }
    }
  </style>
</svg>
相关推荐
码上暴富11 小时前
css里flex+margin布局
前端·css
qq_4005520011 小时前
新的面试题CSS
前端·css
naodianbozzz13 小时前
web第三次作业
前端·javascript·css
centerless13 小时前
深入了解 CSS Grid 布局:构建高效响应式网页的利器
前端·css
The_era_achievs_hero18 小时前
放大镜效果
javascript·css·css3
小猫会后空翻20 小时前
web第三次作业
前端·javascript·css
昨今1 天前
对于简单的HTML、CSS、JavaScript前端,我们可以通过几种方式连接后端
前端·css·html
林啾啾1 天前
CSS预处理器——SCSS的灵活语法
前端·css·scss
Chokcoco1 天前
巧用 CSS 实现高频出现的复杂怪状按钮 - 内凹平滑圆角
前端·javascript·css
Pluto_ssy2 天前
Sass基础知识以及常用知识整理
前端·css·sass