纯SVG动画

最新推荐文章于 2024-04-12 11:26:16 发布
最新推荐文章于 2024-04-12 11:26:16 发布
阅读量478 收藏 2
点赞数 1
文章标签： svg 公众号 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GQ_Sonofgod/article/details/105854332
版权

点击图片底部偏下面一点即可跳转到代码
在这里插入图片描述
在这里插入图片描述

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600">
    <defs>
      <radialGradient cx="0.5" cy="0.5" r="0.5" fx="0.5" fy="0.5">
        <stop offset="0" stop-color="rgba(255,150,50,1)">
        </stop>
        <stop offset="0.7" stop-color="rgba(255,150,50,1)">
        </stop>
        <stop offset="1" stop-color="rgba(200,200,200,0)">
        </stop>
      </radialGradient>
    </defs>
    <circle cx="300" cy="200" r="83.7288" fill="url(#rading)">
      <animate attributeName="r" attributeType="XML" values="70;100;70" begin="0s" dur="1.5s" repeatCount="indefinite">
      </animate>
    </circle>
    <circle cx="300" cy="200" r="70" fill="rgb(255,150,50)">
    </circle>
    <circle cx="300" cy="200" r="50" fill="rgb(255,200,50)">
    </circle>
    <g transform="rotate(-1.69493 300 200)">
      <text font-family="microsoft yahei" x="275" y="218" fill="#f00" font-size="50">​​​拆
      </text>
      <animateTransform attributeName="transform" begin="0s" dur="1.5s" type="rotate" values="-20,300,200;20,300,200;-20,300,200" repeatCount="indefinite">
      </animateTransform>
    </g>
  </svg>


<!--第一个-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
  <path opacity="0.2" fill="#FF6700" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
      s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
      c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"></path>
  <path fill="#FF6700" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
      C22.32,8.481,24.301,9.057,26.013,10.047z" transform="rotate(42.1171 20 20)">
      <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.5s" repeatCount="indefinite"></animateTransform>
  </path>
</svg>

<!--第二个-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve">
    <path fill="#FF6700" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)">
        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
    </path>
</svg>


<!--第三个-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve">
    <path fill="#FF6700" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(275.098 25 25)">
        <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
    </path>
</svg>

<!--第四个-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 24 24" style="enable-background:new 0 0 50 50" xml:space="preserve">
   <rect x="0" y="0" width="4" height="7" fill="#FF6700" transform="scale(1 1.94336)">
       <animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1" begin="0s" dur="0.6s" repeatCount="indefinite"></animateTransform>       
   </rect>
   <rect x="10" y="0" width="4" height="7" fill="#FF6700" transform="scale(1 2.72331)">
       <animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1" begin="0.2s" dur="0.6s" repeatCount="indefinite"></animateTransform>       
   </rect>
   <rect x="20" y="0" width="4" height="7" fill="#FF6700" transform="scale(1 1.38997)">
       <animateTransform attributeType="xml" attributeName="transform" type="scale" values="1,1; 1,3; 1,1" begin="0.4s" dur="0.6s" repeatCount="indefinite"></animateTransform>       
   </rect>
</svg>


<!--第五个-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50" xml:space="preserve">
    <rect x="0" y="0" width="4" height="10" fill="#FF6700" transform="translate(0 9.4336)">
        <animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0" dur="0.6s" repeatCount="indefinite"></animateTransform>
    </rect>
    <rect x="10" y="0" width="4" height="10" fill="#FF6700" transform="translate(0 17.2331)">
        <animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0.2s" dur="0.6s" repeatCount="indefinite"></animateTransform>
    </rect>
    <rect x="20" y="0" width="4" height="10" fill="#FF6700" transform="translate(0 3.89973)">
        <animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0.4s" dur="0.6s" repeatCount="indefinite"></animateTransform>
    </rect>
</svg>


<!--第六个-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50" xml:space="preserve">
    <rect x="0" y="9.22656" width="4" height="12.5469" fill="#FF6700">
        <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
        <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
    </rect>
    <rect x="10" y="5.22656" width="4" height="20.5469" fill="#FF6700">
        <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
        <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
    </rect>
    <rect x="20" y="8.77344" width="4" height="13.4531" fill="#FF6700">
        <animate attributeName="height" attributeType="XML" values="5;21;5" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
        <animate attributeName="y" attributeType="XML" values="13; 5; 13" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
    </rect>
</svg>


<!--第七个-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="60px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50" xml:space="preserve">
    <rect x="0" y="0" width="4" height="20" fill="#FF6700">
        <animate attributeName="opacity" attributeType="XML" values="1; .2; 1" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
    </rect>
    <rect x="7" y="0" width="4" height="20" fill="#FF6700">
        <animate attributeName="opacity" attributeType="XML" values="1; .2; 1" begin="0.2s" dur="0.6s" repeatCount="indefinite"></animate>
    </rect>
    <rect x="14" y="0" width="4" height="20" fill="#FF6700">
        <animate attributeName="opacity" attributeType="XML" values="1; .2; 1" begin="0.4s" dur="0.6s" repeatCount="indefinite"></animate>
    </rect>
</svg>


<!--第八个-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="60px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50" xml:space="preserve">
    <rect x="0" y="7.6416" width="4" height="14.7168" fill="#FF6700" opacity="0.2">
        <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
        <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
        <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
    </rect>
    <rect x="8" y="5.1416" width="4" height="19.7168" fill="#FF6700" opacity="0.2">
        <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
        <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
        <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
    </rect>
    <rect x="16" y="7.3584" width="4" height="15.2832" fill="#FF6700" opacity="0.2">
        <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
        <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
        <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
    </rect>
</svg>
君王的羔羊
关注
纯SVG实现的Loading动画，拿走不谢
我是码农
03-27 1万+
话不多说，直接上代码。 （ 到这里看效果： http://www.var6.cn/work/1/22/MD的编程作品 ） 第一个： <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 40 40" e...
SVG中的动画
01-08 1144
SVG中的动画元素有五个，它们都可以随着时间的变化而改变SVG元素的属性或样式值,如下所示: ：改变数值的属性或样式的值； ：改变非数据值的属性或样式的值，如visibility属性等； ：沿着某路径移动SVG元素获得动画效果； ：改变某些元素与颜色有关的属性或样式的值； ：改变SVG元素进行坐标变换时候的动画效果；   attributeName=""：
svg 动画_SVG帧动画在公众号图文中的应用
weixin_39694264的博客
12-06 365
最近在水果公众号上看到一段菊花绽放的动画，丝般润滑的感受，吹弹可破的花瓣，让我忍不住看了下究竟，将所得整理了下，作为小技巧分享给大家。具体看下图，视频转换成GIF质量下降，有兴趣可以去水果公号看。水果公众号的绽放动画瞄了下源代码，居然是用SVG动画拼成的序列帧。序列帧是什么？水果前端为什么好好的GIF图不用，要用序列帧？原因听我慢慢道来。什么是序列帧？序列帧就是一系列静止图像，将这些图像按照一定的...
纯 svg 原生 好看的调色板效果图
who_become_gods的博客
03-04 465
效果图如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>change tab</title> <script src="https://apps.bdimg.com/libs/jquery/2.1...
SVG动画
mjzhang1993的博客
03-28 388
SVG – 动画1. 动画原理 动画实际上就是值 关于 时间 的函数from 起始值 to 结束值 duration 总时长 timing-function 值关于时间的函数 frame 帧 很小的时间段 interpolation 每一帧的差值 2. SMIL - 定位动画目标1. 使用 xlink:href="url()" 定位<anmiate xlink:href="url(#rect1
纯svg加载loading动画.zip
09-01
在本压缩包“纯svg加载loading动画.zip”中，包含了11种不同的SVG加载动画效果。这些动画是通过编写SVG代码并结合CSS或JavaScript来实现动态效果的。每一种效果都通过`<img>`标签直接调用SVG文件，这种方式简洁高效...
前端，可视化大屏，纯css3+svg动画实现流转动画
06-21
在这个项目中，我们看到开发者利用了纯CSS3和SVG技术来创建流转动画，为用户提供更直观、动态的数据展示效果。以下是关于这些知识点的详细说明： 1. **CSS3**: CSS3是层叠样式表的最新版本，它提供了许多新特性，如...
svg 动画_30个很棒的SVG动画
weixin_39832829的博客
11-29 978
作者：MrWang转发链接：https://segmentfault.com/a/1190000023090287前言设计人员使用CSS在HTML元素中创建动画。然而，由于HTML元素在创建模式、形状等方面的局限性，它们自然会转向SVG。使用SVG，我们享受到了对SVG动画良好的浏览器支持，并且我们有更多的方法来创建新的动画。您可以同时使用内置的SVG动画功能或CSS3动画(请注意，并不是所有的事...
HTML5 SVG Loading 动画加载特效.rar
07-10
收集一些手机端可用的HTML5 SVG Loading 动画加载特效 ，一共是4个网页加载特效动画，这些Loading看上去是不是很眼熟，在手机上或PC端见到的几率比较大，纯HTML5 SVG技术实现，没有使用任何图片资源，而且个个精美。...
10款华丽的SVG Loading加载动画效果
06-11
3. **JavaScript控制**：除了CSS，JavaScript也可以用于SVG动画。例如，使用`requestAnimationFrame`函数可以实现逐帧渲染，通过调整SVG元素的属性，如路径数据、填充色等，创建出复杂的交互式动画。 4. **过渡与...
公众号SVG动画交互实战代码
10-15
主要介绍了公众号SVG动画交互实战代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
图片点击svg效果
05-30
点击图片，弹出详情特效
svg 动画_微信公众号SVG动画交互实战
weixin_39528525的博客
12-10 2401
越来越多的公众号在图文消息中加入了SVG动画交互效果，SVG支持事件触发动画，相对于单独做一个H5而言，由于公众号消息依托于微信服务器，为广告主节约了服务器流量成本。这次我们以苹果公众号的一篇交互消息为例，剖析下里面的效果是怎样实现的。动画主要分为两屏，第一屏出现闪动文字提示用户点击交互，用户点击后第一屏动画消失接着播放第二屏的gif动画，最后画面停止在产品图片帧上。1.首先构建第一屏动画：1.1...
svg 与svg动画
qq_31860607的博客
08-12 736
SVG动画——Android 5.0新特性介绍(2) 2015年3月29日摸爬滚打学Android 先放点motivation （GIF图点开，看动画） 要实现这个布局很简单，用FrameLayout加一个ImageView并设置一个图片，再在FrameLayout上放一个RelativeLayout，背景用这个矢量图。布局文件如下: 1234567891011121314151
写 SVG 动画必看！SVG系列文章4-微信公众号编写
SiShen654的博客
12-12 1071
新建图文消息，先输入好标题、作者，上传好封面图。
SVG基本使用（四、动画、动画常用属性、复合动画/往返动画/形变动画/路径动画、脚本编程
coldriversnow的专栏
05-22 8170
一、动画1.SVG动画在SVG中提供了三种常用动画标记animate：基础动画animateTransform：形变动画animateMotion：路径动画2.SVG动画属性attributeType: CSS/XML 规定的属性值的名称空间attributeName: 规定元素的哪个属性会产生动画效果from/to: 从哪到哪dur: 动画时长fill: 动画结束之后的状态 保持freeze结束状态/remove恢复初始状态（默认值）3.SVG动画使用方式。
SVG互动排版公众号图文『路径动画与描边动画』模板代码
懂点君
07-08 536
模板代码 <section style="overflow: hidden;line-height: 0;" data-author="公众号：懂点君"> <!-- 内容区域 --> <section style="height: 0;" data-author="公众号：懂点君"> <svg viewBox="0 0 1000 4300" style="display: block;width: 100%;background
svg动画图形绘制
weixin_45441173的博客
01-19 1532
svg动画图形绘制
【2024更新●SVG案例库】黑科技SVG公众号排版交互图文案例汇总
最新发布
懂点君
04-12 2193
SVG黑科技排版案例库
SVG动画源文件压缩包下载
资源摘要信息:"SVG动画-源文件压缩包" 知识点: 1. SVG基础知识: SVG是Scalable Vector Graphics(可缩放矢量图形)的缩写。是一种基于XML的图像格式，用于描述二维矢量图形。SVG格式是基于文本的，这意味着图像可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值