- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我已经有一段时间没有在这里提问了。如果我做错了什么,请原谅。
我对 CSS 动画 有疑问。我希望我的动画不断 self 重复但又不失去初始效果。但是,我的代码或 CSS 动画行为中似乎存在错误。
在它完成前 2 个旋转动画(旋转、回旋) 定义之后。循环开始,但新动画与以前不同。
我的目标是按顺序在 6 个盒子上创建旋转动画,一次一个。当所有的盒子都转动后,它们应该开始回到原来的状态,然后一个一个地依次转动。
代码:
/* -------------------------------------------------------- */
#loader {
width: 240px;
height: 100px;
}
.inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 2s;
transform-style: preserve-3d;
background-color: transparent;
}
.front,
.back {
position: absolute;
width: 80px;
height: 50px;
backface-visibility: hidden;
}
/* -------------------------------------------------------- */
#loader1 {
float: left;
width: 80px;
height: 50px;
perspective: 1000px;
background-color: transparent;
}
#loader1 .inner {
animation: spin 10s ease 0s infinite, spinback 10s ease 10s infinite;
-webkit-animation: spin 10s ease 0s infinite, spinback 10s ease 10s infinite;
}
#loader1 .front {
background-color: #db9834;
}
#loader1 .back {
background-color: #3498db;
transform: rotateY(180deg);
}
/* -------------------------------------------------------- */
#loader2 {
float: left;
width: 80px;
height: 50px;
perspective: 1000px;
background-color: transparent;
}
#loader2 .inner {
animation: spin 10s ease 1s infinite, spinback 10s ease 11s infinite;
-webkit-animation: spin 10s ease 1s infinite, spinback 10s ease 11s infinite;
}
#loader2 .front {
background-color: #db8834;
}
#loader2 .back {
background-color: #3488db;
transform: rotateY(180deg);
}
/* -------------------------------------------------------- */
#loader3 {
float: left;
width: 80px;
height: 50px;
perspective: 1000px;
background-color: transparent;
}
#loader3 .inner {
animation: spin 10s ease 2s infinite, spinback 10s ease 12s infinite;
-webkit-animation: spin 10s ease 2s infinite, spinback 10s ease 12s infinite;
}
#loader3 .front {
background-color: #db7834;
}
#loader3 .back {
background-color: #3478db;
transform: rotateY(180deg);
}
/* -------------------------------------------------------- */
#loader4 {
float: left;
width: 80px;
height: 50px;
perspective: 1000px;
background-color: transparent;
}
#loader4 .inner {
animation: spin 10s ease 3s infinite, spinback 10s ease 13s infinite;
-webkit-animation: spin 10s ease 3s infinite, spinback 10s ease 13s infinite;
}
#loader4 .front {
background-color: #db6834;
}
#loader4 .back {
background-color: #3468db;
transform: rotateY(180deg);
}
/* -------------------------------------------------------- */
#loader5 {
float: left;
width: 80px;
height: 50px;
perspective: 1000px;
background-color: transparent;
}
#loader5 .inner {
animation: spin 10s ease 4s infinite, spinback 10s ease 14s infinite;
-webkit-animation: spin 10s ease 4s infinite, spinback 10s ease 14s infinite;
}
#loader5 .front {
background-color: #db5834;
}
#loader5 .back {
background-color: #3458db;
transform: rotateY(180deg);
}
/* -------------------------------------------------------- */
#loader6 {
float: left;
width: 80px;
height: 50px;
perspective: 1000px;
background-color: transparent;
}
#loader6 .inner {
animation: spin 10s ease 5s infinite, spinback 10s ease 15s infinite;
-webkit-animation: spin 10s ease 5s infinite, spinback 10s ease 15s infinite;
}
#loader6 .front {
background-color: #db4834;
}
#loader6 .back {
background-color: #3448db;
transform: rotateY(180deg);
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotateY(0deg);
}
16% {
-webkit-transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(180deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotateY(0deg);
}
16% {
-webkit-transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(180deg);
}
}
@-webkit-keyframes spinback {
0% {
-webkit-transform: rotateY(180deg);
}
16% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(0deg);
}
}
@keyframes spinback {
0% {
-webkit-transform: rotateY(180deg);
}
16% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(0deg);
}
}
<div id="loader">
<div id="loader1">
<div class="inner">
<div class="front">
</div>
<div class="back"> </div>
</div>
</div>
<div id="loader2">
<div class="inner">
<div class="front"> </div>
<div class="back"> </div>
</div>
</div>
<div id="loader3">
<div class="inner">
<div class="front"> </div>
<div class="back"> </div>
</div>
</div>
<div id="loader4">
<div class="inner">
<div class="front"> </div>
<div class="back"> </div>
</div>
</div>
<div id="loader5">
<div class="inner">
<div class="front"> </div>
<div class="back"> </div>
</div>
</div>
<div id="loader6">
<div class="inner">
<div class="front"> </div>
<div class="back"> </div>
</div>
</div>
</div>
为了让它更容易理解,我正在尝试应用 css flipcard 方法:
https://www.w3schools.com/howto/howto_css_flip_card.asp
在 div 上,以创建一种正在加载内容的外观...
动画只提供在正确的时间触发关键帧的时间,然后在关键帧中我旋转 div 并等待一段时间,直到其他 div 完成旋转。所以公式是 10 秒内有 6 个盒子,它会介于 (0% 到 100%) 之间,所以 (100/6 = 16,6) 我认为动画应该在动画时间的 16% 结束。
最佳答案
首先,我会简化您的代码并使用更少的 HTML/CSS。然后我会考虑只有一个动画,我将有两种状态。
动画将是:第一次翻转然后我们保持第一种颜色然后第二次翻转然后我们保持第二种颜色。分为12
个时隙 (1 + 5 + 1 + 5
) (1+5 = 6
div)
如果持续时间是S
,那么延迟应该是一个时隙的倍数S/12
。请注意,我在转换中使用了透视图以避免额外的元素:
#loader {
width: 240px;
height: 100px;
display: flex;
flex-wrap: wrap;
}
#loader>div {
width: calc(100%/3);
position: relative;
transform-style: preserve-3d;
animation: spin 6s linear var(--delay, 0s) infinite;
}
#loader>div:before,
#loader>div:after {
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
backface-visibility: hidden;
background-color: var(--front, #db9834);
}
#loader>div:after {
background-color: var(--back, #3498db);
transform: rotateY(180deg);
}
/* -------------------------------------------------------- */
#loader>div:nth-child(2) {
--front: #db8834;
--back: #3488db;
--delay: 0.5s;
}
#loader>div:nth-child(3) {
--front: #db7834;
--back: #3478db;
--delay: 1s;
}
#loader>div:nth-child(4) {
--front: #db6834;
--back: #3468db;
--delay: 1.5s;
}
#loader>div:nth-child(5) {
--front: #db5834;
--back: #3458db;
--delay: 2s;
}
#loader>div:nth-child(6) {
--front: #db4834;
--back: #3448db;
--delay: 2.5s;
}
@keyframes spin {
0% {
transform:perspective(500px) rotateY(0deg);
}
8.33%,
50%{
transform:perspective(500px) rotateY(180deg);
}
58.33% {
transform:perspective(500px) rotateY(0deg);
}
}
<div id="loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
有关perspective
和perspective()
之间区别的更多详细信息的相关问题
CSS 3d transform doesn't work if perspective is set in the end of property
perspective and translateZ moves diagonally
如果我们在旋转时改变 div 颜色而不是有两个元素,我们可以简化更多。应该在我们进行翻转的位置的一半位置(第一个和第六个)进行更改,没有任何过渡以产生幻觉:
#loader {
width: 240px;
height: 100px;
display: flex;
flex-wrap: wrap;
}
#loader>div {
width: calc(100%/3);
animation:
spin 6s linear var(--delay, 0s) infinite,
colors 6s linear var(--delay, 0s) infinite;
background-color: var(--front, #db9834);
}
/* -------------------------------------------------------- */
#loader>div:nth-child(2) {
--front: #db8834;
--back: #3488db;
--delay: 0.5s;
}
#loader>div:nth-child(3) {
--front: #db7834;
--back: #3478db;
--delay: 1s;
}
#loader>div:nth-child(4) {
--front: #db6834;
--back: #3468db;
--delay: 1.5s;
}
#loader>div:nth-child(5) {
--front: #db5834;
--back: #3458db;
--delay: 2s;
}
#loader>div:nth-child(6) {
--front: #db4834;
--back: #3448db;
--delay: 2.5s;
}
@keyframes spin {
0% {
transform:perspective(500px) rotateY(0deg);
}
8.33%,
50%{
transform:perspective(500px) rotateY(180deg);
}
58.33% {
transform:perspective(500px) rotateY(0deg);
}
}
@keyframes colors {
0%,4.15% {
background-color: var(--front, #db9834);
}
4.16% {
background-color: var(--back, #3498db);
}
54.15% {
background-color: var(--back, #3498db);
}
54.16% {
background-color: var(--front, #db9834);
}
}
<div id="loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
考虑到您希望具有相同的颜色深浅这一事实,可以使用过滤器进行另一种简化:
#loader {
width: 240px;
height: 100px;
display: flex;
flex-wrap: wrap;
}
#loader>div {
width: calc(100%/3);
animation:
spin 6s linear var(--delay, 0s) infinite,
colors 6s linear var(--delay, 0s) infinite;
background:
linear-gradient(#db9834 50%, #3498db 0);
background-size: 100% 200%;
}
/* -------------------------------------------------------- */
#loader>div:nth-child(2) {
filter: brightness(0.9);
--delay: 0.5s;
}
#loader>div:nth-child(3) {
filter: brightness(0.8);
--delay: 1s;
}
#loader>div:nth-child(4) {
filter: brightness(0.7);
--delay: 1.5s;
}
#loader>div:nth-child(5) {
filter: brightness(0.6);
--delay: 2s;
}
#loader>div:nth-child(6) {
filter: brightness(0.5);
--delay: 2.5s;
}
@keyframes spin {
0% {
transform:perspective(500px) rotateY(0deg);
}
8.33%,
50%{
transform:perspective(500px) rotateY(180deg);
}
58.33% {
transform:perspective(500px) rotateY(0deg);
}
}
@keyframes colors {
4.15% {
background-position: top;
}
4.16%,
54.15% {
background-position:bottom;
}
54.16% {
background-position: top;
}
}
<div id="loader">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
此结果与我使用随机过滤器的结果不完全相同,但您可以轻松尝试另一种过滤以获得所需的结果。
关于html - 纯 CSS 旋转动画在无限循环中损坏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56682474/
我有 3 个列表项,每 3 秒向上旋转一次。我正在使用 transformY 属性来做这件事。问题是,当它到达最后一个元素时,它会循环返回,从而产生重新开始的效果。 如何通过在最后一项之后继续向上旋转
我如何制作一个处理旋转的无限/重复世界,就像在这个游戏中一样: http://bloodfromastone.co.uk/retaliation.html 我通过具有这样的层次结构对我的旋转移动世界进
这个问题已经有答案了: Using explicitly numbered repetition instead of question mark, star and plus (4 个回答) 已关闭
程序说明: I have this program of mine which is intended to read every word from a file (large one) and t
while 循环应该比较这两个对象的 ibsn。正在比较的对象: list[0] = new ReadingMatter ("Words and Stuff", "9-082-1090-1");
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
我完全被屏蔽了。我尝试修改 C 中的“警报”信号,以便在秒数到期时读取一个简单的变量。我的代码如下: 在主要部分: int semnal; signal(SIGALRM, alarmHandle
我正在接受多行信息(字符串,直到我稍后解析它们)。例如: 1 5 0 2 9 6 2 9 1 我编写这段代码来分隔行,因为我将不得不以某种方式操作每一行。 Scanner scan = new Sca
我不熟悉 jQuery,并且我有多余的 jQuery 调用,我想将它们放入循环中。 $('.class1').on('click', function () { ... $('.class2').on
我有一个树结构,其中每个节点都有 5 个子节点,并且不允许超过 5 个。我希望以广度优先搜索的方式遍历这棵树。 现在我想使用广度优先搜索方式从选定的父节点计算空节点。 例如 如果给定的父节点为 1,则
目标/动机 我想写一个服务,它应该一直运行。但是当服务已经运行时,应该不可能再次启动该服务。 用例 用户 X 打开页面 myService.php 并通过单击页面上的按钮启动服务。之后关闭浏览器。一段
我正在尝试编译 shogun 工具箱,但遇到了这个错误 C:/shogun-3.0.0/shogun-3.0.0/src/shogun/../shogun/mathematics/Math.h
需要学校的 JavaScript 作业帮助,但不知道该怎么做,希望得到一些提示? 我们应该创建一个 6 面掷骰子程序,用户可以选择应该掷多少个骰子,最少 1 个和最多 5 个骰子。 所用骰子数量的总和
我在无限 ScrollView 中有 5 张图片。 因此,为了使 scrollView 无限/循环,我将图像定位如下: 5 1 2 3 4 5 1含义:最后一张图片第一张图片第二张图片.....最后一
我正在使用 ExTwitter库,并希望能够偶尔终止对流式 API 的调用以更改参数。 我当前的代码看起来像这样: for tweet #finished end 关于elixir - 如何中断(无
我想每 3 秒更改一次 div 的背景。这需要循环,因此一旦最后一个背景图像显示,它就会循环回到第一个背景图像,依此类推。我在这样做时遇到了麻烦。 我之前发过一篇文章,内容非常模糊,没有得到帮助。
我在做this教程,无法让我的页面正确加载。我不断在控制台中收到错误:[$rootScope:infdig]。 我对 Angular 很陌生,但从我读到的内容来看,我在某个地方有一个无限循环。我预计它
所以我试图创建一个无限的 asyncIterator/生成器。该代码应该为“for wait of”循环生成“Hello”和“Hi”,然后永远等待下一个值。问题是它不等待第三个值,也不在循环后打印 2
下图显示了我如何在 HTML5/JS 中制作无限背景滚动。我的连续背景由 X block Canvas 组成。我将在到达下一个 Canvas 之前立即渲染它,并释放上一个 Canvas。这里的问题是动
作为一个业余项目,我正在研究一些自制的素数生成问题,尝试编写一些不同的实现作为自学 C 和 C++ 的方法。当然,生成低素数的最快方法是已经拥有它们,所以我想着手建立一个硬盘素数列表数据文件。我想编写
我是一名优秀的程序员,十分优秀!