小黄人动画css代码
时间: 2024-05-31 09:05:31 浏览: 14
小黄人动画是一个非常有趣的CSS动画,可以通过CSS3中的一些特性来实现。以下是一个基本的小黄人动画的CSS代码:
```css
/* 设置小黄人动画的容器 */
.minion {
position: relative;
width: 250px;
height: 250px;
}
/* 设置小黄人的身体 */
.minion .body {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellow;
}
/* 设置小黄人的眼睛 */
.minion .eye {
position: absolute;
top: 30%;
left: 25%;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: white;
}
/* 设置小黄人眼睛里的黑色部分 */
.minion .eye::before {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background-color: black;
}
/* 设置小黄人眼睛的另一只 */
.minion .eye.right {
left: auto;
right: 25%;
}
/* 设置小黄人的嘴巴 */
.minion .mouth {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 20px;
border-radius: 0px 0px 20px 20px;
border-bottom: solid black 3px;
}
/* 设置小黄人的带子 */
.minion .goggles {
position:absolute;
top:-10px;
left:-10px;
width:120px;
height:120px;
border-radius:50%;
border:10px solid #2D2D2D;
background-color:white;
}
/* 设置小黄人的带子上面的金属部分 */
.minion .goggles::before {
content:"";
display:block;
position:absolute;
top:-8px;
left:-8px;
width:10px;
height:10px;
border-radius:50%;
background-color:#B8B8B8;
}
/* 设置小黄人的带子下面的金属部分 */
.minion .goggles::after {
content:"";
display:block;
position:absolute;
bottom:-8px;
right:-8px;
width:10px;
height:10px;
border-radius:50%;
background-color:#B8B8B8
}
/* 定义小黄人动画的关键帧 */
@keyframes rotate {
from { transform : rotate(0deg); }
to { transform : rotate(360deg); }
}
/* 设置小黄人动画 */
.minion:hover .goggles,
.minion:hover .eye::before {
animation-name: rotate; /* 使用刚才定义的关键帧 */
animation-duration:2s; /* 持续时间为2秒 */
animation-timing-function: linear; /* 时间函数为线性 */
animation-iteration-count: infinite; /* 循环无限次 */
}
```