个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试制作类似于此的动画 https://cardsagainsthumanity.com/页面右上角。虽然很难完全做到这一点(如果您确切知道如何做到这一点，请告诉我)，但我决定制作一个简化版本。
我使用下面的代码在 CSS 设计中制作了黑白卡片以及 ZoomIn 效果(按底部的“运行代码片段”查看它的外观)。
现在有两个问题:
1. 将这三张卡(第一个组合)替换为接下来的三张卡(第二个组合#它们不在代码中#)，依此类推，并在更大的无限循环中运行这些不同的组合。 [高优先级]
2. 将卡片一张一张地展示出来。例如，首先应该出现黑卡，然后是第一张白卡，第二张白卡，依此类推。目前，我们的所有卡片同时出现在屏幕上。 [低优先级]。
现在，我在阅读论坛上的不同答案后尝试解决CSS中的第一个问题，但没有成功。我不知道我们是否可以通过Javascript或jquery来解决这个问题，因为我对它们不太熟悉。
如果你能帮我解决至少第一个问题，那将是一个很大的帮助。
.blackcard {
position: relative;
float: right;
margin-top: 54px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;
width: 160px;
height: 230px;
border-radius: 10px;
padding: 15px;
-webkit-box-shadow: 15px 15px 0px rgba(0, 0, 0, 0.3);
box-shadow: 15px 15px 0px rgba(0, 0, 0, 0.3);
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 600;
color: #FFFFFF;
text-shadow: 0px 0px #000000;
background-color: #000000;
}
.stage {
background: #232323;
border-radius: 6px;
height: auto;
position: relative;
min-width: 100%;
float: right;
margin-right: 0px;
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
@keyframes zoomIn {
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.whitecard {
position: relative;
float: right;
margin: 54px 10px 10px 10px;
width: 160px;
height: 230px;
border-radius: 10px;
padding: 15px;
background: #fff;
-webkit-box-shadow: 15px 15px 0px rgba(0, 0, 0, 0.3);
box-shadow: 15px 15px 0px rgba(0, 0, 0, 0.3);
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 600;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/cards.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="stage">
<div class="whitecard zoomIn">
<p2>Sleeping.</p2>
</div>
<div class="whitecard zoomIn">
<p>Coding.</p>
</div>
<div class="blackcard zoomIn">
<p> What are you doing?</p>
</div>
</div>
</body>
</html>最佳答案
如果我这样做，我会直接使用 Javascript。
您可以使用一个包含许多不同值的数组作为白卡，并在白卡上“随机”更新值。
例如你的数组可能是
var exampleArray = ['value1', 'value2', 'value3'];
然后使用 javascript，您可以使用数组值更改 div.whitecard p 值......循环。
老实说，没有时间写示例，其要点是使用 Javascript 并将其视为您的 friend !!!!
查看根据下面您的评论进行的编辑...
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>Page Title</title>
</head>
<body>
<div id="myGreetingSkills"></div>
<script>
(function($) {
$(function() {
var skills = ["text1","text2","text3","text4"],
counter = skills.length - 1,
previousSkill = $("#myGreetingSkills"),
arraylength = skills.length - 1;
function display_skills() {
if (counter === arraylength) {
counter = 0;
}
else {
counter++;
}
previousSkill.html(skills[counter]);
}
display_skills();
setInterval(function() {
display_skills();
}, 2000);
});
})(jQuery);
</script>
</body>
</html>
关于javascript - CSS 动画 : changing images in an infinite loop，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46529492/
25
4
0
我正在使用 NDK 为 Android 编写一个实用程序。 在我的实用程序中，我 fork 了一个进程，并在该进程中运行以下代码: //Screenshot thread int i = 0; for
我是 React 新手，正在构建一个表单。该表单由多个组件组成的集合组成。组件之一是文本字段。 我想创建一个按钮，只需单击即可添加无限数量的相同文本字段组件。我对如何执行此操作感到困惑，并且在网上找不
我需要每 5 秒无限地写入一个文件 (.txt)这是我的代码: #include #include #include #include #include using namespace st
出于好奇，是 全部 无限循环不好？ 如果您运行无限循环，会发生什么不良影响和后果？ 另外，如果它们不全是坏的，您能否举一些例子，它们何时可以用于有意义的目的？ 他们是否需要关闭实例？例如，我们总是在
下面是我的智能合约。当我将它放入混音中时，我会收到有关以下每个功能的警告。 函数 MedicalRecord.addNote(bytes32,bytes32) 的 Gas 要求高:无限。 函数 Med
CPDT的第三章简要讨论了为什么Coq中禁止使用负感应类型。如果我们有 Inductive term : Set := | App : term -> term -> term | Abs : (te
我有一个包含 6 个页面且启用分页的 UICollectionView 和一个 UIPageControl。我想要的是，当我来到最后一页时，如果我向右拖动，UICollectionView 会从第一页
如何以编程方式在 Excel 工作表中创建“无限”符号？ 最好来自 Java...但也欢迎其他提示。 谢谢。 最佳答案 “无穷大符号”字符位于 unicode 的代码点 0x221E 中。执行此操作的
如果我想迭代值 0 到 255 并且我使用无符号字节作为计数器，当计数器达到 255 时返回到 0 并进行无限循环。 for (ubyte i = 0; i < ubyte.max; i++)
如果需要全部32位来存储从-2^31到2^31，它如何存储+和-无穷大？它使用更多内存吗？存储这些值是否良好且安全？ 更新:感谢答案，我知道只有 float 据类型可以存储 Inf 值，整数不能。 最
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
在下面的设置中，如何绘制一条通过两点的“无限”线？ var context = document.getElementById("canvas").getContext("2d"); var poin
我正在测试一个简单的汇编函数 (SPARC)。该函数如下，应该有两个参数，x 和 *str，并计算 x 在 *str 中出现的次数。但是，该函数会导致无限循环。我正在使用 C 来调用汇编函数，这也在下
我有很多内容要在网站上显示，因此我需要使用“无限”滚动解决方案，当用户滚动到当前加载内容的末尾时加载内容。但是，我确切地知道有多少数据，我希望用户对此有所了解。我不喜欢滚动条如何让你看起来快到内容的末
我想实现无限滚动。下面是我的布局的简短形式。因为我有一些相对定位的元素，javascript 滚动事件不会触发。 如何解决此问题才能触发滚动事件并实现无限滚动？ 我的主要布局是:
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题吗？ 更新问题，以便 editing this post 提供事实和引用来回答它. 关闭3年前。 Improve th
如何定义类型 InfiniteFunction ，这是一个函数，调用时返回另一个 InfiniteFunction 类型看起来像: () => () => () => ... // infinite
我正在尝试为此模式创建匹配项: /page/some/thing/is/written/here 其中/page 将始终匹配 a-zA-Z0-9 并且/page 之后的所有内容都可以包含字符 a-zA
我正在使用一个“通用”js 片段，它应该检测用户是否滚动到文档底部: $(window).scroll(function() { if ($(window).scrollTop()
当我尝试初始化 Fabric ui 日期选择器字段的值时，我收到 @@redux-form/INITIALIZE 消息的无限循环 function mapStateToProps(state) {
我是一名优秀的程序员,十分优秀！