我目前正在学习HTML/CSS3基础知识，我来到了过渡/动画章节。为了测试我对这个主题的理解，我给自己提出了一个挑战：创建一个由纯CSS动画制成的加载页面。
充电条由 5 个带有红色边框的白色矩形组成，每 0,1 变为红色表示它正在充电，在循环结束时再次变白并重复。
所以我首先尝试创建一个动画白色第一个矩形的背景颜色在 20s 动画的 0,5% 处变为红色，依此类推...... 它失败了，因为我不知道如何更改同一动画中的多个元素。 然后我认为，即使需要更多代码行，将每个矩形从状态"blanck"变为状态"red"也会更容易。
唯一的问题是，正如您在下面的代码中看到的那样，第一个矩形不会变红，而其他矩形会变红，我可以让它在最后倒退。
谁能给我一个关于如何使这个过渡工作的线索，然后给我一个关于如何让它与动画一起工作的提示/文档？
<!DOCTYPE html>
<html>
<head>
<title>Loading</title>
<link rel="stylesheet" type="text/css" href="loading.css">
</head>
<body>
<div class="big_div">
<div id="title"> <p class="main_title"> L O A D I N G</p> </div>
<div class="carre" id="premiers_carre"></div>
<div class="carre" id="deuxieme_carre"></div>
<div class="carre" id="troisieme_carre"></div>
<div class="carre" id="quatrieme_carre"></div>
<div class="carre" id="cinquieme_carre"></div>
</div>
</body>
</html>
p
{
font-family: "Press start 2P";
}
#title {
position: absolute;
left : 530px;
top : 280px ;
}
.big_div
{
width: 1250px;
height: 700px;
display :flex;
flex-direction : row;
justify-content: center;
align-items: center;
}
.carre
{
background-color: white;
border: 1px red solid;
width: 80px;
height: 10px;
margin-right: 5px;
}
#premier_carre
{
transition-property: background-color;
transition-delay: 0.1s;
}
#deuxieme_carre
{
transition-property: background-color;
transition-delay: 0.2s;
}
#troisieme_carre
{
transition-property: background-color;
transition-delay: 0.3s;
}
#quatrieme_carre
{
transition-property: background-color;
transition-delay: 0.4s;
}
#cinquieme_carre
{
transition-property: background-color;
transition-delay: 0.5s;
}
.big_div:hover #premier_carre
{
background-color: red;
}
.big_div:hover #deuxieme_carre
{
background-color: red;
}
.big_div:hover #troisieme_carre
{
background-color: red;
}
.big_div:hover #quatrieme_carre
{
background-color: red;
}
.big_div:hover #cinquieme_carre
{
background-color: red;
}
Bonjour ！你在代码中编写了id="premiers_carre"，在 CSS 中编写了#premier_carre。就这么简单。
以下是您的代码修复和改进，以采用更 DRY 的方法(您定义了一个类，那么为什么不使用它呢？
p
{
font-family: "Press start 2P";
}
#title {
position: absolute;
left : 530px;
top : 280px ;
}
.big_div
{
width: 1250px;
height: 700px;
display :flex;
flex-direction : row;
justify-content: center;
align-items: center;
}
.carre
{
background-color: white;
border: 1px red solid;
width: 80px;
height: 10px;
margin-right: 5px;
transition-property: background-color;
}
#premier_carre
{
transition-delay: 0.1s;
}
#deuxieme_carre
{
transition-delay: 0.2s;
}
#troisieme_carre
{
transition-delay: 0.3s;
}
#quatrieme_carre
{
transition-delay: 0.4s;
}
#cinquieme_carre
{
transition-delay: 0.5s;
}
.big_div:hover .carre
{
background-color: red;
}<!DOCTYPE html>
<html>
<head>
<title>Loading</title>
<link rel="stylesheet" type="text/css" href="loading.css">
</head>
<body>
<div class="big_div">
<div id="title"> <p class="main_title"> L O A D I N G</p> </div>
<div class="carre" id="premier_carre"></div>
<div class="carre" id="deuxieme_carre"></div>
<div class="carre" id="troisieme_carre"></div>
<div class="carre" id="quatrieme_carre"></div>
<div class="carre" id="cinquieme_carre"></div>
</div>
</body>
</html>好吧，这就是我到目前为止对您的问题的看法：
<!DOCTYPE html>
<html>
<head>
<link rel="fluid-icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Light_Blue_Circle.svg/1200px-Light_Blue_Circle.svg.png" title="HTML">
<link rel="mask-icon" href="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Light_Blue_Circle.svg/1200px-Light_Blue_Circle.svg.png" color="#0096ff">
<link rel="alternate icon" class="js-site-favicon" type="image/png" href="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Light_Blue_Circle.svg/1200px-Light_Blue_Circle.svg.png">
<link rel="icon" class="js-site-favicon" type="image/svg+xml" href="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Light_Blue_Circle.svg/1200px-Light_Blue_Circle.svg.png"><style>#splash {
position: absolute; width: 100%; height: 100%; top: 0; left: 0;
display: flex; align-items: center; justify-content: center;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: @keyframes loadingColorChange;
}
.tw-loaded #splash, #splash-content { display: none; }
#splash[splash-theme="dark"] { background-color: #303030; color: #303030; }
#splash-spinner:after {
content: " "; display: block; width: 64px; height: 64px;
border-radius: 50%; border: 6px solid; border-color: currentColor transparent currentColor transparent;
animation: splash-spinner 1s linear infinite;
}
@keyframes splash-spinner {
0% { transform: rotate(0deg); }
50% { transform: rotate(180deg); }
100% { transform: rotate(360deg); }
}
body {
animation-name: bgColorChange;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-delay: none;
animation-name: loadingColorChange;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-delay: none;
}
@keyframes bgColorChange {
0% { background-color: #ea4335; }
12.5% { background-color: #fbbc05; }
25% { background-color: #34a853; }
37.5% { background-color: #4285f4; }
50% { background-color: #34a853; }
62.5% { background-color: #fbbc05; }
75% { background-color: #fbbc05; }
100% { background-color: #ea4335; }
}
@keyframes loadingColorChange {
0% { color: #4285f4; }
12.5% { color: #34a853; }
25% { color: #fbbc05; }
37.5% { color: #ea4335; }
50% { color: #fbbc05; }
62.5% { color: #34a853; }
100% { color: #4285f4; }
}
</style><link rel="dns-prefetch" href="https://trampoline.turbowarp.org/"><link rel="dns-prefetch" href="https://projects.scratch.mit.edu/"><link rel="dns-prefetch" href="https://assets.scratch.mit.edu/"></head><body><div id="splash" aria-hidden="true"><div id="splash-content"><div id="splash-spinner"></div></div></div><script>(function() {
document.querySelector('#splash-content').style.display = 'block';
try {var localTheme = localStorage.getItem('tw:theme');} catch (e) {}
if (localTheme ? localTheme === 'dark' : window.matchMedia('(prefers-color-scheme: dark)').matches) document.querySelector('#splash').setAttribute('splash-theme', 'dark');
})();</script><div id="app">Loading...</div><script src="https://turbowarp.org/js/vendors~addon-settings~credits~editor~embed~fullscreen~player.57d02a22479dd55504bc.js"></script><script src="https://turbowarp.org/js/vendors~editor~embed~fullscreen~player.2ebfbf3346f8d17ad60d.js"></script><script src="https://turbowarp.org/js/addon-settings~addons~editor~fullscreen~player.976423b27ac04efde22e.js"></script><script src="https://turbowarp.org/js/editor~embed~fullscreen~player.d227a5ae0c7b2012a7a2.js"></script><script src="https://turbowarp.org/js/player.1fd251802eabb68ba5fe.js"></script></body>
</body>
</html>