vue项目实战之圆柱状水波效果实现

最近工作中实现的一个效果不错,分享给大家,下面这篇文章主要给大家介绍了关于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代码：

    {{ item.value }} 
{{ item.markKey }}

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-600') no-repeat 100% 100%; } .box1-adderss1 { background: url('@/assets/images/business/cylinder_b_2.png-600') no-repeat 100% 100%; } .box1-adderss2 { background: url('@/assets/images/business/cylinder_b_3.png-600') no-repeat 100% 100%; } .box1-adderss3 { background: url('@/assets/images/business/cylinder_b_4.png-600') no-repeat 100% 100%; } .box1-adderss0::before { background: url('@/assets/images/business/cylinder_border_1.png-600') no-repeat 100% 100%; } .box1-adderss1::before { background: url('@/assets/images/business/cylinder_border_2.png-600') no-repeat 100% 100%; } .box1-adderss2::before { background: url('@/assets/images/business/cylinder_border_3.png-600') no-repeat 100% 100%; } .box1-adderss3::before { background: url('@/assets/images/business/cylinder_border_4.png-600') 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; } } } }