gpt4 book ai didi

javascript - 如何在一段时间内自动翻转 CSS 卡片并单击按钮使它们从屏幕上消失?

转载 作者:行者123 更新时间:2023-12-04 03:39:58 25 4
gpt4 key购买 nike

我正在尝试构建一个抽奖系统。每个类别有 8 张卡片,8 个人分配这些卡片。我想在卡片上制作一个翻转动画,所有卡片都翻转到 10 秒,然后只有一张卡片作为累积奖金出现在屏幕上。如何使用 CSS 和 JavaScript 实现这一点?

我当前的代码:-

CSS

.card {
display: grid;
grid-template-columns: 300px;
float: none; /* Added */
margin-top: 50px;
border-radius: 18px;
align-content: center;
margin-left: auto;
margin-right: auto;
background-color: #FFEB3B;

box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
font-family:Lucida Handwriting;
text-align: center;


transition: 0.5s ease;
cursor: pointer;
}

在当前系统中,我正在将所有卡片加载到屏幕上。我怎样才能让它们旋转 10 秒,并在单击按钮时只显示一张卡片,而其他卡片消失。

最佳答案

我设置了所需的功能。您可以根据需要调用它们

var elems = document.getElementsByClassName('flip-box-inner');
var totalSecond = 0;
var myTimer;
function RotationCard() {
totalSecond = totalSecond + 1;
for (var i = 0; i < elems.length; i++) {
if(totalSecond == 1)
{
if(i%2 == 0)
{
if(!elems[i].classList.contains("myAnim"))
elems[i].classList.add("myAnim");
else
elems[i].classList.remove("myAnim");
}
}
else
{
if(!elems[i].classList.contains("myAnim"))
elems[i].classList.add("myAnim");
else
elems[i].classList.remove("myAnim");
}
}


if (totalSecond <= 10) {
myTimer = setTimeout(RotationCard, 1000);
}
else
{
ResetAndClearCard();
}
}


function SelectCard()
{
ResetAndClearCard();
var rand = Math.floor(Math.random() * 10) + 1;
for (var i = 0; i < elems.length; i++) {
if(rand == i)
elems[i].classList.add("myAnim");
}
}

function ResetAndClearCard()
{
totalSecond = 0;
clearTimeout(myTimer);
for (var i = 0; i < elems.length; i++) {
if(elems[i].classList.contains("myAnim"))
elems[i].classList.remove("myAnim");
}
}
body {
font-family: Arial, Helvetica, sans-serif;
text-align:center;
}

.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
perspective: 1000px;
display:inline-block;
}

.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.flip-box-front {
background-color: #bbb;
color: black;
}

.flip-box-back {
background-color: #555;
color: white;
transform: rotateY(180deg);
}

.myAnim
{
transform: rotateY(180deg);
transition: transform 0.8s;
}
.btn1
{
height:30px;
bordder:1px solid #ddd;
width:150px;
background:#228833;
color:white;
}


.btn2
{
height:30px;
bordder:1px solid #ddd;
width:150px;
background:#2233ff;
color:white;
}

.btn3
{
height:30px;
bordder:1px solid #ddd;
width:180px;
background:#ff2266;
color:white;
}

.btn1:hover,.btn2:hover,.btn3:hover
{
background:#223366;
}
<button class="btn1" onclick="RotationCard()">rotation</button>
<button class="btn2" onclick="SelectCard()">select</button>
<button class="btn3" onclick="ResetAndClearCard()">reset & clear Timer</button>
</div>

<h1>Image Flip with Text</h1>
<h3>Hover over the image below:</h3>


<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
</div>
<div class="flip-box-back">
<h2>Paris</h2>
<p>What an amazing city</p>
</div>
</div>
</div>

<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
</div>
<div class="flip-box-back">
<h2>Paris</h2>
<p>What an amazing city</p>
</div>
</div>
</div>


<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
</div>
<div class="flip-box-back">
<h2>Paris</h2>
<p>What an amazing city</p>
</div>
</div>
</div>

<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
</div>
<div class="flip-box-back">
<h2>Paris</h2>
<p>What an amazing city</p>
</div>
</div>
</div>


<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
</div>
<div class="flip-box-back">
<h2>Paris</h2>
<p>What an amazing city</p>
</div>
</div>
</div>

<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
</div>
<div class="flip-box-back">
<h2>Paris</h2>
<p>What an amazing city</p>
</div>
</div>
</div>


<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
</div>
<div class="flip-box-back">
<h2>Paris</h2>
<p>What an amazing city</p>
</div>
</div>
</div>

<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
</div>
<div class="flip-box-back">
<h2>Paris</h2>
<p>What an amazing city</p>
</div>
</div>
</div>

关于javascript - 如何在一段时间内自动翻转 CSS 卡片并单击按钮使它们从屏幕上消失?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66219257/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com