svg实现loading图
来源：互联网 发布：java输出unicode字符 编辑：程序博客网 时间：2024/06/07 20:08
本文主要针对我工作遇到的问题，类似于笔记。
首先想要实现svg的动画要首先了解svg中的两个属性：stroke-dasharray；stroke-dashoffset；
stroke-dasharray：就是虚线属性，可以写多个值；
stroke-dashoffset：可以理解为空隙；
注：stroke-dashoffset的值可以为负数；
根据UI给的SVG格式的文件：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 51 47.03"> <defs> <style> .cls-1,.cls-2,.cls-3{ fill:none; stroke:#3eb2de; stroke-linejoin:round; } .cls-1,.cls-2{ stroke-linecap:round; } .cls-1{ stroke-width:2px; } .cls-2,.cls-3{ stroke-width:3px; } .cls-4{ clip-path:url(#clip-path); } .cls-g{ stroke:#ccc } </style> <clipPath id="clip-path"> <ellipse class="cls-1" cx="12.69" cy="27.26" rx="1" ry="1.01"/> </clipPath> </defs> <title>loading-2</title> <g id="layer_2" data-name="layer 2"> <g id="layer_1-2" data-name="layer 1"> <path class="cls-2 cls-g" d="M34.59,20.39l5-4.2a6,6,0,0,1,7.69,9.17l-4.81,4,4.81,3.89a6,6,0,0,1-7.53,9.3l-6-4.9c-3.54,4.53-9.3,7.83-15.12,7.83-9.39,0-17.09-8.6-17.09-17.1s7.7-17.1,17.09-17.1C24.92,11.33,31.18,15.24,34.59,20.39Z"/> <path class="cls-3 cls-g" d="M21.84,6.65A6.19,6.19,0,1,1,34,8.8,6.12,6.12,0,0,1,33,11.33"/> <g class="cls-4"> <rect class="cls-1" x="5.41" y="19.97" width="14.57" height="14.58"/> </g> <ellipse class="cls-1 cls-g" cx="12.69" cy="27.26" rx="1" ry="1.01"/> </g> </g> <defs> <clipPath id="clip-path"> <ellipse class="cls-1" cx="12.69" cy="27.26" rx="1" ry="1.01"/> </clipPath> </defs> <title>loading-2</title> <g id="layer_2" data-name="layer 2"> <g id="layer_1-2" data-name="layer 1"> <path class="cls-2 cls-2-a" d="M34.59,20.39l5-4.2a6,6,0,0,1,7.69,9.17l-4.81,4,4.81,3.89a6,6,0,0,1-7.53,9.3l-6-4.9c-3.54,4.53-9.3,7.83-15.12,7.83-9.39,0-17.09-8.6-17.09-17.1s7.7-17.1,17.09-17.1C24.92,11.33,31.18,15.24,34.59,20.39Z"/> <path class="cls-3 cls-3-a" d="M21.84,6.65A6.19,6.19,0,1,1,34,8.8,6.12,6.12,0,0,1,33,11.33"/> <g class="cls-4"><rect class="cls-1" x="5.41" y="19.97" width="14.57" height="14.58"/></g><ellipse class="cls-1 cls-1-a" cx="12.69" cy="27.26" rx="1" ry="1.01"/> </g> </g> </svg>然后给了我效果图
主要过程呢分为三段，一个是鱼鳍，鱼眼睛，鱼身子，通过改变上述两个的值从而实现，但是过程中因为不知道stroke-dashoffset的值可以为负数所以导致效果是反的。这点要注意。
最后的实现效果加上兼容。
<style> .cls-1-a{ stroke-dasharray:7 7; stroke-dashoffset:-7; animation: lineMoveCls1 1.64s ease-in-out infinite; } .cls-2-a{ stroke-dasharray:153 153; stroke-dashoffset:-153; animation: lineMoveCls2 1.64s ease-in-out infinite; } .cls-3-a{ stroke-dasharray:23 23; stroke-dashoffset:-23; animation: lineMoveCls3 1.64s ease-in-out infinite; } .loading-svg-fish{ position: relative; width: 1.36rem; height: 1.24rem; } .fishpond-index{ height: 100vh; display:flex; display:-webkit-flex; display:-moz-flex; display:-o-flex; align-items: center; -webkit-align-items: center; -moz-align-items: center; -o-align-items: center; -webkit-justify-content: center; -moz-justify-content: center; -o-justify-content: center; justify-content: center; flex-direction: column; -webkit-flex-direction: column; -moz-flex-direction: column; -o-flex-direction: column; } .loading-write-fish{ font-size:0.52rem ; color: #ccc; margin-top: 0.48rem; } svg{ position: absolute; left: 0; top: 0; width: 1.36rem; height: 1.24rem; } .cls-1,.cls-2,.cls-3{ fill:none; stroke:#3eb2de; stroke-linejoin:round; } .cls-1,.cls-2{ stroke-linecap:round; } .cls-1{ stroke-width:2px; } .cls-2,.cls-3{ stroke-width:3px; } .cls-4{ clip-path:url(#clip-path); } .cls-g{ stroke:#ccc } @keyframes lineMoveCls1 { 0%{ stroke-dashoffset:-7 ; } 10%{ stroke-dashoffset:0 ; } 20%{ stroke-dashoffset:0 ; } 30%{ stroke-dashoffset:0 ; } 40%{ stroke-dashoffset:0 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:7 ; } 70%{ stroke-dashoffset: 7; } 80%{ stroke-dashoffset:7 ; } 90%{ stroke-dashoffset:7 ; } 100%{ stroke-dashoffset: 7; } } @-webkit-keyframes lineMoveCls1 { 0%{ stroke-dashoffset:-7 ; } 10%{ stroke-dashoffset:0 ; } 20%{ stroke-dashoffset:0 ; } 30%{ stroke-dashoffset:0 ; } 40%{ stroke-dashoffset:0 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:7 ; } 70%{ stroke-dashoffset: 7; } 80%{ stroke-dashoffset:7 ; } 90%{ stroke-dashoffset:7 ; } 100%{ stroke-dashoffset: 7; } } @-moz-keyframes lineMoveCls1 { 0%{ stroke-dashoffset:-7 ; } 10%{ stroke-dashoffset:0 ; } 20%{ stroke-dashoffset:0 ; } 30%{ stroke-dashoffset:0 ; } 40%{ stroke-dashoffset:0 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:7 ; } 70%{ stroke-dashoffset: 7; } 80%{ stroke-dashoffset:7 ; } 90%{ stroke-dashoffset:7 ; } 100%{ stroke-dashoffset: 7; } } @-o-keyframes lineMoveCls1 { 0%{ stroke-dashoffset:-7 ; } 10%{ stroke-dashoffset:0 ; } 20%{ stroke-dashoffset:0 ; } 30%{ stroke-dashoffset:0 ; } 40%{ stroke-dashoffset:0 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:7 ; } 70%{ stroke-dashoffset: 7; } 80%{ stroke-dashoffset:7 ; } 90%{ stroke-dashoffset:7 ; } 100%{ stroke-dashoffset: 7; } } @keyframes lineMoveCls3 { 0%{ stroke-dashoffset:-23 ; } 10%{ stroke-dashoffset:-23 ; } 20%{ stroke-dashoffset:0 ; } 30%{ stroke-dashoffset:0 ; } 40%{ stroke-dashoffset:0 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:0 ; } 70%{ stroke-dashoffset: 23; } 80%{ stroke-dashoffset:23 ; } 90%{ stroke-dashoffset:23 ; } 100%{ stroke-dashoffset: 23; } } @-webkit-keyframes lineMoveCls3 { 0%{ stroke-dashoffset:-23 ; } 10%{ stroke-dashoffset:-23 ; } 20%{ stroke-dashoffset:0 ; } 30%{ stroke-dashoffset:0 ; } 40%{ stroke-dashoffset:0 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:0 ; } 70%{ stroke-dashoffset: 23; } 80%{ stroke-dashoffset:23 ; } 90%{ stroke-dashoffset:23 ; } 100%{ stroke-dashoffset: 23; } } @-moz-keyframes lineMoveCls3 { 0%{ stroke-dashoffset:-23 ; } 10%{ stroke-dashoffset:-23 ; } 20%{ stroke-dashoffset:0 ; } 30%{ stroke-dashoffset:0 ; } 40%{ stroke-dashoffset:0 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:0 ; } 70%{ stroke-dashoffset: 23; } 80%{ stroke-dashoffset:23 ; } 90%{ stroke-dashoffset:23 ; } 100%{ stroke-dashoffset: 23; } } @-o-keyframes lineMoveCls3 { 0%{ stroke-dashoffset:-23 ; } 10%{ stroke-dashoffset:-23 ; } 20%{ stroke-dashoffset:0 ; } 30%{ stroke-dashoffset:0 ; } 40%{ stroke-dashoffset:0 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:0 ; } 70%{ stroke-dashoffset: 23; } 80%{ stroke-dashoffset:23 ; } 90%{ stroke-dashoffset:23 ; } 100%{ stroke-dashoffset: 23; } } @keyframes lineMoveCls2 { 0%{ stroke-dashoffset:-153 ; } 10%{ stroke-dashoffset:-153 ; } 20%{ stroke-dashoffset:-153 ; } 30%{ stroke-dashoffset:-102 ; } 40%{ stroke-dashoffset:-51 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:0 ; } 70%{ stroke-dashoffset: 0; } 80%{ stroke-dashoffset:51 ; } 90%{ stroke-dashoffset:102 ; } 100%{ stroke-dashoffset: 153; } } @-webkit-keyframes lineMoveCls2 { 0%{ stroke-dashoffset:-153 ; } 10%{ stroke-dashoffset:-153 ; } 20%{ stroke-dashoffset:-153 ; } 30%{ stroke-dashoffset:-102 ; } 40%{ stroke-dashoffset:-51 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:0 ; } 70%{ stroke-dashoffset: 0; } 80%{ stroke-dashoffset:51 ; } 90%{ stroke-dashoffset:102 ; } 100%{ stroke-dashoffset: 153; } } @-moz-keyframes lineMoveCls2 { 0%{ stroke-dashoffset:-153 ; } 10%{ stroke-dashoffset:-153 ; } 20%{ stroke-dashoffset:-153 ; } 30%{ stroke-dashoffset:-102 ; } 40%{ stroke-dashoffset:-51 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:0 ; } 70%{ stroke-dashoffset: 0; } 80%{ stroke-dashoffset:51 ; } 90%{ stroke-dashoffset:102 ; } 100%{ stroke-dashoffset: 153; } } @-o-keyframes lineMoveCls2 { 0%{ stroke-dashoffset:-153 ; } 10%{ stroke-dashoffset:-153 ; } 20%{ stroke-dashoffset:-153 ; } 30%{ stroke-dashoffset:-102 ; } 40%{ stroke-dashoffset:-51 ; } 50%{ stroke-dashoffset:0 ; } 60%{ stroke-dashoffset:0 ; } 70%{ stroke-dashoffset: 0; } 80%{ stroke-dashoffset:51 ; } 90%{ stroke-dashoffset:102 ; } 100%{ stroke-dashoffset: 153; } } </style><div class="fish-loading"> <div class="loading-svg-fish"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 51 47.03"> <defs> <style> .cls-1,.cls-2,.cls-3{ fill:none; stroke:#3eb2de; stroke-linejoin:round; } .cls-1,.cls-2{ stroke-linecap:round; } .cls-1{ stroke-width:2px; } .cls-2,.cls-3{ stroke-width:3px; } .cls-4{ clip-path:url(#clip-path); } .cls-g{ stroke:#ccc } </style> <clipPath id="clip-path"> <ellipse class="cls-1" cx="12.69" cy="27.26" rx="1" ry="1.01"/> </clipPath> </defs> <title>loading-2</title> <g id="layer_2" data-name="layer 2"> <g id="layer_1-2" data-name="layer 1"> <path class="cls-2 cls-g" d="M34.59,20.39l5-4.2a6,6,0,0,1,7.69,9.17l-4.81,4,4.81,3.89a6,6,0,0,1-7.53,9.3l-6-4.9c-3.54,4.53-9.3,7.83-15.12,7.83-9.39,0-17.09-8.6-17.09-17.1s7.7-17.1,17.09-17.1C24.92,11.33,31.18,15.24,34.59,20.39Z"/> <path class="cls-3 cls-g" d="M21.84,6.65A6.19,6.19,0,1,1,34,8.8,6.12,6.12,0,0,1,33,11.33"/> <g class="cls-4"> <rect class="cls-1" x="5.41" y="19.97" width="14.57" height="14.58"/> </g> <ellipse class="cls-1 cls-g" cx="12.69" cy="27.26" rx="1" ry="1.01"/> </g> </g> <defs> <clipPath id="clip-path"> <ellipse class="cls-1" cx="12.69" cy="27.26" rx="1" ry="1.01"/> </clipPath> </defs> <title>loading-2</title> <g id="layer_2" data-name="layer 2"> <g id="layer_1-2" data-name="layer 1"> <path class="cls-2 cls-2-a" d="M34.59,20.39l5-4.2a6,6,0,0,1,7.69,9.17l-4.81,4,4.81,3.89a6,6,0,0,1-7.53,9.3l-6-4.9c-3.54,4.53-9.3,7.83-15.12,7.83-9.39,0-17.09-8.6-17.09-17.1s7.7-17.1,17.09-17.1C24.92,11.33,31.18,15.24,34.59,20.39Z"/> <path class="cls-3 cls-3-a" d="M21.84,6.65A6.19,6.19,0,1,1,34,8.8,6.12,6.12,0,0,1,33,11.33"/> <g class="cls-4"><rect class="cls-1" x="5.41" y="19.97" width="14.57" height="14.58"/></g><ellipse class="cls-1 cls-1-a" cx="12.69" cy="27.26" rx="1" ry="1.01"/> </g> </g> </svg> </div> <div class="loading-write-fish"> loading </div></div>阅读全文
0 0
- svg实现loading图
- 使用SVG实现圆环loading进度效果
- css3 loading（SVG loading）
- SVG实现圆环loading进度效果实例页面
- 一个基于svg的圆形loading动画
- SVG椭圆的实现
- JS实现SVG图形
- SVG实现攻击效果
- svg实现we动画
- 12种炫酷html5 svg加载loading动画特效
- 基于GSAP的SVG Loading加载动画特效
- 按钮特效 基于SVG和Segment.js的Loading加载
- 用d3.js实现基于SVG的线形图
- js 实现loading效果
- Iphone实现Loading效果
- Loading waiting 实现方式
- jquery实现loading...提示
- Loading waiting 实现方式
- dubbo 管理控制台 的安装 dubbo-admin
- Android 实现侧滑菜单
- 论文阅读：Iccv 2013 Hidden Factor Analysis for Age Invariant Face Recognition
- iOS之UIWebView无法获取web标题
- sql语句优化
- svg实现loading图
- REST，Web 服务，REST-ful 服务
- 剑指offer-平衡二叉树
- Proxychains + ss 代理ubuntu终端
- Egret学习
- variable
- java-CollectDemo
- RDS SQL Server
- 面试题之大富翁问题
