网站建设公司的出路,wordpress wap版,菜鸟教程python在线编程,丹阳网络vue3实现塔罗牌翻牌 前言一、操作步骤1.布局2.操作3.样式 总结 前言
最近重刷诡秘之主#xff0c;感觉里面的塔罗牌挺有意思#xff0c;于是做了一个简单的塔罗牌翻牌动画#xff08;vue3vitets#xff09;
一、操作步骤
1.布局
首先我们定义一个整体的塔罗牌盒子… vue3实现塔罗牌翻牌 前言一、操作步骤1.布局2.操作3.样式 总结 前言
最近重刷诡秘之主感觉里面的塔罗牌挺有意思于是做了一个简单的塔罗牌翻牌动画vue3vitets
一、操作步骤
1.布局
首先我们定义一个整体的塔罗牌盒子在盒子里放入多张塔罗牌每张塔罗牌是由背面牌和正面牌组成我们分别赋予类名frontback 在单张塔罗牌中我们除了默认的tarotItem样式外添加了一个动态样式open用于实现切换牌面。
templatediv classtarotBoxdiv classtarotItem v-foritem in tarot clickchangeTarot(item):classitem.value?open:img classback src../front.jpgimg classfront src../0.jpg/div/div
/template2.操作
我们定义一个塔罗牌数据数组通过其中的属性value对动态类进行控制再编写一个函数changeTarot用于改变类open的添加和删除
script setup langts
import {ref} from vue;//塔罗牌数据数组
const tarot ref([{name: 1,value: false
}]);//牌面进行切换
const changeTarot (item: any) {item.value !item.value
}/script3.样式
塔罗牌默认样式是背面在上因此设置正面牌角度为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);}}总结
源代码下载地址
