vue高仿立体卡片效果（第一版）

已于 2022-03-05 11:05:03 修改
阅读量1.4k 收藏
点赞数
分类专栏： Element Vant css 文章标签： vue.js 前端 css3
于 2021-12-23 16:52:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25252769/article/details/122111431
版权
Element 同时被 3 个专栏收录
25 篇文章 0 订阅
订阅专栏
Vant
16 篇文章 1 订阅
订阅专栏
css
12 篇文章 0 订阅
订阅专栏
如图所示：

请添加图片描述

代码如下：（复制另存txt，修改.html直接运行）
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>vue高仿立体卡片效果</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    .fu{
      margin: 0 auto;
      background: #eee;
      height: 50px;
      display: flex;
      position:relative;
      text-align: center;
    }
    .fu .zi{
        flex:1;
        height: 40px;
        line-height: 40px;
        background: #ddd;
        position: relative;
        bottom: 0;
        margin-top: 10px;
    }
    .fu .rightBox::after{
      content: '';
      position: absolute;
      z-index: 2;
      bottom: 0;
      right: -10px;
      height: 50px;
      width: 15px;
      background: #fff;
      box-shadow: 2px 0px 0px #aaa;
      transform: skew(10deg);
      border-radius: 0 5px 0 0;
    }
     .leftBox::before{
      content: '';
      position: absolute;
      z-index: 1;
      left: -10px;
      height: 50px;
      width: 15px;
      background: #fff;
      box-shadow: -2px 0px 0px #aaa;
      transform: skew(-10deg);
      border-radius: 5px 0 0 0;
    }
    .fu .active{
      background: #fff;
      height: 50px;
      line-height: 50px;
      bottom: 10px;
    }
  </style>
</head>
<body style="background: #eee;">
  <div id="app">
    <div class="fu">
      <span class="zi" :class="[tabIndex == 0?'rightBox active':'']" @click="clickTab(0)" >吃鸡</span>
      <span class="zi" :class="[tabIndex == 1?'active rightBox leftBox':'']" @click="clickTab(1)">王者</span>
      <span class="zi" :class="[tabIndex == 2?'leftBox active':'']" @click="clickTab(2)">LOL</span>
    </div>
    <div style="background: #fff;height: 100px;text-indent: 2em;">
        {{['P城刚枪，成为P城之王！','王者滴滴，实力带飞！','面对疾风吧！哈撒给，嘿呀给给痛'][tabIndex]}}
    </div>
  </div>
</body>

<script src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入 echart -->
<script src="https://lib.baomitu.com/echarts/5.2.0/echarts.common.js"></script>

<script>
  new Vue({
    el: '#app',
    data() {
      return { 
        tabIndex:0,
      }
    },
    mounted(){

    },
    methods: {
      clickTab(val){
        this.tabIndex = val
      }
    }
  })
</script>
</html>
vue高仿立体卡片效果（第二版）： vue高仿立体卡片效果（第二版）
vue高仿立体卡片效果（第三版）： vue高仿立体卡片效果（第三版）
番外篇：

越来越发现管理的重要性，码农常有，而管理不常有，好的管理事半功倍。

刘斩仙的笔记本
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue高仿立体卡片效果（第二版）
01-11
vue高仿立体卡片效果（第二版）：https://blog.csdn.net/qq_25252769/article/details/123291095
【前端】Vue实现网站导航 以卡片形式显示（附Demo）
码农研究僧的博客
02-10 1720
【前端】Vue实现网站导航 以卡片形式显示（附Demo）
vue手写卡片切换，并且点击获取到卡片信息
最新发布
请叫我欧皇！的博客
02-23 627
需求：做一个卡片样式的列表，之后有一些基本信息，之后卡片选中后样式不一样，默认选中第一个卡片，点击卡片后可以获取到卡片的信息。
vue高仿立体卡片效果（第三版）
03-05
vue高仿立体卡片效果（第三版）：https://blog.csdn.net/qq_25252769/article/details/123291333
vue3核心技术实战第一版
04-13
介绍vue3最新特性，新的API，高级知识，以及和Python/Java后端结合的实战案例。
Vue第一章 技术文档.pdf
08-12
Vue 入门到进阶第一章 #资源达人分享计划 # 技术文档
vue-info-card-一个简单漂亮的卡片组件，带有优美的火花线和CSS3翻转动画。-Vue.js开发
05-27
用于VueJS的简单美观的卡片组件，带有精美的火花线。 演示可以在此处找到该组件的实时演示。 安装npm i -S vu用于VueJS的简洁美观的卡片组件，带有优美的火花线。 演示可以在此处找到该组件的实时演示。 安装npm i -S vue-info-card用法安装后，可以通过传递适当的道具来使用组件来显示数据和消息。 单个文件组件中的用法示例如下：
vue详情页面卡片样式封装
ljw的博客
02-09 2283
在前端项目中，详情页面是必不可少的，详情页面通过卡片样式进行分片展示的需求也很多，这里记录下来方便以后直接套用。
【vue】 vue项目开发卡片展示页面----菜品管理
Joise_的博客
07-04 1766
vue项目开发卡片展示页面----菜品管理
Vue3卡片（Card）
Mr Dear的博客
07-18 3216
最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
Vue2 思维导图(第一版).emmx
10-22
Vue2 思维导图(第一版).emmx
Vue2 思维导图(第一版)1
08-03
① 创建组件构造器对象 ② 注册组件 ③ 使用组件 ① 创建对应的子组件，并且在路由映射中配置对应的子路由
vue简单实现一个类似微信左右滑动更多功能
qq_45219069的博客
06-04 1858
左右跟手滑动核心思路是通过计算滑动的距离，动态设置css位移量，这个过程看似简单，但也有几个小细节，比如边界值的限定弹性效果其实是设置的响应距离、元素移动的距离不是一味的使用偏移量（当处于收起状态时，移动距离 = 偏移量，当处于某一侧展开时，移动距离 = 初始位移距离 + 偏移量）最后也可以再扩展一些api，比如：手动打开、关闭、以及结束后的回调完整代码如下/** 偏移量 **/ offsetValue : {return {return {if(!
vue3 组件篇 Card
秋来九月八
07-21 4464
card组件在我们日常开发中经常使用，如果能够有一个较好的封装，将会省去很多的重复代码，提高开发效率。要与cardGroup相结合能够实现水平排列和垂直排列，或者瀑布流排列。提供了线上的体验网站，欢迎大家前来，并提出你的建议。必须分为标题和内容两部分，并且都支持自定义。card组件需要实现哪些功能呢。提供一种或多种hover特效。card提供点击事件用以交互。......
vue js 好玩的简单的特效 可扩展的动画卡片
m0_59163380的博客
05-04 550
【代码】vue js 好玩的简单的特效 可扩展的动画卡片。
手写Vue个人组件库———fl-Card
量子前端的博客
07-19 2136
接上文，封装了个人Vue组件库的Card卡片布局组件，源码附在了文章末尾，如下是文档使用说明 Card 卡片 将信息聚合在卡片容器中展示。 基础用法 包含左侧标题、右侧标题、内容和底部内容。 Card 组件包括header-left、header-right、content和footer部分组成，header部分需要有显式具名 slot 分发，同时也是可选的。 <fl-Card class = "card"> <div slot = "header-left"> &
Vue学习--基础（1）--实现选项卡效果
sinat_28753227的博客
02-25 1084
vue实现选项卡效果： 1.页面布局代码： <div id="app"> <div class="tab"> <ul> <li v-on:click="change(index)" :class="currentIndex==index?'active':''" :key="item.id" v-for="(item,index) in list"&gt
vue+elementui v-for 循环卡片列表
lrbtony的博客
01-08 8160
for循环实现循环卡片样式
用vue实现卡片左右重叠并且左右滑动
06-08
要实现Vue卡片左右重叠并且左右滑动，可以使用CSS3的transform属性和transition属性，以及Vue的动态绑定class属性。以下是一个简单的实现思路： 1. 在组件中添加一个卡片容器，设置overflow: hidden属性和white-space: nowrap属性，使卡片可以水平滚动并且超出容器范围的部分被隐藏。 2. 使用flex布局，将卡片设置为均匀分布，并且设置卡片的z-index属性和transform属性，使卡片左右重叠。 3. 在卡片容器上添加touchstart、touchmove、touchend事件的监听函数。 4. 在touchstart事件中记录起始位置的横坐标和当前卡片的索引。 5. 在touchmove事件中计算当前位置的横坐标与起始位置的横坐标的差值，并根据差值设置卡片的transform属性。 6. 在touchend事件中判断差值是否超过一定的阈值，如果是则根据差值的正负来判断卡片是向左滑动还是向右滑动，并根据卡片的位置来设置是否切换到下一个卡片。 7. 使用Vue的动态绑定class属性来根据当前卡片的索引来设置卡片的z-index属性和transform属性，以实现左右重叠效果。 8. 使用CSS3的transition属性实现卡片的平滑过渡效果。 以下是一个简单的代码示例： ```html <template> <div class="card-container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"> <div class="card" :style="{ transform: `translateX(${translateX}px)`, zIndex: currentIndex }" :class="{ 'active': currentIndex === index }" v-for="(item, index) in items" :key="index"> {{ item }} </div> </div> </template> <script> export default { data() { return { items: ['Card 1', 'Card 2', 'Card 3', 'Card 4'], currentIndex: 0, startX: 0, translateX: 0 }; }, methods: { onTouchStart(event) { this.startX = event.touches[0].clientX; this.currentIndex = Math.floor(this.startX / (window.innerWidth / this.items.length)); }, onTouchMove(event) { const currentX = event.touches[0].clientX; this.translateX = currentX - this.startX; }, onTouchEnd(event) { const threshold = 50; if (Math.abs(this.translateX) > threshold) { this.currentIndex += this.translateX > 0 ? -1 : 1; if (this.currentIndex < 0) { this.currentIndex = 0; } else if (this.currentIndex >= this.items.length) { this.currentIndex = this.items.length - 1; } } this.startX = 0; this.translateX = 0; } } }; </script> <style scoped> .card-container { display: flex; overflow: hidden; white-space: nowrap; padding: 10px; } .card { flex: 0 0 80%; height: 200px; padding: 20px; background-color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease-out, z-index 0s linear; } .card.active { flex: 0 0 100%; z-index: 2; transform: translateX(0) scale(1.1); } .card.active + .card { z-index: 1; transform: translateX(50%) scale(0.9); } .card.active + .card + .card { z-index: 0; transform: translateX(100%) scale(0.8); } </style> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

刘斩仙的笔记本

富贵险中求

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值