html - 移动多个对象的 CSS 动画
问题描述
我在这里的第一篇文章,我不知道我的代码有什么问题。我的猜测是选择器有问题,我不应该像以前那样使用 3 类。
我正在尝试制作动画:
- 正方形从左角开始
- 减少到 4 行
- 4 行向右形成 12 列
body {
align-items: center;
display: flex;
justify-content: center;
height: 100vh;
}
.mainContainer {
background: aliceblue;
height: 115px;
width: 355px;
position: relative;
}
.vertical {
background: black;
height: 25px;
width: 25px;
position: absolute;
animation-fill-mode: forwards;
animation-duration: 0.5s;
}
.horizontal {
background: black;
height: 25px;
width: 25px;
position: absolute;
animation-fill-mode: forwards;
animation-duration: 0.1s;
}
.vertical2 {
animation-name: v2;
}
.vertical3 {
animation-name: v3;
animation-delay: 0.5s;
}
.vertical4 {
animation-name: v4;
animation-delay: 1s;
}
.horizontal1 {
animation-name: h1;
animation-delay: 1.5s;
}
.horizontal2 {
animation-name: h2;
animation-delay: 1.6s;
}
.horizontal3 {
animation-name: h3;
animation-delay: 1.7s;
}
.horizontal4 {
animation-name: h4;
animation-delay: 1.8s;
}
.horizontal5 {
animation-name: h5;
animation-delay: 1.9s;
}
.horizontal6 {
animation-name: h6;
animation-delay: 2s;
}
.horizontal7 {
animation-name: h7;
animation-delay: 2.1s;
}
.horizontal8 {
animation-name: h8;
animation-delay: 2.2s;
}
.horizontal9 {
animation-name: h9;
animation-delay: 2.3s;
}
.horizontal10 {
animation-name: h10;
animation-delay: 2.4s;
}
.horizontal11 {
animation-name: h11;
animation-delay: 2.5s;
}
@keyframes v2 {
0% {
background-color: black;
top: 0px;
}
100% {
background-color: black;
top: 30px;
}
}
@keyframes v3 {
0% {
background-color: black;
top: 30px;
}
100% {
background-color: black;
top: 60px;
}
}
@keyframes v4 {
0% {
background-color: black;
top: 60px;
}
100% {
background-color: black;
top: 90px;
}
}
@keyframes h1 {
0% {
background-color: black;
left: 0px;
}
100% {
background-color: black;
left: 30px;
}
}
@keyframes h2 {
0% {
background-color: black;
left: 30px;
}
100% {
background-color: black;
left: 60px;
}
}
@keyframes h3 {
0% {
background-color: black;
left: 60px;
}
100% {
background-color: black;
left: 90px;
}
}
@keyframes h4 {
0% {
background-color: black;
left: 90px;
}
100% {
background-color: black;
left: 120px;
}
}
@keyframes h5 {
0% {
background-color: black;
left: 120px;
}
100% {
background-color: black;
left: 150px;
}
}
@keyframes h6 {
0% {
background-color: black;
left: 150px;
}
100% {
background-color: black;
left: 180px;
}
}
@keyframes h7 {
0% {
background-color: black;
left: 180px;
}
100% {
background-color: black;
left: 210px;
}
}
@keyframes h8 {
0% {
background-color: black;
left: 210px;
}
100% {
background-color: black;
left: 240px;
}
}
@keyframes h9 {
0% {
background-color: black;
left: 240px;
}
100% {
background-color: black;
left: 270px;
}
}
@keyframes h10 {
0% {
background-color: black;
left: 270px;
}
100% {
background-color: black;
left: 300px;
}
}
@keyframes h11 {
0% {
background-color: black;
left: 300px;
}
100% {
background-color: black;
left: 330px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Document</title>
</head>
<body>
<div class="mainContainer">
<div id="block1" class="vertical"></div>
<div id="block2" class="vertical vertical2"></div>
<div id="block3" class="vertical vertical3"></div>
<div id="block4" class="vertical vertical4"></div>
<div id="block5" class="horizontal horizontal1 vertical1"></div>
<div id="block6" class="horizontal horizontal1 vertical2"></div>
<div id="block7" class="horizontal horizontal1 vertical3"></div>
<div id="block8" class="horizontal horizontal1 vertical4"></div>
<div id="block9" class="horizontal horizontal2 vertical1"></div>
<div id="block10" class="horizontal horizontal2 vertical2"></div>
<div id="block11" class="horizontal horizontal2 vertical3"></div>
<div id="block12" class="horizontal horizontal2 vertical4"></div>
<div id="block13" class="horizontal horizontal3 vertical1"></div>
<div id="block14" class="horizontal horizontal3 vertical2"></div>
<div id="block15" class="horizontal horizontal3 vertical3"></div>
<div id="block16" class="horizontal horizontal3 vertical4"></div>
<div id="block17" class="horizontal horizontal4 vertical1"></div>
<div id="block18" class="horizontal horizontal4 vertical2"></div>
<div id="block19" class="horizontal horizontal4 vertical3"></div>
<div id="block20" class="horizontal horizontal4 vertical4"></div>
<div id="block21" class="horizontal horizontal5 vertical1"></div>
<div id="block22" class="horizontal horizontal5 vertical2"></div>
<div id="block23" class="horizontal horizontal5 vertical3"></div>
<div id="block24" class="horizontal horizontal5 vertical4"></div>
<div id="block25" class="horizontal horizontal6 vertical1"></div>
<div id="block26" class="horizontal horizontal6 vertical2"></div>
<div id="block27" class="horizontal horizontal6 vertical3"></div>
<div id="block28" class="horizontal horizontal6 vertical4"></div>
<div id="block29" class="horizontal horizontal7 vertical1"></div>
<div id="block30" class="horizontal horizontal7 vertical2"></div>
<div id="block31" class="horizontal horizontal7 vertical3"></div>
<div id="block32" class="horizontal horizontal7 vertical4"></div>
<div id="block33" class="horizontal horizontal8 vertical1"></div>
<div id="block34" class="horizontal horizontal8 vertical2"></div>
<div id="block35" class="horizontal horizontal8 vertical3"></div>
<div id="block36" class="horizontal horizontal8 vertical4"></div>
<div id="block37" class="horizontal horizontal9 vertical1"></div>
<div id="block38" class="horizontal horizontal9 vertical2"></div>
<div id="block39" class="horizontal horizontal9 vertical3"></div>
<div id="block40" class="horizontal horizontal9 vertical4"></div>
<div id="block41" class="horizontal horizontal10 vertical1"></div>
<div id="block42" class="horizontal horizontal10 vertical2"></div>
<div id="block43" class="horizontal horizontal10 vertical3"></div>
<div id="block44" class="horizontal horizontal10 vertical4"></div>
<div id="block45" class="horizontal horizontal11 vertical1"></div>
<div id="block46" class="horizontal horizontal11 vertical2"></div>
<div id="block47" class="horizontal horizontal11 vertical3"></div>
<div id="block48" class="horizontal horizontal11 vertical4"></div>
</div>
</body>
</html>
我的 .vertical2/.vertical3/.vertical4 “块”没有移动,您可以看到只有第一行向右移动。
如果可以用更少的代码完成类似的事情,我会很高兴获得任何帮助和建议。我对 CSS 很陌生。
解决方案
从我从您的代码片段中看到的,所有水平块都在相同的垂直高度上堆叠在一起。例如:
<div id="block5" class="horizontal horizontal1 vertical1"></div>
<div id="block6" class="horizontal horizontal1 vertical2"></div>
<div id="block7" class="horizontal horizontal1 vertical3"></div>
<div id="block8" class="horizontal horizontal1 vertical4"></div>
都放在同一个高度。这是因为您有两个相互冲突的 css 类与animation-name
. 即:
.horizontal2 {
animation-name: h2;
animation-delay: 1.6s;
}
.vertical4 {
animation-name: v4;
animation-delay: 1s;
}
这两个 css 类是冲突的,因此只有动画 h2 是从中选择的.horizontal2
,而不是同时使用两者。
一种方法是用自己的动画定义每个块。我将举一个例子,您可以对每个块使用它:
.vertical2.horizontal1 {
animation-name: v2h1;
}
@keyframes v2h1 {
0% {
background-color: black;
top: 0px;
left: 0px;
}
100% {
background-color: black;
top: 30px;
left: 30px;
}
}
推荐阅读
- javascript - 更新多个 useState 时的执行顺序
- javascript - 如何在javascript中将对象添加到特定的索引数组?
- android - 概述 TextInputLayout 中带有提示的错误
- python-3.x - 从具有移位索引的现有列表创建新列表
- c++ - 打印换行符时 C++ 中的意外输出
- python - 使用自制的“深拷贝”撤消功能?
- dependencies - 在 npm install 期间防止 ua-parser-js 安装
- sdk - Genexus Extensions SDK - 如何通过代码管理知识库团队开发?
- python - 在python上计算加权均匀系数?
- flutter - 如何在 Flutter 中使用 print() 登录发布模式?