我正在為重啟按鈕創建一個基本的 CSS 影片。按鈕基本上會無限縮小和增長。這是一個石頭剪刀布游戲。我只是將相關代碼放在這里。Idk 為什么影片不起作用。看一下 html 和 CSS 代碼。
<div id="gameOver" class="gameOver">
<p id="finalResult">Game Over! You Lost/Won</p>
<button id="restartButton">Restart</button>
</div>
CSS：
#restartButton {
width: 17%;
height: 100px;
cursor: pointer;
color:rgb(255, 197, 249);
font-size: 3.5em;
border-style: solid;
border-width: 5px;
border-color: white;
background-color: rgb(42, 40, 40);
border-radius: 35px;
transition: 0.4s;
animation-name: example 5s infinite;
}
@keyframes example {
from {height: 100px; width: 17%;}
to {height: 80px; width: 14%;}
}
#restartButton:hover {
transition: 0.4s;
border-radius: 75px;
color: rgb(42, 40, 40);
background-color: rgb(255, 197, 249);
}
uj5u.com熱心網友回復：
animation-name只設定影片的名稱。animation是幾個屬性的簡寫。
#restartButton {
width: 17%;
height: 100px;
cursor: pointer;
color: rgb(255, 197, 249);
font-size: 3.5em;
border-style: solid;
border-width: 5px;
border-color: white;
background-color: rgb(42, 40, 40);
border-radius: 35px;
transition: 0.4s;
animation: example 5s infinite;
}
@keyframes example {
from {
height: 100px;
width: 17%;
}
to {
height: 80px;
width: 14%;
}
}
#restartButton:hover {
transition: 0.4s;
border-radius: 75px;
color: rgb(42, 40, 40);
background-color: rgb(255, 197, 249);
}<div id="gameOver" class="gameOver">
<p id="finalResult">Game Over! You Lost/Won</p>
<button id="restartButton">Restart</button>
</div>uj5u.com熱心網友回復：
#restartButton {
width: 17%;
height: 100px;
cursor: pointer;
color:rgb(255, 197, 249);
font-size: 3.5em;
border-style: solid;
display:block;
border-width: 5px;
border-color: white;
background-color: rgb(42, 40, 40);
border-radius: 35px;
transition: 0.4s;
transition-property: transform;
transform: scale(1);
transition: 0.4s all ease-in-out;
}
#restartButton:hover {
border-radius: 75px;
color: rgb(42, 40, 40);
background-color: rgb(255, 197, 249);
animation: example 5s infinite;
}
@keyframes example {
from {
transform: scale(.7);
}
to {
transform: scale(20);
}
}<div id="gameOver" class="gameOver">
<p id="finalResult">Game Over! You Lost/Won</p>
<button id="restartButton">Restart</button>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/521019.html