当前位置: 首页 > news >正文

vue3实现卡片翻牌

vue3实现塔罗牌翻牌

  • 前言
  • 一、操作步骤
    • 1.布局
    • 2.操作
    • 3.样式
  • 总结

前言

最近重刷诡秘之主,感觉里面的塔罗牌挺有意思,于是做了一个简单的塔罗牌翻牌动画(vue3+vite+ts)

一、操作步骤

1.布局

首先我们定义一个整体的塔罗牌盒子,在盒子里放入多张塔罗牌,每张塔罗牌是由背面牌和正面牌组成,我们分别赋予类名front,back;
在单张塔罗牌中我们除了默认的tarotItem样式外,添加了一个动态样式open用于实现切换牌面。

<template><div class="tarotBox"><div class="tarotItem" v-for="item in tarot" @click="changeTarot(item)":class="item.value?'open':''"><img class="back" src="../front.jpg"><img class="front" src="../0.jpg"></div></div>
</template>

2.操作

我们定义一个塔罗牌数据数组,通过其中的属性value对动态类进行控制;再编写一个函数changeTarot用于改变类open的添加和删除

<script setup lang="ts">
import {ref} from "vue";//塔罗牌数据数组
const tarot = ref([{name: '1',value: false
}]);//牌面进行切换
const changeTarot= (item: any) => {item.value = !item.value
}</script>

3.样式

塔罗牌默认样式是背面在上,因此设置正面牌角度为180,背面牌角度为0,同时为两张牌设置过渡样式和过渡属性

//塔罗牌样式
img {width:110px;height: 200px;position: absolute;//确保牌在同一位置transform-style: preserve-3d;//过渡样式,3dtransition: 1s transform;//过渡时间backface-visibility: hidden;//旋转到180度自动隐藏
}
//正面牌角度
.front {transform: rotateY(180deg);
}//背面牌角度
.back {transform: rotateY(0deg);
}
</style>

当点击塔罗牌时,对应位置的塔罗牌样式发生变化,也就是下面我们所添加的样式类open

//翻牌样式.open {//正面牌角度.front {transform: rotateY(0deg);}//背面牌角度.back {transform: rotateY(180deg);}}

总结

源代码下载地址

相关文章:

vue3实现卡片翻牌

vue3实现塔罗牌翻牌 前言一、操作步骤1.布局2.操作3.样式 总结 前言 最近重刷诡秘之主&#xff0c;感觉里面的塔罗牌挺有意思&#xff0c;于是做了一个简单的塔罗牌翻牌动画&#xff08;vue3vitets&#xff09; 一、操作步骤 1.布局 首先我们定义一个整体的塔罗牌盒子&…...

算法训练营day45|动态规划 part07:完全背包 (LeetCode 70. 爬楼梯(进阶)、322. 零钱兑换、279.完全平方数)

文章目录 70. 爬楼梯(进阶)(求排列方法数)思路分析代码实现 322. 零钱兑换(求等于背包重量的最小物品数)思路分析代码实现思考总结 279.完全平方数 (求等于背包重量的最小物品数)思路分析代码实现 70. 爬楼梯(进阶)(求排列方法数) 题目链接&#x1f525; 假设你正在爬楼梯。需…...

【大模型】更强的开源可商用的中英文大语言模型baichuan2来了,从零开始搭建

【大模型】更强的开源可商用的中英文大语言模型baichuan2来了&#xff0c;从零开始搭建 Baichuan 2 介绍技术报告github 地址 模型下载开放协议协议 测试评估通用领域测试7B 模型结果13B 模型结果 法律、医疗7B 模型结果13B 模型结果 数学、代码7B 模型结果13B 模型结果 多语言…...

ElasticSearch系列-简介与安装详解

全文检索 讲ElasticSearch之前, 需要先提一下全文检索.全文检索是计算机程序通过扫描文章中的每一个词&#xff0c;对每一个词建立一个索引&#xff0c;指明该词在文章中出现的次数和位置。当用户查询时根据建立的索引查找&#xff0c;类似于通过字典的检索字表查字的过程。 …...

Layui + Flask | 表单组件(组件篇)(07)

http://layui.dev/docs/2.8/form 表单组件 form 是包含输入框、选择框、复选框、开关、单选框等表单项组件的集合,主要用于对表单域进行各类动态化渲染和相关的交互操作。form是 Layui 最常用的组件之一。 表单布局 form 组件自身的普通布局。其要点为: 通过 class="lay…...

【实践篇】Redis最强Java客户端Redisson

文章目录 1. 前言2. Redisson基础概念2.1 数据结构和并发工具2.1.1 对Redis原生数据类型的封装和使用2.1.2 分布式锁实现和应用2.1.3 分布式集合使用方法 2.2 Redisson的高级特性2.2.1 分布式对象实现和使用2.2.2 分布式消息队列实现和使用2.2.3 分布式计数器实现和使用 3. 参考…...

esxi扩容磁盘

esxi扩容磁盘 fdisk -l没用扩容 登录Esxi管理界面扩容磁盘 进入服务器查看 没用变化 &#xff08;有些可能进去磁盘就是更新&#xff0c;直接就是扩容的&#xff0c;但是没扩容就需要执行下面的命令&#xff09; [root234-ces /]# fdisk -l Disk /dev/sda: 85.9 GB, 858993…...

核心实验21_BGP高级(了解)(配置略)_ENSP

项目场景&#xff1a; 核心实验21_BGP基础_ENSP 通过bgp实现省市互通。 实搭拓扑图&#xff1a; 具体操作&#xff1a; 其他基础配置略&#xff08;接口地址&#xff0c;ospf&#xff09; 1.BGP邻居建立&#xff1a; R1: [R1]bgp 200 [R1-bgp]peer 10.2.2.2 as-number 200 …...

宝塔安装python和openssl

宝塔安装python和openssl OpenSSL Centos7 openssl 升级 1.1.1k.tar.gz centos7系统安装Vicuna&#xff08;小羊驼&#xff09;聊天机器人 CentOS中输入yum报错&#xff1a;sudo: unable to execute /bin/yum: No such file or directory opensslrpm安装指南-让你的网站更加…...

TDengine 3.1.1.0 来啦!更新如下

自 3.0 版本发布以来&#xff0c;在研发人员和社区用户的不断努力下&#xff0c;TDengine 做了大量更新&#xff0c;产品稳定性和易用性也在不断提升。近日&#xff0c;TDengine 3.1.1.0 成功发布&#xff0c;本文将向大家简单介绍一下该版本涉及的重大更新。 写在前面 伴随 …...

YSA Toon (Anime/Toon Shader)

这是一个Toon着色器/Cel阴影着色器,用于Unity URP 此着色器的目的是使角色或物体阴影实时看起来尽可能接近真实的动画或卡通效果 可以用于游戏,渲染,插图等 着色器特性,如:面的法线平滑、轮廓修复、先进的边缘照明、镜面照明、完全平滑控制 这个文档包括所有的功能https:/…...

LabVIEW通过IEC61508标准验证ITER联锁系统

LabVIEW通过IEC61508标准验证ITER联锁系统 保护环境要求系统能够保护机器免受工厂系统故障或机器危险操作造成的严重损坏。负责此功能的ITER系统是联锁控制系统&#xff08;ICS&#xff09;。该系统通过中央联锁系统&#xff08;CIS&#xff09;监督和控制不同的工厂联锁系统&…...

如何处理日期和时间?

处理日期和时间是计算机编程中的常见任务&#xff0c;无论是在C语言还是其他编程语言中。C语言提供了一些库函数来处理日期和时间&#xff0c;主要是通过<time.h>头文件中的函数来完成的。在本文中&#xff0c;我将详细解释如何在C语言中处理日期和时间&#xff0c;包括日…...

【开发】视频集中存储/直播点播平台EasyDSS点播文件分类功能优化

视频推拉流EasyDSS视频直播点播平台&#xff0c;集视频直播、点播、转码、管理、录像、检索、时移回看等功能于一体&#xff0c;可提供音视频采集、视频推拉流、播放H.265编码视频、存储、分发等视频能力服务。 TSINGSEE青犀视频的EasyDSS平台具有点播文件分类展示方法&#xf…...

论文多级编号-word2010

多级列表-定义新的多级列表 注意1.1中的两个1必须是灰色&#xff08;如果不是灰色&#xff0c;解决方法放在文本文末了&#xff09; 如果定义过程中发现1.1中的1不是灰色&#xff0c;如下图&#xff0c;那么需要操作下述步骤 点击文件-选项 取消勾选自动编号列表。确定后关闭文…...

Jetpack Compose基础组件之 — Text

Text的源码参数预览 Composable fun Text(text: String,modifier: Modifier Modifier,color: Color Color.Unspecified,fontSize: TextUnit TextUnit.Unspecified,fontStyle: FontStyle? null,fontWeight: FontWeight? null,fontFamily: FontFamily? null,letterSpac…...

动手学深度学习——Windows下的环境安装流程(一步一步安装,图文并配)

目录 环境安装官网步骤图文版安装Miniconda下载包含本书全部代码的压缩包使用conda创建虚拟&#xff08;运行&#xff09;环境使用conda创建虚拟环境并安装本书需要的软件激活之前创建的环境打开Jupyter记事本 环境安装 文章参考来源&#xff1a;http://t.csdn.cn/tu8V8 官网…...

打印日志遇到的问题,logback与zookeeper冲突

在做项目时需要打印日志引入了logback打印日志&#xff0c;但是一直无法打印&#xff0c;于是一路查找原因。发现zookeeper中默认带的有个logback和我自己引入的logback版本冲突了&#xff0c;这样直接使用exclusions标签将zookeeper中自带的日志框架全部排除即可 按理说到这一…...

【Node.js操作SQLite指南】

Node.js操作SQLite指南 在本篇博客中&#xff0c;我们将学习如何在Node.js中操作SQLite数据库。我们将使用sqlite3模块来创建数据库、创建表以及进行数据的增删改查操作。 文章目录 Node.js操作SQLite指南安装sqlite3模块创建数据库创建表数据的增删改查插入数据查询数据更新…...

PyTorch之张量的相关操作大全 ->(个人学习记录笔记)

文章目录 Torch1. 张量的创建1.1 直接创建1.1.1 torch.tensor1.1.2 torch.from_numpy(ndarray) 1.2 依据数值创建1.2.1 torch.zeros1.2.2 torch.zeros_like1.2.3 torch.ones1.2.4 torch.ones_like1.2.5 torch.full1.2.6 torch.full_like1.2.7 torch.arange1.2.8 torch.linspace…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...