css动画石油 |css菜单鼠标悬停效果

/* 石油 */
.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);
}
/* 石油涌动 */
.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;
}
/* 石油流动 Animation */
@keyframes oil-flow {
0% {
transform: translate(-50%, 50%);
}
50% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-50%, 50%);
}
}

可以看到，大家通过CSS动画实现了石油在石油井里涌动的效果。这使得整个石油的场景更加生动，也更容易吸引人的注意力。