SVG 画出动态线条流动效果
2024-04-26 07:36:38
版權聲明: 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
最近做了一个项目 UI图长这样
中间的线条没有gif 需要用代码画出来
尝试了很多种方法 最终选择了用svg画
下面是全部的代码
<template><div class="right-page"><Subtitles :hanzi="title.zh" :yingyu="title.en" class="title"></Subtitles><div class="tab-box"><divclass="tab-item"v-for="(item, index) in TabList":key="index":class="{ active: currentIndex === index }"@click.stop="activeClick(index)">{{ item }}</div></div><imgsrc="../img/leftbtn.png"alt=""class="leftBtn"@click.stop="leftBtnClick"/><imgsrc="../img/leftbtn.png"alt=""class="rightBtn"@click.stop="rightBtnClick"/><img src="../img/xiamtu.png" alt="" class="tab-content" /><!-- 4条svg 线条 --><div class="container"><div class="line-wrap"><!-- 111 --><svgversion="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"xml:space="preserve"class="circle-load-rect-svg"viewbox="0 0 600 400"><polyline:points="svgData[currentIndex][0]"fill="none"class="g-rect-path"stroke="#007084"/><polyline:points="svgData[currentIndex][0]"fill="none"class="g-rect-fill"stroke="#00e9f9"/></svg><!-- 222 --><svgversion="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"xml:space="preserve"class="circle-load-rect-svg"viewbox="0 0 600 400"><polyline:points="svgData[currentIndex][1]"fill="none"class="g-rect-path"stroke="#805c2c"/><polyline:points="svgData[currentIndex][1]"fill="none"class="g-rect-fill"stroke="#feee3c"/></svg><!-- 333 --><svgversion="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"xml:space="preserve"class="circle-load-rect-svg"viewbox="0 0 600 400"><polyline:points="svgData[currentIndex][2]"fill="none"class="g-rect-path"stroke="#19875c"/><polyline:points="svgData[currentIndex][2]"fill="none"class="g-rect-fill"stroke="#3aeca1"/></svg><!-- 444 --><svgversion="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"xml:space="preserve"class="circle-load-rect-svg"viewbox="0 0 600 400"><polyline:points="svgData[currentIndex][3]"fill="none"class="g-rect-path"stroke="#18808e"/><polyline:points="svgData[currentIndex][3]"fill="none"class="g-rect-fill"stroke="#36f4fb"/></svg></div></div><span class="bottom-title">信息机房应用成效</span></div>
</template><script>
import Subtitles from '../../../publicoComponents/Subtitles.vue'export default {props: {},data () {return {title: {zh: '信息机房应用成效',en: 'Application effectiveness of information room'},TabList: ['联通互通', '云边协作', '数字可视化', '系统对接'],currentIndex: 0,svgData: [['200,0 200,30 930,30 930,97', '180,0 180,50 753,50 753,97', '160,0 160,70 580,70 580,97', '140,0 140,90 405,90 405,96'],['530,0 530,30 930,30 930,97', '510,0 510,50 753,50 753,97', '490,0 490,70 580,70 580,97', '470,0 470,90 405,90 405,96'],['860,0 860,97 930,97 930,97', '840,0 840,50 840,97 753,97', '820,0 820,83 580,83 580,97', '800,0 800,70 405,70 405,96'],['1190,0 1190,97 930,97 930,97', '1170,0 1170,83 753,83 753,97', '1150,0 1150,70 580,70 580,97', '1130,0 1130,58 405,58 405,96']]}},computed: {},mounted () {},methods: {activeClick (index) {this.currentIndex = index},leftBtnClick () {if (this.currentIndex === 0) {this.currentIndex = 3return}this.currentIndex--},rightBtnClick () {if (this.currentIndex === 3) {this.currentIndex = 0return}this.currentIndex++}},components: {Subtitles}
}
</script><style scoped lang="less">
.right-page {height: 100%;background-image: url("../img/dizuo.png");background-repeat: no-repeat;background-position: 50% 90%;position: relative;
}
.title {padding-top: 30px;
}
.tab-box {display: flex;width: 1320px;margin: 0 auto;padding-top: 80px;.tab-item {background-image: url("../img/3hdfa.png");background-repeat: no-repeat;background-position: center;width: 224px;margin: 0 auto;height: 164px;line-height: 122px;text-align: center;color: #fff;font-size: 24px;font-family: MicrosoftYaHei;opacity: 0.6;}.active {opacity: 1;}
}
.leftBtn {position: absolute;top: 19.5%;left: 13%;
}
.rightBtn {position: absolute;transform: rotate(180deg);top: 19.5%;left: 84%;
}
.tab-content {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -46%);
}
.container {width: 100%;margin-top: -20px;
}
.line-wrap {width: 1350px;margin: 0 auto;position: relative;
}
.line-wrap svg:nth-child(2) {position: absolute;top: 0;
}
.line-wrap svg:nth-child(3) {position: absolute;top: 0;
}
.line-wrap svg:nth-child(4) {position: absolute;top: 0;
}
.circle-load-rect-svg {width: 1350px;margin: 10px;
}.g-rect-path {fill: none;stroke-width: 3;stroke-linejoin: round;stroke-linecap: round;
}.g-rect-fill {fill: none;stroke-width: 5;stroke-linejoin: round;stroke-linecap: round;stroke-dasharray: 3, 900;stroke-dashoffset: -100;animation: lineMove 3s cubic-bezier(0, 0, 0.74, 0.74) infinite;
}@keyframes lineMove {0% {stroke-dashoffset: -850;}100% {stroke-dashoffset: -0;}
}
.bottom-title {position: absolute;bottom: 30%;width: 100%;font-size: 36px;font-family: Microsoft YaHei;font-weight: bold;color: #38dcff;text-align: center;line-height: 38px;background: linear-gradient(0deg, #2de9ff 0.146484375%, #2fa9ff 99.31640625%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;
}
</style>SVG 画出动态线条流动效果相关推荐
- python画拓扑图权值是线条粗细_拓扑图线条流动效果
图论中边是重要元素,它连接各个顶点构成拓扑图,有向图中,边具有方向性,在画布中表现为箭头,在实际应用中,边可以代表链路,链路上不只是有方向,还有流量,信号种类等信息,光用箭头表现力就不够了,可增加线条 ...
- fh 幅频特性曲线怎么画fl_初学者怎么练习线条？教你如何画出流畅线条的技巧...
初学者怎么练习线条?怎样才能画出流畅线条?画出流畅线条有哪些技巧?想必这些问题都是绘画初学者们比较伤脑筋的问题,那么到底怎样才能画出流畅线条呢?今天灵猫课堂老师就在网络上收集整理了关于初学者怎么练习线 ...
- [html] 使用svg画出一个矩形
[html] 使用svg画出一个矩形 <svg width="400" height="200" viewbox="0 0 2000 1000& ...
- 教你用SVG画出一条龙
先看demo,九十七度 其实使用svg画出这条龙很简单,关键不在于怎么使用svg,而在于你的美术功底,哈哈. 好吧,当然基础是不能忽略的,先看下这条龙的代码: 对的,其实画龙只需要svg 路径path ...
- html5画布画出折线图,canvas 画出动态折线图
canvas 是 html5 支持的一个标签,用于图形的绘制.canvas 标签仅仅提供了图形的容器,必须通过 js 脚本来绘制. 比如,绘制一个简单的矩形: 矩形.png var c=documen ...
- matlab 渲染效果,如何用Matlab快速画出带有3D渲染效果的复杂曲面
Matlab是一个很常用的理工科数学软件,我们平常会用它来画一些平面函数或者简单的曲线或者简单的3D平面图,但是通常很少用到它的稍微高级一点的画图功能.这里介绍一些高级渲染功能和画图技巧,先看结果. ...
- html显示线条流动效果,css3实现线条流动效果
1实现原理: 通过animation中的clip实现对div的不断切割 首先要弄懂clip的含义,四个参数分别是上右下左,以上和左为标准. clip使用的前提是元素绝对定位. 本来想实现这样效果看起来 ...
- css 霓虹灯转动效果,使用SVG + CSS实现动态霓虹灯文字效果
早上无意间进入一个网站,看到他们的LOGO效果略屌,如图: 刚开始以为是gif动画之类的,审查元素发现居然是用SVG + CSS3动画实现的,顿时激起了我的(hao)欲(qi)望(xin),决定要一探 ...
- 用C语言画出动态的图片,Qt通过图片组绘制动态图片
本文实例为大家分享了Qt通过图片组绘制动态图片的具体代码,供大家参考,具体内容如下 任务实现: 通过定时器的使用来依次调用资源文件中的静态图片文件,从而达到是图片中内容动起来的效果: 效果实现: 实现 ...
最新文章
- mysql5.7与8.0用那个_MySQL 5.7 vs 8.0，哪个性能更牛？
- 当下流行的分布式文件系统大阅兵
- jquery 学习之一 对象访问
- 安裝jpeg-6b png error错误解决方法
- VisualSVNServerTools(在线修改VisualSVN密码)
- C++ STL set集合的使用
- LWIP的UDP相关API
- 浅析RTB和RTA（二）
- 灵动标签调用文章每隔3条样式不同
- 说说设计模式~桥梁模式(Bridge)
- 如何保证API接口数据安全？
- Tomcat Session管理分析
- GD32 startup.s
- FFmpeg 图片转TS
- 【樽海鞘算法】基于樽海鞘算法求解多目标问题附matlab代码
- Excel学习笔记：P18-COUNTIFS函数与SUMIFS函数
- Chrome插件安装的3种方法，解决拖放不能安装的情况，并提供插件下载
- 模拟手机预览（非F12）
- centos7中英文切换
- Window.clearTimeout() 方法取消由 setTimeout() 方法设置的 timeout