vue项目实战之圆柱状水波效果实现
更新时间：2022年12月21日 08:23:36 作者：coderSlow
最近工作中实现的一个效果不错,分享给大家,下面这篇文章主要给大家介绍了关于vue项目实战之圆柱状水波效果实现的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
1、先在data中定义有关参数和引入数据请求接口
1、字data中定义需要用到的参数
specialList: [
{ value: 0, height: 0, markKey: '' },
{ value: 0, height: 0, markKey: '' },
{ value: 0, height: 0, markKey: '' },
{ value: 0, height: 0, markKey: '' }
]2、引入数据请求接口
import { getMarks } from '@/api/businessOpetation'
2、再进行真实数据的获取
created() {
getMarks(22).then((res) => {
console.log(res)
if (res.code === 200) {
res.data.result.forEach((item, index) => {
const value = JSON.parse(item.markValue).value || 0
const height = 126 - 126 * (1 - value * 0.01)
const obj = {}
obj.markKey = item.markKey
obj.value = value
obj.height = height
this.$set(this.specialList, index, obj)
})
}
})
},3、核心代码（主要是html和CSS代码）
HTML代码：
<div class="box1">
<div
class="box1-item"
v-for="(item, index) in specialList"
:key="index">
<div class="img-box">
<div class="lui-column-bg">
<img
:src="require('@/assets/images/business/cylinder_bg.png')"
alt=""/>
<span class="item-value" :style="{ opacity: item.value }">{{
item.value
}}</span>
<div
class="lui-inner"
:class="['lui-inner' + index]"
:style="{ height: (item.height || 0) + 'px' }">
<div
v-show="item.height > 0 && item.height < 142"
class="gif-box"
:class="[`gif-box${index}`]"
></div>
</div>
</div>
</div>
<span class="box1-adderss" :class="[`box1-adderss${index}`]">{{
item.markKey
}}</span>
</div>
</div>CSS代码块：
.box1 {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
padding: 34px 45px 6px 45px;
justify-content: space-between;
box-sizing: border-box;
.box1-item {
width: 140px;
height: 217px;
position: relative;
display: flex;
justify-content: center;
.box1-adderss0 {
background: url('@/assets/images/business/cylinder_b_1.png') no-repeat
100% 100%;
}
.box1-adderss1 {
background: url('@/assets/images/business/cylinder_b_2.png') no-repeat
100% 100%;
}
.box1-adderss2 {
background: url('@/assets/images/business/cylinder_b_3.png') no-repeat
100% 100%;
}
.box1-adderss3 {
background: url('@/assets/images/business/cylinder_b_4.png') no-repeat
100% 100%;
}
.box1-adderss0::before {
background: url('@/assets/images/business/cylinder_border_1.png')
no-repeat 100% 100%;
}
.box1-adderss1::before {
background: url('@/assets/images/business/cylinder_border_2.png')
no-repeat 100% 100%;
}
.box1-adderss2::before {
background: url('@/assets/images/business/cylinder_border_3.png')
no-repeat 100% 100%;
}
.box1-adderss3::before {
background: url('@/assets/images/business/cylinder_border_4.png')
no-repeat 100% 100%;
}
.box1-adderss::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: -2.5px;
bottom: -1.5px;
background-size: cover;
}
.box1-adderss {
position: absolute;
bottom: 0;
text-align: center;
font-size: 14px;
font-weight: 400;
color: #ffffff;
line-height: 35px;
width: 100%;
background-size: cover;
height: 35px;
}
.img-box {
width: 110px;
height: 163px;
position: relative;
z-index: 99;
.lui-column-bg {
position: relative;
z-index: 55;
width: 100%;
height: 100%;
width: 110px;
height: 163px;
img {
width: 100%;
height: 100%;
}
.item-value {
position: absolute;
left: 50%;
top: 48px;
z-index: 100;
transform: translateX(-50%);
font-size: 33px;
color: #fff0d1;
transition: opacity 2s ease-in;
}
}
.lui-inner0 {
background: linear-gradient(
90deg,
rgba(62, 171, 241, 0.67) 0%,
rgba(62, 171, 241) 22%,
rgba(62, 171, 241) 78%,
rgba(62, 171, 241, 0) 100%
);
}
.lui-inner1 {
background: linear-gradient(
90deg,
rgba(162, 138, 58, 0.8) 0%,
rgba(162, 138, 58) 25%,
rgba(162, 138, 58) 78%,
rgba(162, 138, 58, 0) 100%
);
}
.lui-inner2 {
background: linear-gradient(
90deg,
rgba(77, 181, 120, 0.67) 0%,
rgba(77, 181, 120) 22%,
rgba(77, 181, 120) 78%,
rgba(77, 181, 120, 0) 100%
);
}
.lui-inner3 {
background: linear-gradient(
90deg,
rgb(81,98,154) 0%,
rgba(93, 79, 139) 25%,
rgba(93, 79, 139) 78%,
rgb(52,86,132) 100%
);
}
.lui-inner {
position: absolute;
z-index: 15;
bottom: 14px;
width: 100%;
transition: height 2s ease-in;
text-align: center;
.gif-box0 {
background: url('@/assets/images/business/water.gif') no-repeat 100%
100%;
}
.gif-box1 {
background: url('@/assets/images/business/water_2.gif') no-repeat
100% 100%;
}
.gif-box2 {
background: url('@/assets/images/business/water2.gif') no-repeat
100% 100%;
}
.gif-box3 {
background: url('@/assets/images/business/water3.gif') no-repeat
100% 100%;
}
.gif-box {
position: absolute;
z-index: 9;
top: -14.5px;
width: 100%;
height: 16.5px;
background-size: cover;
}
}
.lui-inner:after {
position: absolute;
z-index: 5;
content: '';
display: block;
height: 15px;
width: 100%;
border-radius: 50%;
background: #788092;
background: #204070;
bottom: -10px;
opacity: 1;
}
}
}
}4、需要的图片素材
需要用到9张png图片和4张gif图
5、最终效果
说明：图片截的是静态图片，现实柱状图是有水波的
总结
到此这篇关于vue项目实战之圆柱状水波效果实现的文章就介绍到这了,更多相关vue圆柱状水波效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要为大家介绍了defineProperty和Proxy基础功能及性能对比，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
最近在工作中碰到一个问题,后端提供的get请求的接口需要在request header设置,下面这篇文章主要给大家介绍了关于axios配置请求头content-type的相关资料,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了解决Vue2.x父组件与子组件之间的双向绑定问题,需要的朋友可以参考下2018-03-03
Element el-table的formatter和scope template不能同时存在问题解决办法
本文主要介绍了ElementUI el-table 的 formatter 和 scope template 不能同时存在问题解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了vuex的使用步骤，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-01-01
这篇文章主要介绍了Vue3项目中引用TS语法的实例讲解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
Vue 动态组件components和v-once指令的实现
这篇文章主要介绍了Vue 动态组件components和v-once指令的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
我们在平时上网的时候会看到有些图片是加水印的,一般水印往往是后端来做的,不过有些站点要保护的知识产权类型比较多,不光是图片,可能还有视频或者文字,所以我们水印的作用,就是给他做一个适当的限制,本文就给大家介绍一下如何使用Vue实现防篡改的水印2023-08-08
vue中如何给el-table-column添加指定列的点击事件
elementui中提供了点击行处理事件,下面这篇文章主要给大家介绍了关于vue中如何给el-table-column添加指定列的点击事件,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-11-11
sass是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。这篇文章主要介绍了在vue项目中使用sass语法,需要的朋友可以参考下2019-07-07
最新评论