gpt4 book ai didi

css - 动画不运行

转载 作者:太空宇宙 更新时间:2023-11-04 08:17:50 24 4
gpt4 key购买 nike

我正在尝试使用 CSS 动画制作加载屏幕。屏幕是 4 个不同的条形收缩和增长。我想将它们排列成正方形。我使用绝对定位来定位它们,但我想知道是否有更好的方法。我设法用显示和 float 完成了 3 个小节,但没有完成最后一个小节。

现在,动画根本没有运行。有人可以帮助我吗?

代码: https://codepen.io/ngmh/pen/gxewJK

HTML:

<div id="top"></div>
<div id="right"></div>
<div id="bottom"></div>
<div id="left"></div>

CSS:

#top{
background-color: red;
width: 100px;
height: 25px;
border-radius: 12.5px;
position: absolute;
left: 37.5px;
animation-name: loading-1;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#bottom{
background-color: yellow;
width: 100px;
height: 25px;
border-radius: 12.5px;
position: absolute;
top: 112.5px;
animation-name: loading-1;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#left{
background-color: blue;
width: 25px;
height: 100px;
border-radius: 12.5px;
animation-name: loading-2;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#right{
background-color: green;
width: 25px;
height: 100px;
border-radius: 12.5px;
position: absolute;
left: 112.5px;
top: 37.5px;
animation-name: loading-2;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes loading-1{
0%:{width: 100px;}
50%:{width: 10px;}
100%:{width: 100px;}
}
@keyframes loading-2{
0%:{height: 100px;}
50%:{height: 10px;}
100%:{height: 100px;}
}

最佳答案

@keyframes 规则中的百分号 % 之后不应有任何冒号 :

#top{
background-color: red;
width: 100px;
height: 25px;
border-radius: 12.5px;
position: absolute;
left: 37.5px;
animation-name: loading-1;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#bottom{
background-color: yellow;
width: 100px;
height: 25px;
border-radius: 12.5px;
position: absolute;
top: 112.5px;
animation-name: loading-1;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#left{
background-color: blue;
width: 25px;
height: 100px;
border-radius: 12.5px;
animation-name: loading-2;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#right{
background-color: green;
width: 25px;
height: 100px;
border-radius: 12.5px;
position: absolute;
left: 112.5px;
top: 37.5px;
animation-name: loading-2;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes loading-1{
0% {width: 100px;}
50% {width: 10px;}
100% {width: 100px;}
}
@keyframes loading-2{
0% {height: 100px;}
50% {height: 10px;}
100% {height: 100px;}
}
<div id="top"></div>
<div id="right"></div>
<div id="bottom"></div>
<div id="left"></div>


使用伪元素会使标记更小并且更易于维护。

outer 不使用绝对定位,将更好地与其余内容一起流动。

.outer {
position: relative;
}
.outer div,
.outer::before,
.outer::after,
.outer div::before,
.outer div::after {
content: '';
position: absolute;
border-radius: 12.5px;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.outer::before {
background-color: red;
width: 100px;
height: 25px;
left: 37.5px;
animation-name: loading-1;
}
.outer::after{
background-color: yellow;
width: 100px;
height: 25px;
top: 112.5px;
animation-name: loading-1;
}
.outer div::before{
background-color: blue;
width: 25px;
height: 100px;
animation-name: loading-2;
}
.outer div::after{
background-color: green;
width: 25px;
height: 100px;
left: 112.5px;
top: 37.5px;
animation-name: loading-2;
}
@keyframes loading-1{
0% {width: 100px;}
50% {width: 10px;}
100% {width: 100px;}
}
@keyframes loading-2{
0% {height: 100px;}
50% {height: 10px;}
100% {height: 100px;}
}
<div class="outer"><div></div></div>

关于css - 动画不运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45782138/

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