css动画创意 (css动画在线生成)

先放效果图：

完整动图是这样的：

看起来很酷，其实也不难，先在html里面定义图像的头，身体，以及脚：

<div class="man">
 <span class="head"></span>
 <span class="body"></span>
 <span class="feet"></span>
</div>

给body标签设置图像背景颜色以及高宽等基础信息：

body {
 margin: 0;
 height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 background: darkolivegreen;
}

设置整个人的颜色位置等样式：

.man {
 width: 12em;
 height: 33em;
 font-size: 10px;
 position: relative;
 color: white;
}

接下来在CSS里面设置三个部分的具体样式：

头部：

.head {
 position: absolute;
 width: 7em;
 height: 7em;
 background-color: currentColor;
 border-radius: 50%;
 right: 0;
}

身体：

.body {
 position: absolute;
 width: 6.2em;
 height: 14.4em;
 background-color: currentColor;
 top: 7em;
 border-radius: 100% 20% 0 0;
}

脚：

.feet::before,
.feet::after {
 content: '';
 position: absolute;
 width: 4em;
 height: 1.4em;
 background-color: white;
 bottom: 0;
 left: -1.6em;
 border-radius: 1em 80% 0.4em 0.4em;
 animation: feet-animation 2s ease-in-out infinite;
}
.feet::after {
 animation-delay: 1s;
}

最后，想要小人儿动起来，还需要设置头、身体以及脚的动画：

.head,
.body {
 animation: body-animation 4s ease-in-out infinite;
}
@keyframes body-animation {
 0%, 100% {
 transform: translateY(0) skewX(-2deg);
 }
 25%, 75% {
 transform: translateY(0.5em) skewX(0deg);
 }
 50% {
 transform: translateY(0) skewX(0deg);
 }
}

脚：

.feet::after {
 animation-delay: 1s;
}
@keyframes feet-animation {
 20% {
 transform: translateX(3.4em) translateY(-1.6em) rotate(4deg);
 }
 30% {
 transform: translateX(4.6em) translateY(-1em) rotate(0deg);
 }
 40% {
 transform: translateX(5.6em) translateY(-0.6em) rotate(4deg);
 }
 44% {
 transform: translateX(5.6em) translateY(0) rotate(0deg);
 }
}

就这样，一个有趣又孤独的行走的动画小人儿就出来啦，赶快试试吧。

需要本次代码的朋友可以留言或私信我获取哦。

另外，再展示一个很好看的CSS动画，一个炫酷的圆环旋转错觉动画：

动态效果图如下：