CSS怎樣實現吃豆豆呢？我們可以通過以下方式來實現：

/*創建小球的樣式*/
.ball {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: yellow;
position: absolute;
top: 100px;
left: 50px;
}
/*創建地圖的樣式*/
.map {
position: relative;
width: 480px;
height: 520px;
background-color: black;
}
/*添加鍵盤事件*/
document.onkeydown = function(event) {
var ball = document.querySelector('.ball');
var ballTop = parseInt(ball.style.top);
var ballLeft = parseInt(ball.style.left);
if (event.keyCode == 38) { //上
ball.style.top = (ballTop - 20) + 'px';
} else if (event.keyCode == 40) { //下
ball.style.top = (ballTop + 20) + 'px';
} else if (event.keyCode == 37) { //左
ball.style.left = (ballLeft - 20) + 'px';
} else if (event.keyCode == 39) { //右
ball.style.left = (ballLeft + 20) + 'px';
}
}
/*添加豆子*/
for (var i = 0; i < 10; i++) {
var map = document.querySelector('.map');
var bean = document.createElement('div');
bean.className = 'bean';
map.appendChild(bean);
bean.style.top = (Math.floor(Math.random() * 480) + 20) + 'px';
bean.style.left = (Math.floor(Math.random() * 520) + 20) + 'px';
}
/*吃豆子*/
var beans = document.querySelectorAll('.bean');
for (var j = 0; j < beans.length; j++) {
beans[j].onclick = function() {
this.parentNode.removeChild(this);
}
}

以上便是一個簡單的CSS實現吃豆豆的方法，你可以自行通過改變樣式或者改變鍵盤事件的代碼來實現更加豐富的效果。