資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 HTML、CSS 和 JavaScript 構建彈跳球？
在使用純 HTML、CSS 和 JavaScript 設計網頁時，程式設計師通常更喜歡開發高階 CSS 設計以使網站更具吸引力。如今，使用關鍵幀和其他技術建立動畫是最流行的技術之一。但是，我們也可以使用 JavaScript 程式碼建立動畫，例如彈跳球效果。這種方法使我們能夠更好地控制動畫。
本文將首先解釋如何使用 HTML 和 CSS 構建彈跳球。我們還將學習如何編寫 JavaScript 程式碼來實現類似的動畫。
使用關鍵幀建立彈跳球
使用純 HTML 程式碼製作動畫非常困難。相反，我們有 CSS，它為我們提供了多種執行不同動畫的技術。在 CSS 中設計動畫最流行的方法是使用關鍵幀。
但是，要建立彈跳球，我們必須開發一個登入來實現它。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<style>
bouncing {
display: flex;
flex-direction: row;
background-color: rgb(223, 210, 176);
align-items: center;
justify-content: center;
height: 50vh;
}
.bouncing-ul {
display: flex;
flex-direction: row;
}
.bouncing-ul li {
width: 40px;
height: 40px;
list-style: none;
background-color: rgb(55, 17, 108);
margin: auto 20px;
border-radius: 50%;
animation: bouncing 1s linear infinite alternate-reverse;
}
@keyframes bouncing {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-150px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<bouncing>
<ul class="bouncing-ul">
<li class="bouncing-li"></li>
</ul>
</bouncing>
</html>
HTML 程式碼使用 CSS 動畫建立彈跳球效果。建立一個具有定義高度和背景顏色的塊（彈跳類）。其內容（無序列表 bouncing-ul）在垂直和水平方向上居中對齊。球（bouncing-li 類）被建立為列表項，具有定義的寬度、高度、背景顏色、邊距和圓角，使其成為圓形。
動畫是使用 @keyframes 規則建立的，該規則定義了 CSS 屬性值隨時間的變化。動畫名為“bouncing”，持續 1 秒，具有線性計時函式和無限交替反向迭代計數。球體垂直移動，從其原始位置 (0%) 移動到其最高點 (-150px at 50%)，然後返回到其原始位置 (100%)。
如何使用 JavaScript 建立彈跳球效果
到目前為止，我們已經瞭解瞭如何僅使用 HTML 和 CSS 建立彈跳球效果。但是，有時我們可能希望使用 JavaScript 等程式語言而不是標記語言來執行相同的任務。JavaScript 可以訪問瀏覽器的視窗物件。因此，很容易定義與我們在 CSS 案例中定義的類似規則。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.ball {
position: absolute;
width: 50px;
height: 50px;
border-radius: 25px;
background-color: rgb(41, 66, 190);
}
body{
display: flex;
flex-direction: row;
justify-content: center;
}
</style>
</head>
<body>
<div class="ball"></div>
<script>
const ball = document.querySelector('.ball');
let y = 0;
let direction = 1;
let speed = 8;
setInterval(() => {
y = y + speed * direction;
if (y >= window.innerHeight/3 - 50) {
direction = -1;
}
if (y <= 0) {
direction = 1;
}
ball.style.top = y + 'px';
}, 20);
</script>
</body>
解釋
我們定義了一個名為 ball 的元素，我們使用 CSS 對其進行了自定義，使其成為一個圓形球體。在 script 標籤內，我們編寫了 javascript 程式碼，其中包含動畫的所有邏輯。
首先，我們定位了 ball 元素。接下來，我們定義了速度。在 2 秒內，球體上下移動。每當球體到達任一方向的最終目的地時，方向都會發生變化。
結論
在本文中，我們學習瞭如何使用 HTML、CSS 和 JavaScript 建立彈跳球效果動畫。我們瞭解瞭如何使用關鍵幀和 CSS 屬性來執行任務。我們瞭解瞭如何為單個和多個球建立彈跳球效果。我們建議讀者嘗試不同的方法來獲得類似的輸出。
2K+ 次瀏覽
