石油是當(dāng)今世界上最重要的能源之一，我們每天的生活都離不開(kāi)它。但如果只是研究石油本身，會(huì)顯得過(guò)于呆板和枯燥。今天，我們來(lái)利用CSS動(dòng)畫，讓石油變得更加有趣。

/* 石油 */
.oil {
width: 100px;
height: 100px;
background-color: #000;
border-radius: 50%;
position: relative;
overflow: hidden;
}
/* 石油井 */
.oil .well {
width: 10px;
height: 30px;
border: 2px solid #f6f6f6;
background-color: #444;
position: absolute;
bottom: 0;
left: 45%;
transform: rotate(-45deg);
}
/* 石油涌動(dòng) */
.oil::before {
content: '';
width: 40px;
height: 40px;
background-color: #f6f6f6;
border-radius: 50%;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
animation: oil-flow 4s infinite;
}
/* 石油流動(dòng) Animation */
@keyframes oil-flow {
0% {
transform: translate(-50%, 50%);
}
50% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-50%, 50%);
}
}

可以看到，我們通過(guò)CSS動(dòng)畫實(shí)現(xiàn)了石油在石油井里涌動(dòng)的效果。這使得整個(gè)石油的場(chǎng)景更加生動(dòng)，也更容易吸引人的注意力。