介绍 & lt;图类=癱ontainer"比;
& lt;跨类=癵irl"祝辞& lt;/span>
类& lt; p=癰oys"祝辞
& lt; span> & lt;/span>
& lt; span> & lt;/span>
& lt; span> & lt;/span>
& lt; span> & lt;/span>
& lt;/p>
& lt;/figure> 身体{
保证金:0;
身高:100 vh;
显示:flex;
对齐项目:中心;
justify-content:中心;
} 。容器{
宽度:8 em;
身高:1 em;
字体大小:35 px;
显示:flex;
justify-content:之间的空间;
} 。集装箱跨越{
宽度:1 em;
身高:1 em;
边界:1 px冲黑;/*辅助线*/}
.boys {
宽度:6 em;
显示:flex;
justify-content:之间的空间;
} 。容器跨度::{之前
内容:& # 39;& # 39;;
位置:绝对的;
宽度:继承;
高度:继承;
这个特性:15%;
不必:0 0 0.2 em rgba (0, 0, 0, 0.3);
}
{前.girl::
background - color: hotpink;
}
{前.boys跨度::
background - color: dodgerblue;
} 。男孩跨度:nth-child (1):: {
过滤器:亮度(1);
}
之前.boys跨度:nth-child (2): {
过滤器:亮度(1.15);
}
之前.boys跨度:nth-child (3): {
过滤器:亮度(1.3);
}
之前.boys跨度:nth-child (4): {
过滤器:亮度(1.45);
} 。集装箱跨越{
宽度:1 em;
身高:1 em;
——时间:3 s;
}
.girl {
动画:幻灯片var(——持续时间)ease-in-out无限;
}
@keyframes幻灯片{
从{
变换:translateX (0);
过滤器:亮度(1);
}
,{
变换:translatex (calc (8 em - (1 em * 1.25)));
过滤器:亮度(1.45);
}
} 。男孩跨度{
动画:var(持续时间)ease-in-out无限;
}
.boys跨度:nth-child (1) {
animation-name: jump-off-1;
}
@keyframes jump-off-1 {
0%、15% {
变换:旋转(0度);
}
35%、100% {
transform-origin: -50%中心;
变换:旋转(-180度);
}
} 。男孩跨度:nth-child (2) {
animation-name: jump-off-2;
}
.boys跨度:nth-child (3) {
animation-name: jump-off-3;
}
.boys跨度:nth-child (4) {
animation-name: jump-off-4;
}
@keyframes jump-off-2 {
0%、30% {
变换:旋转(0度);
}
50%、100% {
transform-origin: -50%中心;
变换:旋转(-180度);
}
}
@keyframes jump-off-3 {
0%、45% {
变换:旋转(0度);
}
65%、100% {
transform-origin: -50%中心;
变换:旋转(-180度);
}
}
@keyframes jump-off-4 {
0%、60% {
变换:旋转(0度);
}
80%、100% {
transform-origin: -50%中心;
变换:旋转(-180度);
}
}
这篇文章给大家分享的是有关使用纯CSS实现方块跳跃的动画的方法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
效果预览
源代码下载https://github.com/comehope/front-end-daily-challenges
代码解读
定义dom,容器中包含2个子元素,分别代表1个女生和一群男生(4个),每个跨度<代码> 元素代表1个人(1个方块):
居中显示:
定义容器尺寸和它的子元素布局:
画出5个方块,用边框作为辅助线帮助定位:
用伪元素设置元素的样式,使它们变得柔和一些,为男生和男生填上不同的颜色,同时删掉上一步的辅助线:
使4个男生色块的颜色逐渐变淡,增加一点层次感:
接下来制作动画效果。
先增加女生移动的效果,同时颜色也做渐淡处理,后面其他动画的时间要保持一致,所以把动画时长设置为变量:
然后增加第1个男生跳开的动画效果,注意从15%到35%旋转的原点是在元素的正上方:
参考第1个男生的动画效果,再增加另外3个男生跳开的动画效果,区别只是调整了关键帧的时间,依次后延15%的时间:
为第1个男生增加拟人的动画效果,这个效果写在
