我正在使用 react 來渲染具有“wave”類的 span 元素。我希望跨度影片緩慢地擺動，但這并沒有發生。這是我的CSS：
@keyframes wave {
0% { transform: rotate(5deg); }
10% { transform: rotate(-5deg); }
20% { transform: rotate(5deg); }
30% { transform: rotate(-5deg); }
40% { transform: rotate(5deg); }
50% { transform: rotate(-5deg); }
60% { transform: rotate(5deg); }
100% { transform: rotate(5deg); }
}
span.wave {
animation: wave 5s infinite;
}
這是我的 jsx：
import React, { useState } from 'react';
import './App.css';
function App() {
const [count, incrementCount] = useState(0);
return (
<div>
<div id="buttonClass" className="centered">
<h1 className="noselect">You have</h1>
<input id="nameInput" placeholder="Clicked (edit me)" autoFocus autocomplete="off"></input>
<h1 className="noselect"><span className="wave">??</span> {count} times! <span className="wave">??</span></h1>
</div>
<div className="btnrow">
<button className="button1 noselect inrow" onClick={() => incrementCount(count 1)}> </button>
<button className="button1 noselect inrow" onClick={() => incrementCount(count - 1)}>-</button>
</div>
<div className="btnrow">
<button className="button2 noselect ten" onClick={() => incrementCount(count 10)}> 10</button>
<button className="button2 noselect ten" onClick={() => incrementCount(count - 10)}>-10</button>
<button className="button2 noselect ten" onClick={() => incrementCount(count 100)}> 100</button>
<button className="button2 noselect ten" onClick={() => incrementCount(count - 100)}>-100</button>
</div>
<div id="center">
<button className="button2 noselect" id="resetbtn" onClick={() => incrementCount(0)}>Reset Counter</button>
</div>
</div>
);
}
export default App;
跨度元素出現，但沒有影片。
uj5u.com熱心網友回復：
添加display: inline-block;. 行內元素的行為類似于文本，而塊元素的行為類似于容器。您不能旋轉文本字符，但可以旋轉它們的容器
span.wave {
display: inline-block;
animation: wave 5s infinite;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/338065.html
標籤：javascript css 反应