我正在制作一个简单的 CSS 动画示例，但它无法运行。请帮助某人!
<html>
<head>
<style>
.dot{
background: #e74c3c;
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 10px;
animation: pulse 1s infinite;
}
@keyframes pulse{
0% {box-shadow: 0 0 0 0em #c0392b;}
25% {box-shadow: 0 0 0 0.25em #c0392b;}
50% {box-shadow: 0 0 0 0.5em #c0392b;}
75% {box-shadow: 0 0 0 0.25em #c0392b;}
100% {box-shadow: 0 0 0 0.15em #c0392b;}
}
</style>
</head>
<body>
<span class="dot"></span>
</body>
</html>最佳答案
将 display: inline-block; 添加到你的 span 中，你就可以开始了
.dot{
background: #e74c3c;
width: 16px;
height: 16px;
border-radius: 50%;
font-size: 10px;
animation: pulse 1s infinite;
display: inline-block;
}
关于html - 简单的 CSS 关键帧动画不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43385290/