数据可视化 SVG （二）
2024-05-13 19:13:23
目录：
1 渐变和滤镜
2 SVG 形变
3 路径描边动画
4 SMIL 动画
5 第三方动画库
6 SVG 动画案例
一、渐变色和滤镜效果：
1、css实现毛玻璃效果
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{margin: 0;padding: 0;}.box{position: relative;width: 200px;height: 200px;}.bg-cover{position: absolute;left: 0;top: 0;width: 100%;height: 100%;/* 做毛玻璃效果 */background-color: transparent;backdrop-filter: blur(8px);}</style> </head> <body><div class="box"><img src="../images/avatar.jpeg" alt=""><div class="bg-cover"></div></div> </body> </html>
2、渐变色
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{background-image: url(../images/grid.png);}svg{background-color: rgba(255, 0, 0, 0.1);}</style></head> <body><svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" ><!-- 定义可以复用的元素: 样式, 渐变, 图形, 滤镜... --><defs><!-- 默认的渐变色 --><linearGradient id="gradient1"><stop offset="0%" stop-color="red"></stop><stop offset="50%" stop-color="green"></stop><stop offset="100%" stop-color="blue"></stop></linearGradient><!-- 这个是制定渐变的方向 相当于（0,0）到（1,1）--><linearGradient id="gradient2" x1="0" y1="0" x2="1" y2="1" ><stop offset="0%" stop-color="red"></stop><stop offset="50%" stop-color="green"></stop><stop offset="100%" stop-color="blue"></stop></linearGradient><!-- 通过形变 渐变色(了解 ) --><linearGradient id="gradient3" gradientTransform="rotate(0)"><stop offset="0%" stop-color="red"></stop><stop offset="50%" stop-color="green"></stop><stop offset="100%" stop-color="blue"></stop></linearGradient></defs><rect x="0" y="0" width="100" height="50" fill="url(#gradient3)"></rect></svg></body> </html>3、css实现的毛玻璃效果 filter
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{margin: 0;padding: 0;}.box{position: relative;width: 200px;height: 200px;/* 超出去的模糊效果 隐藏掉 */overflow: hidden;}img{/* 毛玻璃效果 */filter: blur(8px);}</style> </head> <body><div class="box"><img src="../images/avatar.jpeg" alt=""></div> </body> </html>
4、svg的滤镜效果-模糊效果
<filter id="blurFilter">
<!-- ...... -->
<feGaussianBlur stdDeviation="8"></feGaussianBlur>
</filter><!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{/* background-image: url(../images/grid.png); */}svg{/* background-color: rgba(255, 0, 0, 0.1); */}</style></head> <body><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" ><defs><!-- 高斯模糊的 效果 --><filter id="blurFilter"><!-- ...... --><feGaussianBlur stdDeviation="8"></feGaussianBlur></filter></defs><image href="../images/avatar.jpeg"width="200"height="200"filter="url(#blurFilter)"></image></svg></body> </html>
5、svg的滤镜效果-模糊效果-区域
<filter id="blurFilter" x="50%" y="50%" width="50%" height="25%">
<feGaussianBlur stdDeviation="8"></feGaussianBlur>
</filter><!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{/* background-image: url(../images/grid.png); */}svg{/* background-color: rgba(255, 0, 0, 0.1); */}</style></head> <body><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" ><defs><!-- 高斯模糊的 效果 --><filter id="blurFilter" x="50%" y="50%" width="50%" height="25%"><feGaussianBlur stdDeviation="8"></feGaussianBlur></filter></defs><image href="../images/avatar.jpeg"width="200"height="200"filter="url(#blurFilter)"></image></svg></body> </html>
二、svg的形变
1、平移 transform="translate(x, y)" 属性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{background-image: url(../images/grid.png);}svg{background-color: rgba(255, 0, 0, 0.1);}</style></head> <body><svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" ><!-- 1.平移一个元素 --><!-- <rect x="0" y="0" width="100" height="50"transform="translate(200, 200)"></rect> --><!-- 2.平移一个元素, 在元素的内部会创建一个新的坐标系统 --><!-- <rect transform="translate(100, 100)"x="-10" y="-10" width="100" height="50"></rect> --><!-- 2.平移一个元素, 在元素的内部会创建一个新的坐标系统 --><g transform="translate(100, 100)"><rect x="10" y="10" width="100" height="50"></rect></g></svg></body> </html>
2、旋转-rotatae transform="rotate(45, 50, 25) translate(100, 0)" 属性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{background-image: url(../images/grid.png);}svg{background-color: rgba(255, 0, 0, 0.1);}</style></head> <body><svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" ><!-- 1.旋转一个元素 --><!-- <rect transform="rotate(45, 50, 25) translate(100, 0)"x="0" y="0" width="100" height="50"></rect> --><rect transform="translate(100, 0) rotate(45, 50, 25)"x="0" y="0" width="100" height="50"></rect></svg></body> </html>
3、缩放-scale transform="scale(2)" 属性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{background-image: url(../images/grid.png);}svg{background-color: rgba(255, 0, 0, 0.1);}</style></head> <body><svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" ><!-- 1.缩放一个元素 --><!-- <rect transform="translate(100, 100) scale(1, 2)"x="0" y="0" width="100" height="50"></rect> --><!-- 2.修改缩放的原点 --><!-- <rect transform="translate(100, 100) scale(2)"x="-25" y="-25" width="50" height="50"></rect> --><!-- 3.修改缩放的原点 --><g transform="scale(2)"><recttransform="translate(10, 0)"x="0" y="0" width="50" height="50"></rect></g></svg></body> </html>
三、svg描边动画
1、stroke描边动画效果1
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{background-image: url(../images/grid.png);}svg{background-color: rgba(255, 0, 0, 0.1);}#line1{/* 指定为虚线 */stroke-dasharray: 100px;/* 可见 */stroke-dashoffset: 0px;animation: line1Move 2s linear;}@keyframes line1Move{0%{/* 不可见 */stroke-dashoffset: 100px;}100%{/* 可见 */stroke-dashoffset: 0px;}}</style></head> <body><svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" ><!-- stroke , 而不是 fill--><line id="line1"x1="100" y1="70" x2="200" y2="70" stroke="red" stroke-width="10"></line></svg></body> </html>2、stroke描边动画效果2 1的简写
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{background-image: url(../images/grid.png);}svg{background-color: rgba(255, 0, 0, 0.1);}#line1{/* 指定为虚线 */stroke-dasharray: 100px;/* 不可见 */stroke-dashoffset: 100px;animation: line1Move 2s linear forwards;}@keyframes line1Move{100%{stroke-dashoffset: 0px; /* 可见 */}}</style></head> <body><svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" ><!-- stroke , 而不是 fill--><line id="line1"x1="100" y1="70" x2="200" y2="70" stroke="red" stroke-width="10"></line></svg></body> </html>3、stroke描边动画效果3 动画演出速度比前面快
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{background-image: url(../images/grid.png);}svg{background-color: rgba(255, 0, 0, 0.1);}#line1{/* 指定为虚线 100px */stroke-dasharray: 500px;/* 不可见 */stroke-dashoffset: 500px;animation: line1Move 2s linear forwards;}@keyframes line1Move{100%{stroke-dashoffset: 0px; /* 可见 */}}</style></head> <body><svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" ><!-- stroke , 而不是 fill--><line id="line1"x1="100" y1="70" x2="200" y2="70" stroke="red" stroke-width="10"></line></svg></body> </html>4、stroke描边动画效果4 就算是曲线也一样可以做到按曲线方向移动
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{background-image: url(../images/grid.png);}svg{background-color: rgba(255, 0, 0, 0.1);}#line1{/* 将线段设置为虚线 */stroke-dasharray:130px;/* 偏移 不可见 */stroke-dashoffset: 130px;animation: line1Move 3s linear forwards;}@keyframes line1Move{100%{stroke-dashoffset: 0px; /* 可见 */}}</style></head> <body><svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" ><!-- stroke , 而不是 fill--><pathid="line1"d="M 100 70, L 200 70, L 200 100"stroke="red"stroke-width="10"fill="transparent"></path></svg></body> </html>5、雪糕动画案例
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 0, 1.75 800, 2.5 200 --><style>.inside-r,.inside-l,.drop,.stick,.outline{animation: lineMove 2s linear forwards;}.outline{/* 虚线 1019 */stroke-dasharray: 1020px;/* 不可见 */stroke-dashoffset: 1020px;}.stick{/* 这里本来是给 252px就行了,但是我们给800, 想加速 */stroke-dasharray: 800px;/* 不可见 */stroke-dashoffset: 800px;/* animation: lineMove 2s linear forwards; */animation-delay: 1.75s;}.drop{stroke-dasharray: 200px;stroke-dashoffset: 200px;/* animation: lineMove 2s linear forwards; */animation-delay: 2.5s;}.inside-l{stroke-dasharray: 800px;stroke-dashoffset: 800px;/* animation: lineMove 2s linear forwards; */animation-delay: 1s;}.inside-r{stroke-dasharray: 700px;stroke-dashoffset: 700px;/* animation: lineMove 2s linear forwards; */}@keyframes lineMove{100%{/* 可见 */stroke-dashoffset: 0px;}}</style></head><body><svgid="popsicle"width="300"height="400"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 177.3 449.1"><g stroke="black" stroke-width="5px"><!-- 手柄 --><pathclass="stick"d="M408.8,395.9V502.4a18.8,18.8,0,0,1-18.8,18.8h0a18.8,18.8,0,0,1-18.8-18.8V415.3"transform="translate(-301.2 -73.5)"fill="none"/><!-- 水滴 --><pathclass="drop"d="M359.1,453.5c0,3.1-2.1,5.6-4.7,5.6s-4.7-2.5-4.7-5.6,2.1-8.3,4.7-8.3S359.1,450.4,359.1,453.5Z"transform="translate(-301.2 -73.5)"fill="none"/><!-- 外层 --><pathclass="outline"d="M389.9,75h0a87.4,87.4,0,0,0-87.2,87.2v218a15.7,15.7,0,0,0,15.7,15.7h12a4.3,4.3,0,0,1,4.1,4.8h0.1v17c0,8.2,9.1,7.9,9.1,0v-6c0-5.2,5.8-5.2,5.8,0v20.5c0,7.7,9.8,7.7,9.8,0V407.2c0-5.2,6.4-5.2,6.4,0v2.7c0,7.7,8.8,7.7,8.8,0v-6c0-6.4,3.9-7.8,6-8.1h80.9a15.7,15.7,0,0,0,15.7-15.7v-218A87.4,87.4,0,0,0,389.9,75Z"transform="translate(-301.2 -73.5)"fill="none"/><!-- 里面左边 --><pathclass="inside-l"d="M55.5,68h0A20.2,20.2,0,0,1,75.7,88.2V276.9a4.5,4.5,0,0,1-4.5,4.5H39.8a4.5,4.5,0,0,1-4.5-4.5V88.2A20.2,20.2,0,0,1,55.5,68Z"fill="none"/><!-- 里面左边 --><pathclass="inside-r"d="M121.8,68h0A20.2,20.2,0,0,1,142,88.2V277a4.4,4.4,0,0,1-4.4,4.4H106.1a4.4,4.4,0,0,1-4.4-4.4V88.2A20.2,20.2,0,0,1,121.8,68Z"fill="none"/></g></svg><script>window.onload = function () {getPathLength("stick"); // 252pxgetPathLength("drop"); // 36getPathLength("outline"); // 1019getPathLength("inside-l"); // 486getPathLength("inside-r"); // 486};function getPathLength(className) {let stickEl = document.getElementsByClassName(className)[0];let stickLength = stickEl.getTotalLength();console.log(className + "Length=", stickLength);}</script></body> </html>四、svg的SMIL动画 以下的元素标签都是放到图形标签里面的，各自也有属性来调整动画
1、set元素-动画 set不足之处是没有过度动画，是跳变的。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{background-image: url(../images/grid.png);}svg{background-color: rgba(255, 0, 0, 0.1);}</style></head> <body><svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" ><rect x="0" y="0" width="100" height="50" fill="red"><setattributeName ='x'to="200"begin="3s"></set> </rect></svg><svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" ><rect id="rectangle" x="0" y="0" width="100" height="50" fill="green"><setattributeName ='x'to="200"begin="rectangle.click"></set> </rect></svg></body> </html>2、animiate元素 -动画
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{background-image: url(../images/grid.png);}svg{background-color: rgba(255, 0, 0, 0.1);}</style></head> <body><svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" ><rect x="0" y="0" width="100" height="50" fill="red"><!-- 1.animate 元素的基本使用--><!-- <animateattributeName="x"form="0"to="200"dur="3s"begin="2s"fill="freeze"> --><!-- 2.animate 元素的基本使用(3个属性时必须的)--><animateattributeName="x"to="200"dur="3s"></animate></rect></svg><svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" ><rect x="0" y="0" width="100" height="50" fill="green"><!-- form: 0to: 200--><animateattributeName="x"values="0; 170; 200"dur="3s"repeatCount="indefinite"></animate><animateattributeName="fill"values="red;green"dur="3s"repeatCount="indefinite"></animate></rect></svg><svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" ><rect x="0" y="0" width="100" height="50" fill="pink"><animateid="oneAnimate"attributeName="x"values="0;200"dur="3s"fill="freeze"></animate><animateattributeName="y"values="0;100"dur="3s"fill="freeze"begin="oneAnimate.end"></animate></rect></svg></body> </html>3、animateTransform--translate 平移的动画
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{background-image: url(../images/grid.png);}svg{background-color: rgba(255, 0, 0, 0.1);}</style></head> <body><svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" ><rect x="0" y="0" width="100" height="50" fill="red"><animateTransformattributeName="transform"type="translate"from="0, 0"to="200, 0"dur="2s"begin="1s"repeatCount="indefinite"></animateTransform></rect></svg><svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" ><rect x="0" y="0" width="100" height="50" fill="red"><animateTransformattributeName="transform"type="translate"values="0 0;200 0"dur="2s"begin="1s"repeatCount="indefinite"></animateTransform></rect></svg></body> </html>4、animateTransform-rotate 旋转 旋转的中心以from和to的第2、3参数定义。也可以使用value简写的方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{background-image: url(../images/grid.png);}svg{background-color: rgba(255, 0, 0, 0.1);}</style></head> <body><svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" ><rect x="0" y="0" width="50" height="50" fill="red"><animateTransformattributeName="transform"type="rotate"from="0 150 150"to="360 150 150"dur="20s"begin="1s"repeatCount="indefinite"></animateTransform></rect></svg><!-- <svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" ><rect x="0" y="0" width="100" height="50" fill="red"><animateTransformattributeName="transform"type="rotate"values="0 50 25;-360 50 25"dur="2s"begin="1s"repeatCount="indefinite"></animateTransform></rect></svg> --></body> </html>5、animateTransform-scale 缩放的动画 2个参数分别对应xy轴
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{background-image: url(../images/grid.png);}svg{background-color: rgba(255, 0, 0, 0.1);}</style></head> <body><svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" ><rect x="0" y="0" width="100" height="50" fill="red"><animateTransformattributeName="transform"type="scale"from="1 1"to="1 3"dur="2s"begin="1s"repeatCount="indefinite"></animateTransform></rect></svg><svg width="300" height="200" xmlns="http://www.w3.org/2000/svg" ><rect x="0" y="0" width="100" height="50" fill="red"><animateTransformattributeName="transform"type="scale"values="1;0.5"dur="2s"begin="1s"repeatCount="indefinite"></animateTransform></rect></svg></body> </html>6、animateMotion动画 此标签的rotate可以自动控制图形的方向，path控制路径
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{background-image: url(../images/grid.png);}svg{background-color: rgba(255, 0, 0, 0.1);}</style></head> <body><svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" ><!-- 画一条路径 --><path d="M 0 100, L 100 30, L 200 100, L 300 30" fill="transparent" stroke="red"></path><!-- repeatCount="indefinite"--><rect x="0" y="0" width="20" height="10" rx="4" ry="4" fill="red"><animateMotionpath="M 0 100, L 100 30, L 200 100, L 300 30"dur="5s"rotate="auto"></animateMotion></rect></svg></body> </html>7、animateMotion动画-复用路径 在animateMotion标签里面使用mpath标签来设置路线
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{background-image: url(../images/grid.png);}svg{background-color: rgba(255, 0, 0, 0.1);}</style></head> <body><svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" ><!-- 画一条路径 --><path id="linePath" d="M 0 100, L 100 30, L 200 100, L 300 30" fill="transparent" stroke="red"></path><!-- repeatCount="indefinite"--><rect x="0" y="0" width="20" height="10" rx="4" ry="4" fill="red"><animateMotiondur="5s"rotate="auto"><mpath href="#linePath"></mpath></animateMotion></rect></svg></body> </html>8、animateMotion动画-优化 通过给小长方形设置xy为负的一半长宽可以做到图形中心在直线上运动
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{background-image: url(../images/grid.png);}svg{background-color: rgba(255, 0, 0, 0.1);}</style></head> <body><svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" ><!-- 1.图形 --><path id="linePath" d="M 0 100, L 100 30, L 200 100, L 300 30" fill="transparent" stroke="red"></path><rect id="rectangle" x="-10" y="-5" width="20" height="10" rx="4" ry="4" fill="red"></rect><!-- 2.动画 --><animateMotionhref="#rectangle"dur="5s"rotate="auto"fill="freeze"><mpath href="#linePath"></mpath></animateMotion></svg></body> </html>五、svg动画案例
1、飞机飞行轨迹
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><svg width="400" height="200" viewBox="0 0 3387 1270"><defs><style>svg {background-color: #28505d;}/**飞机飞行路线**/.planePath {stroke: #d9dada;stroke-width: 0.5%;stroke-dasharray: 1% 2%;stroke-linecap: round;fill: none;}/**飞机颜色**/.fil1 {fill: #d9dada;}.fil2 {fill: #c5c6c6;}.fil4 {fill: #9d9e9e;}.fil3 {fill: #aeafb0;}</style></defs><!-- 飞行路径 --><pathid="planePath"class="planePath"d="M-226 626c439,4 636,-213 934,-225 755,-31 602,769 1334,658 562,-86 668,-698 266,-908 -401,-210 -893,189 -632,630 260,441 747,121 1051,91 360,-36 889,179 889,179"/><!-- 飞机图形--><g id="plane"><polygonclass="fil1"points="-141,-10 199,0 -198,-72 -188,-61 -171,-57 -184,-57 "/><polygon class="fil2" points="199,0 -141,-10 -163,63 -123,9 " /><polygonclass="fil3"points="-95,39 -113,32 -123,9 -163,63 -105,53 -108,45 -87,48 -90,45 -103,41 -94,41 "/><pathclass="fil4"d="M-87 48l-21 -3 3 8 19 -4 -1 -1zm-26 -16l18 7 -2 -1 32 -7 -29 1 11 -4 -24 -1 -16 -18 10 23zm10 9l13 4 -4 -4 -9 0z"/><polygonclass="fil1"points="-83,28 -94,32 -65,31 -97,38 -86,49 -67,70 199,0 -123,9 -107,27 "/></g><!-- 动画效果 --><animateMotionhref="#plane"dur="6s"rotate="auto"repeatCount="indefinite"><mpath href="#planePath"></mpath></animateMotion></svg></body> </html>2、进度条加载动画
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>body {margin: 0;padding: 0;background-color: #e74c3c;}svg {margin: 40px;}</style></head><body><!-- 1)音乐播放动画--><svgxmlns="http://www.w3.org/2000/svg"width="80"height="100"viewBox="0 0 80 100"><!-- line 1 --><rectfill="#fff"width="3"height="100"transform="rotate(180,3,50)"><animateattributeName="height"values="30; 100; 30"dur="1s"repeatCount="indefinite"begin="0s"></animate></rect><!-- line2 --><rectx="17"fill="#fff"width="3"height="100"transform="rotate(180 20 50)"><animateattributeName="height"values="30; 100; 30"dur="1s"repeatCount="indefinite"begin="0.1s"></animate></rect><!-- line3 --><rectx="40"fill="#fff"width="3"height="100"transform="rotate(180,40,50)"><animateattributeName="height"values="30; 100; 30"dur="1s"repeatCount="indefinite"begin="0.3s"></animate></rect><!-- line4 --><rectx="60"fill="#fff"width="3"height="100"transform="rotate(180 58 50)"><animateattributeName="height"values="30; 100; 30"dur="1s"repeatCount="indefinite"begin="0.5s"></animate></rect><!-- line4 --><rectx="80"fill="#fff"width="3"height="100"transform="translate(0) rotate(180 76 50)"><animateattributeName="height"values="30; 100; 30"dur="1s"repeatCount="indefinite"begin="0.1s"></animate></rect></svg><!-- 2.进度条动画 --><svgxmlns="http://www.w3.org/2000/svg"width="100"height="100"viewBox="0 0 100 100"><circle fill="#fff" stroke="none" cx="6" cy="50" r="6"><animateattributeName="opacity"values="0;1;0"dur="1s"begin="0s"repeatCount="indefinite"></animate></circle><circle fill="#fff" stroke="none" cx="26" cy="50" r="6"><animateattributeName="opacity"values="0;1;0"dur="1s"begin="0.1s"repeatCount="indefinite"></animate></circle><circle fill="#fff" stroke="none" cx="46" cy="50" r="6"><animateattributeName="opacity"values="0;1;0"dur="1s"begin="0.2s"repeatCount="indefinite"></animate></circle></svg><!-- 3.转动动画 --><svgxmlns="http://www.w3.org/2000/svg"width="100"height="100"viewBox="0 0 100 100"><!-- big circle --><circlefill="none"stroke="#fff"stroke-width="6"stroke-miterlimit="15"stroke-dasharray="14.2472,14.2472"cx="50"cy="50"r="47"><animateTransformattributeName="transform"type="rotate"values="0 50 50;360 50 50"dur="5s"repeatCount="indefinite"></animateTransform></circle><!-- small circle --><circlefill="none"stroke="#fff"stroke-width="1"stroke-miterlimit="10"stroke-dasharray="10,10"cx="50"cy="50"r="39"><animateTransformattributeName="transform"type="rotate"values="0 50 50;-360 50 50"dur="5s"repeatCount="indefinite"></animateTransform></circle><!-- rect --><g fill="#fff"><rect x="30" y="35" width="5" height="30"><animateTransformattributeName="transform"type="translate"values="0 -5; 0 5; 0 -5"dur="1s"begin="0s"repeatCount="indefinite"></animateTransform></rect><rect x="40" y="35" width="5" height="30"><animateTransformattributeName="transform"type="translate"values="0 -5; 0 5; 0 -5"dur="1s"begin="0.1s"repeatCount="indefinite"></animateTransform></rect><rect x="50" y="35" width="5" height="30"><animateTransformattributeName="transform"type="translate"values="0 -5; 0 5; 0 -5"dur="1s"begin="0.2s"repeatCount="indefinite"></animateTransform></rect><rect x="60" y="35" width="5" height="30"><animateTransformattributeName="transform"type="translate"values="0 -5; 0 5; 0 -5"dur="1s"begin="0.3s"repeatCount="indefinite"></animateTransform></rect><rect x="70" y="35" width="5" height="30"><animateTransformattributeName="transform"type="translate"values="0 -5; 0 5; 0 -5"dur="1s"begin="0.4s"repeatCount="indefinite"></animateTransform></rect></g></svg></body> </html>3、定位动画+css3-temp
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.first-box {width: 600px;height: 314px;background: url(./images/bg-location.png);background-size: 100% 100%;}/* 定位的 icon */#loc1{animation: moveLoc1Icon1 1s linear infinite alternate;}#loc2{animation: moveLoc1Icon2 1s linear infinite alternate;animation-delay: 0.3s;}@keyframes moveLoc1Icon1{0%{transform: translateY(-20px);}100%{transform: translateY(0px);}}@keyframes moveLoc1Icon2{0%{transform: translateY(0px);}100%{transform: translateY(10px);}}#c1{animation: scaleEllipse1 2s linear infinite;}#c2{animation: scaleEllipse2 2s linear infinite;animation-delay: 1s;}#c3, #c4{animation: scaleEllipse3 2s linear infinite;}#c4{animation-delay: 1s;}@keyframes scaleEllipse1{0%{rx:0;ry:0;opacity: 1;}100%{rx:16;ry:8;opacity: 0;}}@keyframes scaleEllipse2{0%{rx:0;ry:0;opacity: 1;}100%{rx:12;ry:6;opacity: 0;}}@keyframes scaleEllipse3{0%{rx:0;ry:0;opacity: 1;}100%{rx:10;ry:5;opacity: 0;}}</style></head><body><div class="box-left first-box"><svgid="location"height="400"version="1.1"width="744"xmlns="http://www.w3.org/2000/svg"><desc>Created with Snap</desc><defs><linearGradientx1="100%"y1="40.7087699%"x2="4.9797314%"y2="60.8683027%"id="linearGradient-1"><stop stop-color="#F5533D" stop-opacity="0" offset="0%"></stop><stop stop-color="#F5533D" offset="44.5180532%"></stop><stop stop-color="#F5533D" stop-opacity="0" offset="100%"></stop></linearGradient></defs><imageid="loc1"xlink:href="./images/redPoint.png"preserveAspectRatio="none"x="265"y="50.275"width="55"height="74"></image><imageid="loc2"xlink:href="./images/smPoint.png"preserveAspectRatio="none"x="155"y="69.97776888888889"width="25"height="34"></image><imageid="loc3"xlink:href="./images/smPoint.png"preserveAspectRatio="none"x="435"y="90.35983743115371"width="25"height="34"></image><imagexlink:href=" ./images/bg-red.png"preserveAspectRatio="none"x="278"y="94"width="30"height="100"></image><imagexlink:href=" ./images/bg-red.png"preserveAspectRatio="none"x="160"y="94"width="15"height="50"></image><imagexlink:href="./images/first-smbg.png"preserveAspectRatio="none"x="438"y="125"width="20"height="20"></image><ellipseid="c1"cx="293"cy="187"rx="8.106666666666667"ry="3.546666666666667"fill="rgba(0,0,0,0)"stroke="#ff0000"style="opacity: 0.493333"></ellipse><ellipseid="c2"cx="293"cy="187"rx="0"ry="0"fill="rgba(0,0,0,0)"stroke="#ff0000"style="opacity: 1"></ellipse><ellipseid="c3"cx="168"cy="143"rx="0"ry="0"fill="rgba(0,0,0,0)"stroke="#ff0000"style="opacity: 1"></ellipse><ellipseid="c4"cx="168"cy="143"rx="6.08"ry="2.5333333333333337"fill="rgba(0,0,0,0)"stroke="#ff0000"style="opacity: 0.493333"></ellipse></svg></div></body> </html>4、水球体+css3+js
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>*,*:before,*:after {box-sizing: border-box;outline: none;}body {background: #020438;font: 14px/1 "Open Sans", helvetica, sans-serif;}.box {height: 280px;width: 280px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #020438;border-radius: 100%;overflow: hidden;}.box .percent {position: absolute;left: 0;top: 0;z-index: 3;width: 100%;height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;display: -webkit-flex;align-items: center;justify-content: center;color: #fff;font-size: 64px;}.box .water {position: absolute;left: 0;top: 0;z-index: 2;width: 100%;height: 100%;transform: translate(0, 50%);background: #4d6de3;}.box .water_wave {width: 200%;position: absolute;bottom: 100%;}.box .water_wave_back {right: 0;fill: #c7eeff;animation: moveWaveBack 1.7s linear infinite;}.box .water_wave_front {left: 0;fill: #4d6de3;margin-bottom: -1px;animation: moveWaveFront 0.7s linear infinite;}@keyframes moveWaveBack{0%{transform: translateX(0);}100%{transform: translateX(50%);}}@keyframes moveWaveFront{0%{transform: translateX(0);}100%{transform: translateX(-50%);}}</style></head><body><div class="water-ball"><svgversion="1.1"xmlns="https://www.w3.org/2000/svg"xmlns:xlink="https://www.w3.org/1999/xlink"x="0px"y="0px"style="display: none"><!-- 定义可复用的 icon --><symbol id="wave"><pathd="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z"></path><pathd="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z"></path><pathd="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z"></path><pathd="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z"></path></symbol></svg><div class="box"><div class="percent"><div class="percentNum" id="count">0</div><div class="percentB">%</div></div><div id="water" class="water"><svg viewBox="0 0 560 20" class="water_wave water_wave_back"><use xlink:href="#wave"></use></svg><svg viewBox="0 0 560 20" class="water_wave water_wave_front"><use xlink:href="#wave"></use></svg></div></div></div><script>window.onload = function() {var countEL = document.getElementById('count')var waterEl = document.getElementById('water')var currentPercentage = 0;var targetPercentage = 70;var timeId = nulltimeId = setInterval(function(){currentPercentage++; // 170if(currentPercentage>= targetPercentage){clearInterval(timeId)}countEL.innerHTML = currentPercentageif(currentPercentage<=100){waterEl.style.transform = `translateY(${100 - currentPercentage }%)`}}, 60)}</script></body> </html>5、水球体+svg
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>*,*:before,*:after {box-sizing: border-box;outline: none;}body{/* background-color: black; */}</style></head><body><svgversion="1.1"xmlns="https://www.w3.org/2000/svg"xmlns:xlink="https://www.w3.org/1999/xlink"x="0px"y="0px"style="display: none"><!-- 定义可复用的 icon --><symbol id="wave"><pathd="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z"></path><pathd="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z"></path><pathd="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z"></path><pathd="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z"></path></symbol></svg><svg viewBox="0 0 560 20" class="water_wave water_wave_front"><use xlink:href="#wave"></use></svg></body> </html>6、调用svg文件的方法
<img src="xxx.svg" alt="">六、第三方动画库 snap
1、Snap.svg的初体验
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><script src="./libs/snap.svg-min.js"></script><script>window.onload = function() {// 1.创建一个svglet svg = Snap(300, 300)// svg.paper = svg// console.log(svg === svg.paper) // true// 2.在svg画布中绘制一个圆// let c = svg.circle(100, 100, 50)let c = svg.paper.circle(100, 100, 50)// 3.给圆添加一些属性c.attr({fill: 'blue'})// 拿到svg的元素的对象 // console.log(svg.node)// 4.将svg添加到body中document.body.appendChild(svg.node)}</script> </body> </html>2、Snap.svg操作SVG
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{background-image: url(../images/grid.png);}svg{background-color: rgba(255, 0, 0, 0.1);}</style></head> <body><svg id="hySvg" width="300" height="300" xmlns="http://www.w3.org/2000/svg" ><rect id="rectangle1" x="0" y="0" width="100" height="50"></rect></svg><script src="./libs/snap.svg-min.js"></script><script>window.onload = function() {let svg = Snap('#hySvg')let paper = svg.paper// 1.绘制一个矩形let rectangle = paper.rect(0, 100, 100, 50)rectangle.attr({fill: 'red'})// 2.选择一个矩形let rectangle1 = paper.select('#rectangle1')rectangle1.attr({fill: 'green'})}</script> </body> </html>3、Snap.svg动画的实现
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{background-image: url(../images/grid.png);}svg{background-color: rgba(255, 0, 0, 0.1);}</style></head> <body><svg id="hySvg" width="300" height="300" xmlns="http://www.w3.org/2000/svg" ><rect id="rectangle1" x="0" y="0" width="100" height="50"></rect></svg><script src="./libs/snap.svg-min.js"></script><script>window.onload = function() {let svg = Snap('#hySvg')let paper = svg.paper// 1.绘制一个矩形let rectangle = paper.rect(0, 100, 100, 50)rectangle.attr({fill: 'red'})// 2.选择一个矩形let rectangle1 = paper.select('#rectangle1')rectangle1.attr({fill: 'green'})// 3.动画的实现( requestAnimatationFrame 1s 61次)// Snap.animate(// 0, // from// 200, // to// function(val) {// console.log('val', val)// // 这里会回调 61 次, 会将0-200拆分成61份// rectangle1.attr({// x: val// })// },// 1000, // 毫秒 -> 1s// mina.linear,// function() {// console.log('动画结束了')// }// )Snap.animate([0, 0], // from x ,y [200, 200], // to x, yfunction(val) {console.log('val', val)// 这里会回调 61 次, 会将0-200拆分成61份rectangle1.attr({x: val[0],y: val[1]})},3000, // 毫秒 -> 1smina.easeout,function() {console.log('动画结束了')})}</script> </body> </html>4、鳄鱼+Snap-temp
七、第三方动画库 -gsap
1、gsap的初体验
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{background-image: url(../images/grid.png);}svg{background-color: rgba(255, 0, 0, 0.1);}</style></head> <body><svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" ><rect id="rectangle" x="0" y="0" width="100" height="50" fill="red"></rect></svg><!-- window.gsap = {}--><script src="./libs/gsap.min.js"></script><script>window.onload =function() {// selector( document.querySelectorAll() ) | domELgsap.to('#rectangle', {x: 200,duration: 2 // 秒})}</script> </body> </html>2、gsap补间动画---tween 点击后的事件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{background-image: url(../images/grid.png);}svg{background-color: rgba(255, 0, 0, 0.1);}</style></head> <body><svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" ><rect id="rectangle" x="100" y="100" width="100" height="100" fill="red"onclick="scaleRectangle()" ></rect></svg><!-- window.gsap = {}--><script src="./libs/gsap.min.js"></script><script>function scaleRectangle() {// 1.补间动画( 参数一也是支持数组的 )// gsap.to(['#rectangle'], {// scale: 0.5, // 1 - 0.5// duration: 1// })// gsap.from(['#rectangle'], {// scale: 0.3, // 0.3 - 1// duration: 1// })// gsap.fromTo(['#rectangle'], // {// scale: 0, // 0%// // duration: 4 // 0.5// },// {// scale: 1, // 100%// duration: 2, // 0.5// repeat:1,// })// gsap.to(['#rectangle'], {// scale: 0.5, // 1 - 0.5// duration: 1,// // transformOrigin: 'center' // 动画的原点// // transformOrigin: 'left' // 动画的原点// // transformOrigin: 'top' // 动画的原点// // transformOrigin: 'right' // 动画的原点// // transformOrigin: 'bottom' // 动画的原点// })gsap.to(['#rectangle'], {scale: 0.5, // 1 - 0.5duration: 1,transformOrigin: 'center', // 动画的原点ease: 'bounce.out' // power1.out})}</script> </body> </html>3、gsap动画时间线---delay 使用原始的delay实现按顺序执行
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{background-image: url(../images/grid.png);}svg{background-color: rgba(255, 0, 0, 0.1);}</style></head> <body><svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" ><rect id="rectangle1" x="0" y="0" width="50" height="50" fill="red" onclick="scaleRectangle()" ></rect><rect id="rectangle2" x="100" y="0" width="50" height="50" fill="red"></rect><rect id="rectangle3" x="200" y="0" width="50" height="50" fill="red"></rect></svg><!-- window.gsap = {}--><script src="./libs/gsap.min.js"></script><script>function scaleRectangle() {// 1 - 3gsap.to('#rectangle1', {scale: 0.5,duration: 1})gsap.to('#rectangle2', {scale: 0.5,duration: 1,delay: 1})gsap.to('#rectangle3', {scale: 0.5,duration: 1,delay: 2})}</script> </body> </html>4、gsap动画时间线---timeline 使用动画库的timeline方法
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body, ul{margin: 0;padding: 0;}body{background-image: url(../images/grid.png);}svg{background-color: rgba(255, 0, 0, 0.1);}</style></head> <body><svg width="300" height="300" xmlns="http://www.w3.org/2000/svg" ><rect id="rectangle1" x="0" y="0" width="50" height="50" fill="red" onclick="scaleRectangle()" ></rect><rect id="rectangle2" x="100" y="0" width="50" height="50" fill="red"></rect><rect id="rectangle3" x="200" y="0" width="50" height="50" fill="red"></rect></svg><!-- window.gsap = {}--><script src="./libs/gsap.min.js"></script><script>function scaleRectangle() {let timeline = gsap.timeline() // 动画时间线timeline.to(['#rectangle1', '#rectangle2'], {scale: 0.5,duration: 1})// .to('#rectangle2', {// scale: 0.5,// duration: 1,// }).to('#rectangle3', {scale: 0.5,duration: 1,})}</script> </body> </html>5、滑板车生成动画
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><!-- 滑板车 --><svgid="scooter"height="512"width="512"viewBox="0 0 512.004 512.004"xmlns="http://www.w3.org/2000/svg"><pathid="footer-block"d="m175.669 463.803c-8.283 0-15-6.716-15-15 0-53.743-43.723-97.467-97.467-97.467-14.622 0-28.673 3.153-41.762 9.371-7.483 3.555-16.432.371-19.986-7.112-3.555-7.482-.37-16.431 7.113-19.985 17.143-8.143 35.525-12.273 54.635-12.273 70.286 0 127.467 57.182 127.467 127.467 0 8.283-6.714 14.999-15 14.999z"fill="#c5e1e6"/><pathid="footboard2"d="m442.768 321.476c-63.027 2.945-113.414 51.086-120.563 112.327h-210.801c-8.285 0-15 6.716-15 15s6.715 15 15 15h224.932c8.285 0 15-6.716 15-15 0-52.162 40.777-94.928 92.832-97.36 8.275-.387 14.67-7.408 14.283-15.684-.387-8.275-7.402-14.684-15.683-14.283z"fill="#008adf"/><pathid="footboard1"d="m442.768 321.476c-63.027 2.945-113.414 51.086-120.563 112.327h-66.204v30h80.335c8.285 0 15-6.716 15-15 0-52.162 40.777-94.928 92.832-97.36 8.275-.387 14.67-7.408 14.283-15.684-.387-8.275-7.402-14.684-15.683-14.283z"fill="#0065a3"/><pathid="scooter-head"d="m448.787 415.604c-7.721 0-14.279-5.923-14.932-13.755l-28.796-345.572c-1.291-15.484-11.852-26.275-20.521-26.275-8.283 0-15-6.716-15-15s6.717-15 15-15c12.9 0 25.295 5.971 34.9 16.811 8.852 9.99 14.361 23.12 15.518 36.972l28.797 345.573c.688 8.256-5.447 15.506-13.703 16.194-.425.035-.847.052-1.263.052z"fill="#8db9c4"/><circle id="wheel4" cx="63.203" cy="448.803" fill="#c5e1e6" r="48.2" /><pathid="wheel3"d="m63.203 512.002c-34.848 0-63.199-28.351-63.199-63.199 0-34.849 28.352-63.199 63.199-63.199 34.85 0 63.201 28.35 63.201 63.199 0 34.848-28.352 63.199-63.201 63.199zm0-96.398c-18.306 0-33.199 14.893-33.199 33.199 0 18.307 14.894 33.199 33.199 33.199 18.307 0 33.201-14.893 33.201-33.199s-14.895-33.199-33.201-33.199z"fill="#1d4659"/><circle id="wheel2" cx="448.803" cy="448.803" fill="#8db9c4" r="48.2" /><g fill="#0e232c"><pathid="wheel1"d="m448.803 512.002c-34.848 0-63.199-28.351-63.199-63.199 0-34.849 28.352-63.199 63.199-63.199 34.85 0 63.201 28.35 63.201 63.199 0 34.848-28.352 63.199-63.201 63.199zm0-96.398c-18.307 0-33.199 14.893-33.199 33.199 0 18.307 14.893 33.199 33.199 33.199 18.307 0 33.201-14.893 33.201-33.199s-14.895-33.199-33.201-33.199z"/><pathid="head-block"d="m352.402.002c-8.283 0-15 6.716-15 15s6.717 15 15 15h32.135v-30h-32.135z"/></g></svg><script src="./libs/gsap.min.js"></script><script>window.onload = function() {let tl = gsap.timeline({repeat: -1, // 重复的次数// yoyo: true // 反向执行动画})// 1.给车轮做动画tl.from(['#wheel1', // begin= 0s'#wheel2', // 0.2'#wheel3', // 0.4'#wheel4' // 0.6], {scaleX: 0,scaleY: 0,duration: 1,transformOrigin: 'center',ease: 'bounce.out',stagger: 0.2}).from(["#footboard1","#footboard2"], {scaleX: 0,duration: 1,transformOrigin: 'left',ease: 'bounce.out',}).from(["#scooter-head"], {scaleY: 0,duration: 1,transformOrigin: 'bottom',ease: 'bounce.out',}).from(["#head-block","#footer-block"], {scaleX: 0,duration: 1,transformOrigin: 'right',ease: 'bounce.out',})}</script></body> </html>
数据可视化 SVG （二）相关推荐
- 学习笔记之数据可视化（二）—— 页面布局（下）
续上一章 2.7 地图区域(.map) 2.7.1 实现步骤: 2.8 用户统计模块 2.8.1 布局: 2.8.2 柱状图 2.9 订单模块 2.9.1 订单区域布局 2.9.2 订单区域(orde ...
- 学习笔记之数据可视化（二）——页面布局（中）
续上一章 2.6 监控区域布局 2.6.1 布局结构解析: 2.6.2 样式描述: 2.6.3 HTML结构及CSS样式代码 2.6.3 ### 监控区域-效果 2.6.7 点位区域(point) 2 ...
- 学习笔记之数据可视化（二）——页面布局（上）
~续上一章 2. 项目页面布局 2.1 基础布局 2.1.1 PC端屏幕宽度适配设置 2.1.2 主体容器viewport背景图片 2.1.3 HTML结构 2.1.4 css样式代码 2.2 边框图 ...
- 数据可视化记二基础学习(Highcharts、AntV、ECharts)
目录 一.Highcharts 1.1 Highcharts JS 1.2 Highstock JS 1.3 Highmaps JS 二.AntV 2.1 绘制流程 2.1.1 Antv G2 绘图流 ...
- 使用Matplotlib进行数据可视化（二）
前言 本篇为<使用Python进行数据分析>中介绍如何使用Matplotlib库进行数据可视化的第二篇,主要内容为如何绘制多子图,在图上添加文字和注释,如何自定义坐标轴刻度,设置自己的绘图 ...
- Python+Flask实现全国、全球疫情大数据可视化（二）：网页页面布局+echarts可视化中国地图、世界地图、柱状图和折线图
文章目录 相关文章 一.实现效果 二.页面布局html+css main.html main.css 三.echarts图表制作 1.全国累计趋势折线图ec_l1.js 2.全国趋势变化折线图ec_l ...
- Python数据可视化（二）：Pandas和Seanborn
要准备的数据文件 olympics.csv 链接:https://pan.baidu.com/s/1Iygq4Ssf_hf_U3jpBLXKvw 提取码:b0ye 复制这段内容后打开百度网盘手机App ...
- Python数据可视化案例二：动态更新数据
在开发与数据监测和数据可视化有关的系统时,我们会需要根据最新的数据对图形进行更新.下面的代码模拟了这种情况,单击Start按钮时会更新数据并重新绘制图形使得曲线看上去在移动一样,单击Stop按钮则停止 ...
- 数据可视化【二】HTML+CSS+SVG+D3
HTML.CSS和SVG学习实现代码:https://vizhub.com/Edward-Elric233/89185eb96bc64a9d81777873a0ccd0b9 index.html &l ...
最新文章
- 当你再面对大多数需求时能够说这些问题我以前做过，那你就。。。
- 优化SQL Server数据库查询方法
- 计算机网络基础与信息安全,大学计算机基础计算机网络基础与信息安全计算机网络概述教案.doc...
- C++学习笔记（草稿版）
- 如何在 C# 中使用 反射
- 信息安全工程师笔记-数据库安全
- ZooKeeper系列（四）
- 微服务 数据库耦合_mysql – 与其他服务共享的微服务数据库
- 几何深度深度学习的学习之路
- 创建一棵二叉树（C++）以及遍历
- Linux 下载工具推荐: Motrix qbittorrent
- 高德地图报Native method not found: com.autonavi.amap.mapcore.MapCore.nativeNewInstance:
- CnPack常用的功能，太方便了！
- 针对校园LAN的OpenFlow和软件定义网络
- matlab中min()函数,matlab基本函数min
- Linux 下文件和目录的特点
- 黑马程序员————小牛皮糖学习笔记————IO流之未使用缓冲区读写文件
- 51cto python数据分析系列课程 55g_Python 3 数据分析与挖掘系列课程完整版
- 期货的暴富逻辑是什么？
- c语言区间内质数和合数各自输出