CSS 光盤(pán)制成虛擬光盤(pán)

在網(wǎng)頁(yè)設(shè)計(jì)中，虛擬光盤(pán)的制作對(duì)于營(yíng)造高端、科技感十分重要。虛擬光盤(pán)一般通過(guò) CSS 實(shí)現(xiàn)，這就需要設(shè)計(jì)師尤其關(guān)注 CSS 樣式。

/* CSS 樣式相關(guān) */
/*首先定義發(fā)光的圓圈*/
.circular-light {
position: relative;
margin: 0 auto;
width: 10px;
height: 10px;
background-color: transparent;
border-radius: 50%;
box-shadow: 0px 0px 10px #2870EE;
animation: pulse 1s infinite;
}
/*定義發(fā)光的動(dòng)畫(huà)*/
@keyframes pulse {
0% {
box-shadow: 0px 0px 0px #2870EE;
}
100% {
box-shadow: 0px 0px 10px #2870EE;
}
}
/*定義虛擬光盤(pán)的樣式*/
.virtual-cd {
width: 200px;
height: 200px;
}
/*定義虛擬光盤(pán)的圓心*/
.virtual-cd .center-circle {
position: relative;
width: 40px;
height: 40px;
margin: 0 auto;
top: calc(50% - 20px);
background-color: #d5d5d5;
border-radius: 50%;
}
/*定義光盤(pán)的邊框*/
.virtual-cd .cd-border {
position: relative;
width: 190px;
height: 190px;
margin: 0 auto;
top: calc(50% - 95px);
border-radius: 50%;
border: 5px solid #d5d5d5;
}
/*定義光盤(pán)的內(nèi)容物*/
.virtual-cd .cd-content {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto;
top: calc(50% - 60px);
background-color: #f4f4f4;
border-radius: 50%;
border: 5px solid #d5d5d5;
}

制作虛擬光盤(pán)，最關(guān)鍵的就是 CSS 樣式的定義。設(shè)計(jì)者需要定義發(fā)光的圓圈，即發(fā)布組件的核心之一。當(dāng)然，還要定義虛擬光盤(pán)的樣式、圓心、邊框和內(nèi)容物等內(nèi)容。通過(guò)以上代碼，我們可以輕松制作出逼真的虛擬光盤(pán)，進(jìn)而為網(wǎng)頁(yè)增添高端科技感。