最近發(fā)現(xiàn)了一個(gè)很有趣的純 CSS3 動(dòng)畫效果，那就是小熊動(dòng)畫。

這個(gè)小熊動(dòng)畫可以用來(lái)做網(wǎng)站的 loading 動(dòng)畫，非常好看而且實(shí)用。

下面我來(lái)詳細(xì)介紹一下這個(gè)小熊動(dòng)畫的實(shí)現(xiàn)過(guò)程。

.bear {
position: absolute;
width: 100px;
height: 67px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: bear 2s linear infinite;
}
.bear .head {
width: 27px;
height: 27px;
border-radius: 50%;
background: #fff;
position: absolute;
top: 20%;
left: 20%;
animation: head 1s alternate infinite;
}
.bear .body {
width: 50px;
height: 40px;
background: #fff;
position: absolute;
top: 35%;
left: 0;
animation: body 1s alternate infinite;
}
.bear .arms {
width: 10px;
height: 30px;
background: #fff;
position: absolute;
top: calc(35% + 10px);
left: calc(50% - 5px);
transform-origin: top;
animation: arms 1s alternate infinite;
}
.bear .foot {
width: 10px;
height: 12px;
background: #fff;
position: absolute;
top: calc(50% + 10px);
left: calc(42% - 5px);
animation: foot 0.5s alternate infinite;
transform-origin: top center;
}
.bear .foot.right {
left: calc(58% - 5px);
}
@keyframes bear {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
20% {
transform: translate(-50%, -50%) rotate(-10deg);
}
40% {
transform: translate(-50%, -50%) rotate(10deg);
}
60% {
transform: translate(-50%, -50%) rotate(-10deg);
}
80% {
transform: translate(-50%, -50%) rotate(10deg);
}
100% {
transform: translate(-50%, -50%) rotate(0deg);
}
}
@keyframes head {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-45deg);
}
}
@keyframes body {
0% {
transform: translateY(0);
}
100% {
transform: translateY(12px);
}
}
@keyframes arms {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(20deg);
}
}
@keyframes foot {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}

這里的小熊動(dòng)畫是通過(guò)給不同的部分設(shè)置不同的 CSS 屬性值來(lái)實(shí)現(xiàn)的，如頭、身體、手臂、腳等部位。并且通過(guò)關(guān)鍵幀動(dòng)畫來(lái)控制運(yùn)動(dòng)的方式，讓小熊看起來(lái)更加逼真。

如果你有需要，可以將這個(gè)小熊動(dòng)畫應(yīng)用到自己的項(xiàng)目中，讓網(wǎng)站更加生動(dòng)有趣。