在CSS3中，我們可以通過偽元素和transform屬性來創(chuàng)建一個(gè)篩子的效果。

.dice{
width:100px;
height:100px;
position:relative;
}
.dice::before{
content:'';
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
border: 2px solid black;
border-radius:5px;
}
.dice::after{
content:'';
width:10px;
height:10px;
background-color:black;
border-radius:50%;
position:absolute;
top:45%;
left:45%;
}
.dice:hover::after{
top:55%;
}

解析：

首先我們創(chuàng)建一個(gè)div，設(shè)置它的寬度和高度為100px，并設(shè)置它的position屬性為relative，使得它的偽元素在它的基礎(chǔ)上進(jìn)行絕對(duì)定位。

接著，我們用before偽元素來創(chuàng)建一個(gè)長方形的底部，為了使這個(gè)長方形可以有圓角的效果，我們使用了border-radius屬性，并將它設(shè)置為5px。

然后，我們用after偽元素來創(chuàng)建篩子中間的黑色點(diǎn)，將它的border-radius屬性設(shè)置為50%讓它變成圓形。

最后，我們通過:hover偽類和top屬性來創(chuàng)建一個(gè)篩子中間點(diǎn)動(dòng)起來的效果。