SVG实现波浪效果
SVG实现波浪效果
svg path:C 贝塞尔曲线绘制波浪形状
A 绘制圆弧形
svg animate:制作波浪动画,为了波浪动画效果自然,设置values关键点
attributeName:变化属性名
dur:动画时间
repeatCount:循环次数
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="400">
<g id="circle">
<text x="115" y="115" font-size="36px" fill="#000" text-anchor="middle" transform="translate(0,18)">50%</text>
<circle r="100" cx="115" cy="115" fill="none" stroke-width="10" stroke="rgb(135,206,250)" />
<circle cx="115" cy="115" r="90" fill="none" stroke="white" />
<path d="M 25,115 C 67.5,74 162.5,156 205,115 A 90,90 0 0,1 25,115 z" fill="rgba(135,206,250,.8)">
<animate attributeName="d" attributeType="XML" dur="3s" repeatCount="indefinite"
values="M 25,115 C 67.5,74 162.5,156 205,115 A 90,90 0 0,1 25,115 z;
M 25,115 C 67.5,115 162.5,115 205,115 A 90,90 0 0,1 25,115 z;
M 25,115 C 67.5,156 162.5,74 205,115 A 90,90 0 0,1 25,115 z;
M 25,115 C 67.5,115 162.5,115 205,115 A 90,90 0 0,1 25,115 z;
M 25,115 C 67.5,74 162.5,156 205,115 A 90,90 0 0,1 25,115 z;"></animate>
</path>
</g>
</svg>
效果图:
SVG实现波浪效果的更多相关文章
- 纯 CSS 实现波浪效果!
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
- Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客
Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客 Canvas之动态波浪效果 (2012-04-26 09:04:51) 转载▼
- iOS 波浪效果的实现
iOS 波浪效果的实现 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #4f8187; background-c ...
- 自定义view 波浪效果
实现波浪效果view,可以自定义view,也可以自定义drawable,我个人比较喜欢重写drawable,因此这里是自定义drawable实现效果,费话少说,先看效果. 这里用了两种方式实现波浪效果 ...
- Css3实现波浪效果3-静态波纹
一.外框宽度等比例3个椭圆拼合 .container { position: absolute; width: 400px; height: 200px; border: 5px solid rgb( ...
- Css3实现波浪效果2
一.不规则圆,旋转实现波浪效果 .info { width: 200px; height: 200px; ; background: #009A61; border-radius: 45%; colo ...
- css3+svg实现波浪图
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>css+svg实现波浪图 ...
- Android自定义控件练手——波浪效果
这一次要绘制出波浪效果,也是小白的我第一次还望轻喷.首先当然是展示效果图啦: 一.首先来说说实现思路. 想到波浪效果,当然我第一反应是用正余弦波来设计啦(也能通过贝塞尔曲线,这里我不提及这个方法但是在 ...
- 使用纯css实现波浪效果
有时候我们需要实现水晃动的效果,其实我们可以通过css旋转动画和圆角来实现. 首先来2个div,外层div相对定位,内层div绝对定位,内层div大致位于外层div上半部分.外层div设置一个颜色较深 ...
随机推荐
- readonly and const variable
共同点:都是常量: 不同点:const的值必须在编译前确定,通常在声明的同时赋值:而readonly可在运行时确定:
- 【Oracle】DG中 Switchover 主、备切换
操作系统:OEL 5.6 数据库版本:Oracle11gR2 11.2.0.4.0 Switchover切换要求主库和备库在数据同步情况下进行,是主备之间的正常切换,主要用于日常维护.灾备演练等.切 ...
- [Intermediate Algorithm] - Smallest Common Multiple
题目 找出能被两个给定参数和它们之间的连续数字整除的最小公倍数. 范围是两个数字构成的数组,两个数字不一定按数字顺序排序. 例如对 1 和 3 —— 找出能被 1 和 3 和它们之间所有数字整除的最小 ...
- mac安装win10后触摸板没有右键功能键的添加技巧
一些mac用户也会在自己的笔记本电脑上安装windows10系统. 但最近有部分用户发现,安装上win10正式版后,发现无论点击触摸板哪个位置,都只有左键,根本无法右键的问题, 针对此问题,现笔者分享 ...
- JS 100内与7相关的数
var s =""; for(var i=0;i;i++) { if(i%7 == 0 ){ s += i+","; } else if((i-7)%10 == ...
- 路飞学城Python-Day153
Scrapy核心组件
- 基于fullpage的自动播放,手动播放,暂停页面的功能
功能如下: 1.默认加载方式为“自动播放 ”方式,即从第1屏至第5屏 页面循环加载显示,每屏每次仅显示1个页面,页面间停留时间为“10”秒2.手动播放过程中,按数字键“1”-“5”,将直接切到指定页面 ...
- navicat Premium远程链接mysql报错
1,报错1057,原来是没有远程权限连接mysql 2.打开my.ini文件,添加skip-grant-tables跳过验证 3.添加到path环境变量,前面是英文下的分号 4.切换到cmd,输入my ...
- 数据结构(1) 第一天 算法时间复杂度、线性表介绍、动态数组搭建(仿Vector)、单向链表搭建、企业链表思路
01 数据结构基本概念_大O表示法 无论n是多少都执行三个具体步骤 执行了12步 O(12)=>O(1) O(n) log 2 N = log c N / log c N (相当于两个对数进行了 ...
- IAR for MSP430 关于添加自定义头文件的两种方法【转】
前言:第一次接触这个软件,编译一个例程一直出现没有包含头文件的错误,在网上找了好几个方法都没什么效果,看到了篇文章,利用里面的方法1解决了,特此复制下来保存学习用. 原文链接:https://blog ...