標(biāo)題：用 CSS 實(shí)現(xiàn)兩個(gè)小球的交互效果
介紹：本文將介紹如何使用 CSS 來創(chuàng)建兩個(gè)小球的交互效果。小球是一種常見的網(wǎng)頁(yè)元素，用于顯示動(dòng)態(tài)內(nèi)容和提供視覺吸引力。本文將介紹如何使用 CSS 過渡和動(dòng)畫來創(chuàng)建兩個(gè)小球的交互效果。
1. 創(chuàng)建一個(gè)包含兩個(gè)小球的 HTML 元素。
```html
<div class="小球1"></div>
<div class="小球2"></div>
2. 為每個(gè)小球添加一個(gè) CSS 類。
```css
.小球1 {
width: 20px;
height: 20px;
background-color: red;
margin: 5px;
transition: all 0.3s ease;
.小球2 {
width: 20px;
height: 20px;
background-color: blue;
margin: 5px;
transition: all 0.3s ease;
3. 為每個(gè)小球添加一個(gè)事件監(jiān)聽器，以便在小球移動(dòng)時(shí)觸發(fā)相應(yīng)的事件。
```html
<div class="小球1"></div>
<div class="小球2"></div>
<script>
const 小球1 = document.querySelector('.小球1');
const 小球2 = document.querySelector('.小球2');
小球1.addEventListener('click', (event) => {
小球2.style.transform = 'scale(1.1)';
});
小球2.addEventListener('click', (event) => {
小球1.style.transform = 'scale(1.1)';
});
</script>
4. 為小球添加動(dòng)畫，以便它們看起來在交互。
```css
.小球1 {
width: 20px;
height: 20px;
background-color: red;
margin: 5px;
transition: all 0.3s ease;
.小球2 {
width: 20px;
height: 20px;
background-color: blue;
margin: 5px;
transition: all 0.3s ease;
.小球1 {
transform: translateX(-50%) scale(1.1);
.小球2 {
transform: translateX(50%) scale(1.1);
5. 完成交互效果。
這是一個(gè)簡(jiǎn)單的示例，可以根據(jù)需要進(jìn)行修改和擴(kuò)展。通過使用 CSS 過渡和動(dòng)畫，可以輕松創(chuàng)建兩個(gè)小球的交互效果，從而使網(wǎng)頁(yè)更加美觀和交互性。