用vue实现手风琴字体渐变效果

在这里插入图片描述

<template>
 <div id="all-box">
      <div v-for="(item,index) in dataLists" :class="['c-item-'+index,currsorIndex==index?'c-item-hover':'']"
        @mouseover="mouseOver(index)" :key="index">
        <div v-show="currsorIndex!=index" class="title-box">{{item.title}}</div>
        <div class="currsor-content-box">
          <div class="currsor-title-box">{{item.title}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currsorIndex: 0,
      dataLists:[
        {title:'标题一'},
        {title:'标题二'},
        {title:'标题三'},
        {title:'标题四'},
      ],
```},
 methods: {
    mouseOver(index) {
    //鼠标移入设置不同样式
      this.currsorIndex = index
    },

}
</script>
#all-box{
  width: 100%;
  height: 352px;
  margin-top: 20px;
  display: flex;
  display: -ms-flex;
  flex-direction: row;
  justify-content: space-between;
}
.c-item-0,
.c-item-1,
.c-item-2,
.c-item-3 {
  position: relative;
  height: 352px;
  width: 160px;
  border-radius: 2px;
  transition: width 0.4s;
  transition-timing-function: ease;
  background: #2f56a7;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  transition: all 0.5s;
  transition-timing-function: ease;
}
.c-item-3 {
  margin-right: 0px;
}
.c-item-hover {
  width: 700px;
  height: 352px;
  background: linear-gradient(280.39deg, #85b5f4 5.53%, #3a73ed 84.52%);
  transition: all 0.5s;
  transition-timing-function: ease;
  .img-right-bg {
    opacity: 1;
    transition: all 0.5s linear;
  }
  .currsor-content-box{
    transition: all 0.5s linear;
    opacity: 1;
  }
}
.currsor-content-box {
  width: 100%;
  margin-top: 109px;
  padding-left: 40px;
  position: absolute;
  z-index: 1;
  opacity: 0;
  .currsor-title-box {
    color: #fff;
    font-size: 22px;
  }
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值