当前位置: 首页 > 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.布局 首先我们定义一个整体的塔罗牌盒子&…...

分布式搜索引擎

1 DSL查询文档 elasticsearch的查询依然是基于JSON风格的DSL来实现的。 1.1.DSL查询分类 Elasticsearch提供了基于JSON的DSL&#xff08;Domain Specific Language&#xff09;来定义查询。常见的查询类型包括&#xff1a; 查询所有&#xff1a;查询出所有数据&#xff0c;一…...

【2023最新版】腾讯云CODING平台使用教程(Pycharm/命令:本地项目推送到CODING)

目录 一、CODING简介 网址 二、CODING使用 1. 创建项目 2. 创建代码仓库 三、PyCharm&#xff1a;本地项目推送到CODING 1. 管理远程 2. 提交 3. 推送 4. 结果 四、使用命令推送 1. 打开终端 2. 初始化 Git 仓库 3. 添加远程仓库 4. 添加文件到暂存区 5. 提交更…...

IDEA Properties 文件亂碼怎麼解決

1.FIle->Setting->Editor->File Encodings 修改Properties FIles 編碼顯示格式&#xff1a;UTF-8...

uniapp微信小程序用户隐私保护

使用wx.requirePrivacyAuthorize实现微信小程序用户隐私保护。 一、前言 微信小程序官方出了一个公告《关于小程序隐私保护指引设置的公告》。不处理的话&#xff0c;会导致很多授权无法使用&#xff0c;比如头像昵称、获取手机号、位置、访问相册、上传图片视频、访问剪切板…...

虚幻引擎4中关于设置关于体坐标系下的物体速度的相关问题

虚幻引擎4中关于设置关于体坐标系下的物体速度的相关问题 文章目录 虚幻引擎4中关于设置关于体坐标系下的物体速度的相关问题前言全局坐标系转体坐标系速度设置X轴方向的体坐标系速度设置Y轴方向的体坐标系速度XY轴体坐标系速度整合 Z轴速度的进一步设置解决办法 小结 前言 利…...

16 | Spark SQL 的 UDF(用户自定义函数)

UDF(用户自定义函数):Spark SQL 允许用户定义自定义函数,以便在 SQL 查询或 DataFrame 操作中使用。这些 UDF 可以扩展 Spark SQL 的功能,使用户能够执行更复杂的数据操作。 示例: // 注册UDF spark.udf.register("calculateDiscount", (price: Double, disc…...

蓝桥杯官网填空题(土地测量)

题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 造成高房价的原因有许多&#xff0c;比如土地出让价格。既然地价高&#xff0c;土地的面积必须仔细计算。遗憾的是&#xff0c;有些地块的形状不规则&#xff0c;比…...

【Java项目实战】牛客网论坛项目1 - Spring入门与初识SpringMVC

目录 Spring 入门SpringInitializrApplicationContextAwareControllerDAODAO 名称索引ServiceConfig自动装配 初识 SpringMVCHttp 请求GETPOSTHTML 渲染响应 JSON 数据 Spring 入门 SpringInitializr IDEA 专业版自带的功能&#xff0c;也可以直接搜索对应网站&#xff0c;通…...

Gurobi使用(一)——操作指南(转自知乎)

好像还是要学一下Gurobi如何使用的&#xff0c;不然这代码着实有点抽象了 一、入门操作 一般来说&#xff0c;求解一个数学规划模型的时候&#xff0c;通常会按照如下步骤解决问题: 设置变量---addVar()。 更新变量空间---update()。 设定目标函数---setObjective()。 设定约…...

计算机网络的故事——简单的HTTP协议

简单的HTTP协议 文章目录 简单的HTTP协议一、简单的HTTP协议 一、简单的HTTP协议 HTTP是不保存状态的协议&#xff0c;为了实现保存状态功能于是引入了Cookie技术。 method: get:获取资源 post:传输实体主体 put:传输文件 head:获取报文首部&#xff0c;用于确认URI的有效性以…...

新能源商用车软件开发设计规范

目 录 前 言.............................................................................................................. 1 1 范围............................................................................................................... 2 2 规范性…...

Json“牵手”当当网商品详情数据方法,当当商品详情API接口,当当API申请指南

当当网是知名的综合性网上购物商城&#xff0c;由国内著名出版机构科文公司、美国老虎基金、美国IDG集团、卢森堡剑桥集团、亚洲创业投资基金&#xff08;原名软银中国创业基金&#xff09;共同投资成立1。 当当网从1999年11月正式开通&#xff0c;已从早期的网上卖书拓展到网…...

lazarus开发界面程序用线程显示进度条

lazarus开发界面程序用线程显示进度条&#xff0c;效果更好&#xff0c;以前没有另外显示线程&#xff0c;遇到上传文件或其他较长时间操作&#xff0c;界面就卡在那里&#xff0c;体验不好&#xff0c;现在另外启动线程操作&#xff0c;主界面就不至于卡在那里。 首先在主界面…...

解决VSCode下载速度特别慢的问题

一、下载VSCode 1.打开VSCode官网 https://code.visualstudio.com 2.download下载 3.下载特别慢 二、解决VSCode下载速度特别慢 1.单击右下角全部显示 我是用chrome浏览器&#xff0c;点击右下角的全部显示按钮&#xff0c;可以跳转到下载内容页面。 如果你是用其他浏览器…...

国家矿山安全监察局关于露天矿山边坡监测系统建设及预警响应要求

矿山是人类社会发展的物资基础&#xff0c;也是国民经济的重要组成部分。随着我国经济的快速增长&#xff0c;矿山开发步伐加快&#xff0c;使得边坡问题日益严重&#xff0c;影响了矿山的安全生产。为有效防范遏制矿山重特大事故发生&#xff0c;国家矿山安全监察局在8月30日发…...

前端使用elementui开发后台管理系统的常用功能(持续更新)

前言&#xff1a;本次的文章完全是自己开发中遇到的一些问题&#xff0c;经过不断的修改终于完成的一些功能&#xff0c;当个快捷的查看手册吧~ elementui开发后台管理系统常用功能 高级筛选的封装elementui的表格elementui的表格实现跨页多选回显elementui的表单elementui的日…...

中东 Shopify 如何使用 Bytebase 构建一站式数据库开发工作流

公司简介 Salla 是一家 2016 年成立&#xff0c;位于沙特麦加的自建站电商平台。 作为中东 Shopify&#xff0c;其最大的特点是支持阿拉伯语建站&#xff0c;并且提供更多适应中东地区特点的本地化服务。截止目前&#xff0c;已有 47,000 家店铺入驻 Salla&#xff0c;商品销售…...

谷歌Chrome庆祝15周年,推出全新设计!了解最新信息!

谷歌浏览器本月将满15岁&#xff0c;为了纪念这一时刻&#xff0c;它正在进行改造和升级。 这一点意义重大&#xff0c;因为Chrome在全球有数十亿人使用&#xff0c;因此谷歌所做的每一项改变都会对互联网以及这些人与互联网的互动方式产生巨大影响。即使你不使用Chrome或不关…...

解决Oracle SQL语句性能问题——SQL语句改写(分析函数、with as、union及or)

1. 正确使用分析函数 分析函数最早出现于Oracle 8i版本中,并在后续版本中不断得以增强。正确的使用分析函数,不但能非常方便的实现某些功能,而且,在某些场景中,还可以大幅提升SQL语句的性能。因此,为了简化应用实现逻辑或解决相关SQL语句性能问题,有时我们需要利用分析…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

Netty从入门到进阶(二)

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

Python Einops库:深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...