我正在做一個石頭剪刀布游戲。當我單擊一個按鈕時，我會在其中兩個影像執行“搖動”影片來模擬真實游戲中的手部動作。這一切都很好，但是右側的影像在影片期間水平翻轉，但在結束時翻轉回來。我最初將它翻轉，所以雙手面對面。
我想知道是否可以防止第二張影像在影片期間翻轉。
影片前的圖片
影片期間的影像
HTML
<div class="img-container">
<div class="player-container">
<p class="player-1-text">Player Options: </p>
<div class="player-img-container">
<button onclick="animation()"><img src="img/rock.jpg" alt="Rock Sign" width="100" height="100" class="img-space" id="player-img-main"></button>
<button><img src="img/paper.jpg" alt="Rock Sign" width="100" height="100" class="img-space"></button>
<button><img src="img/scissors.jpg" alt="Rock Sign" width="100" height="100" class="img-space"></button>
</div>
</div>
<div class="computer-container">
<div class="computer-img-container">
<img src="img/rock.jpg" alt="Rock Sign" width="100" height="100" class="img-space" id="computer-img-main">
<img src="img/paper.jpg" alt="Rock Sign" width="100" height="100" class="img-space" id="computer-img">
<img src="img/scissors.jpg" alt="Rock Sign" width="100" height="100" class="img-space" id="computer-img">
</div>
<p class="computer-text"> :Computer Options</p>
</div>
</div>
Javascript
function animation() {
const element = document.getElementById('player-img-main');
const element2 = document.getElementById('computer-img-main');
element.classList.remove('shake'); // reset animation
element2.classList.remove('shake'); // reset animation
void element.offsetWidth; // trigger reflow
void element2.offsetWidth; // trigger reflow
element.classList.add('shake'); // start animation
element2.classList.add('shake'); // start animation
}
CSS
#computer-img-main {
transform: scaleX(-1); /* Flip image horizontally */
}
.shake {
animation-name: shake;
animation-iteration-count: 1;
animation-duration: 2s;
animation-fill-mode: both;
}
@keyframes shake {
3%, 21%, 39%, 57%, 74%, 92% { transform: translateY(5px) }
6%, 24%, 42%, 60%, 77%, 95% { transform: translateY(3px) }
9%, 27%, 45%, 63%, 80%, 98% { transform: translateY(-5px) }
}
uj5u.com熱心網友回復：
您可以保持 HTML 結構原樣，并共享關鍵幀，但您需要記住縮放是什么（手部影像的翻轉）并確保在完成的任何變換中都是如此。
您可以為此使用 CSS 變數。例如，這里我們將播放器端的--s 設定為1，將計算機端的-1 設定為-1。然后在關鍵幀的變換中添加 scaleX(var(--s))。
#player-img-main {
--s: 1;
}
#computer-img-main {
transform: scaleX(-1);
--s: -1;
/* Flip image horizontally */
}
.shake {
animation-name: shake;
animation-iteration-count: 1;
animation-duration: 2s;
animation-fill-mode: both;
}
@keyframes shake {
3%,
21%,
39%,
57%,
74%,
92% {
transform: scaleX(var(--s)) translateY(5px)
}
6%,
24%,
42%,
60%,
77%,
95% {
transform: scaleX(var(--s)) translateY(3px)
}
9%,
27%,
45%,
63%,
80%,
98% {
transform: scaleX(var(--s)) translateY(-5px)
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/497984.html
標籤：javascript html css
上一篇：重構陣列元素的位置