CSS3小游戲--測(cè)試眼神

.box{
height: 50px;
width: 50px;
background-color: red;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: changeColor 2s infinite;
}
@keyframes changeColor{
0%{
background-color: red;
}
25%{
background-color: yellow;
}
50%{
background-color: green;
}
75%{
background-color: blue;
}
100%{
background-color: red;
}
}
.score{
position: absolute;
top: 10px;
right: 10px;
}

這是一個(gè)使用CSS3實(shí)現(xiàn)的小游戲，讓我們來測(cè)試一下自己的眼神吧！

游戲規(guī)則很簡(jiǎn)單，只需要點(diǎn)擊出現(xiàn)的小球就可以得分。小球的顏色每隔2秒會(huì)改變，最多可以得到10分。

代碼中首先定義了一個(gè)小球（box），使用了border-radius屬性使其呈現(xiàn)圓形。其中使用了絕對(duì)定位和transform屬性使其居中，并使用animation屬性實(shí)現(xiàn)小球顏色的變換。最后定義了一個(gè)得分的顯示位置（score）。

小球的出現(xiàn)則通過JavaScript實(shí)現(xiàn)，使用了Math.random()函數(shù)隨機(jī)生成小球的位置。點(diǎn)擊小球后，將得分加1，并且重新生成小球。

游戲結(jié)束后，將得分展示在頁面上，并提供重新開始的按鈕。

這個(gè)小游戲需要我們的眼球和反應(yīng)速度，希望大家可以在游戲中得到快樂！