- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试构建一个抽奖系统。每个类别有 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/
让我们开始吧,3 个类(Card、Start、Deckofcards) 1° 卡: public class Card { private String type; private i
我要创建一个二十一点游戏,我正在尝试弄清楚如何发牌并让它显示值和名称。我选择两个属性的原因纯粹是基于逻辑,当涉及到将 A 视为 1 或 11 时。还没有达到这一点,只是想如果有人想知道的话我会包括在内
我正在尝试使用 twitter 元标记(以及 Facebook 等其他网站的 Open Graph)创建 Twitter 卡片。当我看到来自其他人(例如 NPR 新闻)的推特提要时,卡片会默认展开。
我正在开发一个玩基本扑克游戏的程序,但这并不重要。我有一组 52 张牌,包含花色和等级。我想打印 4 行 13 行的值(花色和等级)。这可能是一个简单的问题,但我整天都在努力解决这个问题。因此,我非常
我开发了一个包含三列(两列相等,一列较小)的网格。我的问题是我无法在卡片上设置高度,我在 px 中使用了它们并且它起作用了,但这不是最好的方法。我希望这三列具有相同的高度(页面的 100%)并且一些卡
我在 4 个不同的列中开发了 4 个 Bootstrap 卡。在每张卡片中,我创建了一张包含某种类型信息的新卡片。 我的问题是,当我缩小屏幕尺寸(响应测试)时,文本会从卡片中溢出。我的问题是什么,我该
我怎样才能达到 固定高度 具有垂直可滚动 的 bootstrap 4 卡卡片文字部分? Card title This portion and
在我的程序中,我有一个大 Canvas ,我在其中提取多个选定区域并将这些区域绘制到单独的新小 Canvas 上。 我想使用此 API 将新创建的 Canvas 作为附件发布到 trello POST
我想在卡片 View 中显示联系信息,如果需要,应该调整卡片 View 的大小以包含所有信息。 这是布局部分: 但是 an
这是我的card_view。我已经提到了 card_view:cardElevation。但是仍然没有显示阴影。 我搜索了很多链接。他们在任何地方都提到要使用 card_view:cardElevat
我正在使用此处的框架 - cardsui 如何在卡片顶部添加分享按钮。我已经使用点击方法在 xml 中实现了它,但是当我按下它时应用程序崩溃并说该方法不存在(是的,我将该方法添加到主 java 文件中
我正在将 cardview 与 recycler view 一起使用。但早些时候我使用相同的代码来做事没有任何问题。但现在我正在使用 fragment 。现在我得到卡片 View 之间的距离更大。我的
我的卡片 View 设置如下: android:layout_marginTop="2dp" android:layout_marginLeft="6dp" android:layout_margin
我正在制作一个二十一点游戏,并创建了一个数组来充当用户发牌的手牌。我希望能够对其进行排序,以便手按数字顺序排序,这样可以更简单地确定用户的手的类型。这是我的卡片结构: struct ACard{
我希望在一个运行在 Wordpress 上的网站上实现 Twitter Cards(关于 Twitter Cards 的文档在这里:https://dev.twitter.com/docs/cards
我需要帮助解决这个难题。在 bootstrap 4.1 中使用卡片列和卡片时,当我不想这样做时,行会中断。我将列数设置为 4,当有 4 张卡片时,它看起来很完美。当添加第五张牌时,它会将行分成顶部的
我有一个 android ListView ,它显示类似卡片的 View ,正如您在这张图片中看到的,我的卡片之间有一条灰色细线: 我怎样才能摆脱灰线? 我实现这个卡片 View 的xml是这样的:
我正在尝试添加带有回收站 View 的卡片 View 。但它没有显示任何内容,只是一个空白 View 。 我在这里看到了这方面的问题,它有为回收站 View 和卡片 View 添加依赖项的答案。这出现
我在 android 中通过回收站 View 实现卡片 View ,但我的卡片 View 没有显示。我正在使用自定义适配器将数据填充到卡片 View 。我已经尝试了所有方法,但没有显示卡片 View
在我的应用程序中,我有一个卡片 View ,其中包含一个 TextView 和一个按钮,该按钮最初是隐藏的,当单击卡片 View 时,会显示该按钮。我不知道如何在显示按钮时将其设置为动画。任何人都可以
我是一名优秀的程序员,十分优秀!