介绍 & lt; div类=癿an"比;
& lt;跨类=癶ead"祝辞& lt;/span>
& lt;跨类=癰ody"祝辞& lt;/span>
& lt;跨类=癴eet"祝辞& lt;/span>
& lt;/div> 身体{
保证金:0;
身高:100 vh;
显示:flex;
对齐项目:中心;
justify-content:中心;
背景:径向渐变(浅灰色20%,烟白);
} 。男人{
宽度:12 em;
高度:33 em;
字体大小:10 px;
位置:相对;
} 。男人{
颜色:白色;
} 。头{
位置:绝对的;
宽度:7他们;
高度:7他们;
background - color: currentColor;
这个特性:50%;
右:0;
} 。身体{
位置:绝对的;
宽度:6.2 em;
高度:14.4 em;
background - color: currentColor;
上图:7他们;
border - radius: 100% 0 0 20%;
} .feet::,
{后.feet::
内容:& # 39;& # 39;;
位置:绝对的;
宽度:4 em;
高度:1.4 em;
背景颜色:白色;
底部:0;
左:-1.6 em;
0.4 em 0.4 em border - radius: 1 em 80%;
} 。男::{之前
内容:& # 39;& # 39;;
位置:绝对的;
宽度:12 em;
高度:0.8 em;
background - color: rgba (0, 0, 0, 0.1);
下:-0.2 em;
左:3他们;
这个特性:50%;
} .feet::,
{后.feet::
动画:feet-animation 2 s ease-in-out无限;
}
{后.feet::
animation-delay: 1;
}
@keyframes feet-animation {
20% {
变换:translateX (3.4 em) translateY (-1.6 em)旋转(4度);
}
30% {
变换:translateX (4.6 em) translateY (1 em)旋转(0度);
}
40% {
变换:translateX (5.6 em) translateY (-0.6 em)旋转(4度);
}
44% {
变换:translateX (5.6 em) translateY(0)(0度)旋转;
}
} .head,
.body {
动画:body-animation 4 s ease-in-out无限;
}
@keyframes body-animation {
0%、100% {
变换:translateY (0) skewX(2度);
}
25%、75% {
变换:translateY (0.5 em) skewX(0度);
}
50% {
变换:translateY (0) skewX(0度);
}
} 。男::{之前
动画:shadow-animate 4 s ease-in-out无限;
}
@keyframes shadow-animate {
0%、50%、100% {
变换:规模(1);
}
25%、75% {
变换:规模(1.15);
}
}
使用纯CSS实现一个人独自行走的动画效果?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
效果预览
源代码下载https://github.com/comehope/front-end-daily-challenges
代码解读
定义dom,容器中包含3个元素,分别代表头,身体和脚:
居中显示:
定义容器尺寸:
定义主色:
画出头部:
画出身体:
画出脚,现在只能看到一只脚,是因为两只脚重叠在一起,一会儿动起来时就能看到两只脚了:
用伪元素画出阴影:
接下来增加动画效果。
增加行走的动画效果,并使两只脚的动画时间交错:
增加头和身体起伏的动画效果:
增加阴影面积随身体运动而变化的动画效果:
感谢各位的阅读!看完上述内容,你们对使用纯CSS实现一个人独自行走的动画效果大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注行业资讯频道。
