当我使用焦点代码时，为什么CSS动画不起作用？[副本]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
box-sizing: border-box;
background-color: teal;
}
html{
font-size: 2rem;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
.btn{
background-color: rgb(0, 204, 255);
color: rgb(247, 247, 247);
border: none;
outline: none;
font-size: 1rem;
border-radius: 5em;
padding-left:.5em;
padding-right: .5em;
padding-top:.5em;
padding-bottom: .5em;
cursor: pointer;
}
.btn:focus{
animation:kac_git 500ms ease-in-out;
}
@keyframes kac_git {
33%{
transform: translate(100px,50px) rotate(30deg) scale(.9);
}
66%{
transform: translate(0px,25px) rotate(90deg) scale(.75);
}
100%{
transform: translate(-100px,-75px) rotate(200deg) scale(0);
}
}
</style>
</head>
<body>
<div class="btn">üzerime gel</div>
</body>
</html>
嗨，我是css的新手，我的代码的“.btn：focus”部分不工作，我不明白为什么不工作。我试过其他编译器，但没有发现错误。
顺便说一下，我肯定我的代码。我的代码的其他部分是正确的，他们是工作的。你能帮帮我吗？
共有2个答案
.btn:focus{
animation:kac_git 500ms ease-in-out;
当你使用这个500ms时，我想你使用这个计时持续时间
你的CSS没有问题。只是，您不能通过按tab键来通常聚焦div。要告诉浏览器div可以被聚焦，您需要添加一个tabindex为0。
注意：这里为了使它可以聚焦，我添加了一个0。但它也可以是一个正值。非负tabindex表示元素应被聚焦的顺序。负tabindex可通过JS聚焦。有关mdn中tabindex的详细信息
null
*{
box-sizing: border-box;
background-color: teal;
}
html{
font-size: 2rem;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
.btn{
background-color: rgb(0, 204, 255);
color: rgb(247, 247, 247);
border: none;
outline: none;
font-size: 1rem;
border-radius: 5em;
padding-left:.5em;
padding-right: .5em;
padding-top:.5em;
padding-bottom: .5em;
cursor: pointer;
}
.btn:focus {
animation: kac_git 500ms ease-in-out;
}
@keyframes kac_git {
33%{
transform: translate(100px,50px) rotate(30deg) scale(.9);
}
66%{
transform: translate(0px,25px) rotate(90deg) scale(.75);
}
100%{
transform: translate(-100px,-75px) rotate(200deg) scale(0);
}
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="btn" tabindex="0">üzerime gel</div>
</body>
</html>-
问题内容： 我正在尝试编写关于弹跳球的代码，但是我仍然沉迷于如何 使弹跳球。该代码似乎是正确的，日食没有错误消息 ，但是球还是没有动。任何帮助/提示表示赞赏。 这是我的代码： 问题答案： 基本上，什么都没有移动。 每次滴答作响，您要做的就是重新粉刷。 您需要将移动逻辑移至已注册的方法Timer 更像… 这样，每次Timer打勾时，您都在相应地更新球的位置… 更新了工作示例 我做了两个更改。我将设置
-
还不起作用。所以我放弃链接，我只是编码：
-
我想了两个小时，为什么这段代码不能产生预期的结果。如果我输入3个整数，比如3、4和5，它应该给出所有27个可能的和（假设数字可以是正的、负的或零） 因此，它应该产生以下内容： -3-4-5=-12 -3-4 0 = -7 -4-4 5=3 等等
-
我正在工作的css动画过渡。我有我的div id mybus。它的位置是相对的。它是多个divs位置相对的容器。我正在尝试移动mybus，它是所有其他div的容器，使用动画转换：translateX（）。不是沃金。（问题是，动画时位置重要吗？）我单独地将transform：rotate（）动画应用到div类车轮（它也在mybus内部）中，效果很好。（我没有包含这部分代码）如果需要，我可以给出更多关
-
问题内容： 我有一个嵌套的flexbox布局（使用bootstrapv4），可根据横向/纵向模式更改方向。第一层（由flexbox使用该属性放置）包含5个用作按钮的图标。我无法在这些图标上正常使用该属性。 如果我不使用属性，则图标将按照自然顺序进行布局；但是，如果我尝试使用该属性对其进行布局，则无法正常工作。在代码中，（）应该是最后一个元素。不是。我可以通过更改源中的顺序来获得所需的顺序。但是，我