<!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"我的一部分代码不工作，我不明白为什么不工作。我尝试了其他编译器，但没有发现错误。
顺便说一下，我确信我的代码。我的代码的其他部分没有错误，他们正在工作。你能帮我吗?
你的css没有问题。它只是，你不能按Tab键正常聚焦div。为了告诉浏览器div可以被聚焦，您需要添加一个0的tabindex。
注意:这里为了使它可对焦，我添加了一个0。但它也可以是正数。非负tabindex表示元素应该集中的顺序。负tabindex通过JS可聚焦。mdn中tabindex的更多信息
*{
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>.btn:focus{
animation:kac_git 500ms ease-in-out;
当你使用这个500ms时，我认为你使用这个计时持续时间