簡單的CSS關鍵幀動畫不起作用

我正在做一個簡單的CSS動畫示例，但它不運行。 Pl幫助別人！簡單的CSS關鍵幀動畫不起作用

<html> 
 
<head> 
 

 
<style> 
 

 
.dot{ 
 
    background: #e74c3c; 
 
    width: 16px; 
 
    height: 16px; 
 
    border-radius: 50%; 
 
    font-size: 10px; 
 
    animation: pulse 1s infinite; 
 

 
} 
 

 
@keyframes pulse{ 
 
\t 0% {box-shadow: 0 0 0 0em #c0392b;} 
 
\t 25% {box-shadow: 0 0 0 0.25em #c0392b;} 
 
\t 50% {box-shadow: 0 0 0 0.5em #c0392b;} 
 
\t 75% {box-shadow: 0 0 0 0.25em #c0392b;} 
 
\t 100% {box-shadow: 0 0 0 0.15em #c0392b;} 
 
} 
 
</style> 
 

 
</head> 
 

 
<body> 
 
<span class="dot"></span> 
 
</body> 
 

 
</html>

來源

2017-04-13 Deadpool

添加display: inline-block;到您的跨度，你是好去

.dot{ 
    background: #e74c3c; 
    width: 16px; 
    height: 16px; 
    border-radius: 50%; 
    font-size: 10px; 
    animation: pulse 1s infinite; 
    display: inline-block; 

}

來源

2017-04-13 06:49:38 Chiller

的default display of span is inline，從而爲你改變它display到block or inline-block它顯示你的動畫儘快建議。

span{ 
display:inline;/*Default*/ 
} 

.dot{ 
........... 
........... 
........... 
display:block;/*or inline-block*/ 
}

來源

2017-04-13 06:55:03 frnt

span是inline element所以你必須添加display:inline-block到.dot類，使其工作。

下面是工作示例 -

<html> 
 
<head> 
 

 
<style> 
 

 
.dot{ 
 
    background: #e74c3c; 
 
    width: 16px; 
 
    height: 16px; 
 
    border-radius: 50%; 
 
    font-size: 10px; 
 
    animation: pulse 1s infinite; 
 
    display:inline-block; 
 

 
} 
 

 
@keyframes pulse{ 
 
\t 0% {box-shadow: 0 0 0 0em #c0392b;} 
 
\t 25% {box-shadow: 0 0 0 0.25em #c0392b;} 
 
\t 50% {box-shadow: 0 0 0 0.5em #c0392b;} 
 
\t 75% {box-shadow: 0 0 0 0.25em #c0392b;} 
 
\t 100% {box-shadow: 0 0 0 0.15em #c0392b;} 
 
} 
 
</style> 
 

 
</head> 
 

 
<body> 
 
<span class="dot"></span> 
 
</body> 
 

 
</html>

來源

2017-04-13 06:58:55

簡單的CSS關鍵幀動畫不起作用

回答

相關問題