色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

純css打地鼠

錢淋西2年前9瀏覽0評論

在前端開發(fā)中,我們經(jīng)常使用 CSS 來布局、美化網(wǎng)頁。但是, CSS 還可以用來實(shí)現(xiàn)一些有趣的小游戲。比如今天要介紹的純 CSS 打地鼠游戲。

下面是游戲界面的 HTML 代碼:

<div class="container">
<div class="hole">
<div class="mole"></div>
</div>
<div class="hole">
<div class="mole"></div>
</div>
<div class="hole">
<div class="mole"></div>
</div>
<div class="hole">
<div class="mole"></div>
</div>
<div class="hole">
<div class="mole"></div>
</div>
<div class="hole">
<div class="mole"></div>
</div>
</div>

每個地洞(hole)中都有一個地鼠(mole)。

接下來是 CSS 代碼,其中使用了偽類和動畫來實(shí)現(xiàn)地鼠的彈出和退回:

.hole {
width: 80px;
height: 80px;
position: relative;
overflow: hidden;
}
.mole {
width: 50px;
height: 50px;
background-color: #f4a460;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
transition: transform .5s ease-out;
}
.mole:before {
content: '';
display: block;
width: 25px;
height: 25px;
background-color: #f4a460;
position: absolute;
top: -60%;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
transition: top .2s ease-out, opacity .2s ease-out;
}
.mole:hover:before {
top: -110%;
opacity: 0;
}
.hole:hover .mole {
bottom: 50%;
transform: translate(-50%, -100%);
}
.hole:hover .mole:not(:hover) {
transition-delay: .35s;
transform: translate(-50%, 0);
}

CSS 選擇器中的偽類和偽元素用法可能有些難懂,但是通過實(shí)際運(yùn)用,我們可以更好地理解 CSS 的強(qiáng)大之處。

現(xiàn)在,我們已經(jīng)完成了一個簡單的打地鼠游戲。可在瀏覽器中打開 HTML 文件,測試一下效果吧!