vue項(xiàng)目實(shí)戰(zhàn)之圓柱狀水波效果實(shí)現(xiàn)

更新時(shí)間：2022年12月21日 08:23:36 作者：coderSlow

最近工作中實(shí)現(xiàn)的一個(gè)效果不錯(cuò),分享給大家,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)戰(zhàn)之圓柱狀水波效果實(shí)現(xiàn)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1、先在data中定義有關(guān)參數(shù)和引入數(shù)據(jù)請(qǐng)求接口

1、字data中定義需要用到的參數(shù)

specialList: [
    { value: 0, height: 0, markKey: '' },
    { value: 0, height: 0, markKey: '' },
    { value: 0, height: 0, markKey: '' },
    { value: 0, height: 0, markKey: '' }
]

2、引入數(shù)據(jù)請(qǐng)求接口

import { getMarks } from '@/api/businessOpetation'

2、再進(jìn)行真實(shí)數(shù)據(jù)的獲取

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、最終效果

說明：圖片截的是靜態(tài)圖片，現(xiàn)實(shí)柱狀圖是有水波的

總結(jié)

到此這篇關(guān)于vue項(xiàng)目實(shí)戰(zhàn)之圓柱狀水波效果實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue圓柱狀水波效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: