100DaysCSS-day4挑战

奶粉罐没粉

2024-05-02 帮助1人

主题：装载

最好的总是不需要加载状态的网站。如果他们这样做了，这将是一个平静的。

需求：实现如图动画

遇到的问题:经过第一次分析后，我认为此动画利用设置动画的延迟时间 backwords完成。后来实现发现，设置延迟时间后，动画仅能执行一次。原因：backwords与infinite冲突，动画无法保持最后一帧。

解决方法：动画谁先动谁后动不一定需要设置不同延迟时间来实现，还可通过设置不同百分比的方式，使某一动画保持某一帧，快速开始或结束。例如，在完成本动画时，我们设置三个圆的运动时间都为2s，让最大的圆运动10%时就从小变大，中间第二个圆运动40%时从小变大，最小的圆运动70%时从小变大。因为运动时间是事先规定好的，所以我们可以看到三个动画有一个先后次序（我们肉眼误以为的），其实是设置不同百分比来完成的。再倒放来看，小圆先结束，然后是中间的圆结束，最后是最大的圆结束，最晚开始运动的动画最先结束。

总结：运动时间相同时，不同动画百分比可实现动画的不同效果。

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 500px;
height: 500px;
background-color: #E56262;
position: relative;
}
.box>div {
position: absolute;
top: 50%;
left: 50%;
width: 150px;
height: 150px;
transform: translate(-50%,-50%);
box-shadow: 1px 2px 10px 0 rgba(0,0,0,.3);
background-color: #fff;
border-radius: 50%;
animation: three 2s infinite alternate;
}
.box>div>div {
position: absolute;
top: 50%;
left: 50%;
width: 90px;
height: 90px;
transform: translate(-50%,-50%);
box-shadow: 1px 2px 10px 0 rgba(0,0,0,.3);
background-color: #fff;
border-radius: 50%;
animation: two 2s infinite alternate;
}
.box>div>div>div {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
transform: translate(-50%,-50%);
box-shadow: 1px 2px 10px 0 rgba(0,0,0,.3);
background-color: #fff;
border-radius: 50%;
animation: one 2s infinite alternate;
}
@keyframes one {
0%,70% {
transform: translate(-50%,-50%) scale(0);
}
100% {
transform: translate(-50%,-50%) scale(1);
}
}
@keyframes two {
0%,40% {
transform: translate(-50%,-50%) scale(0);
}
100% {
transform: translate(-50%,-50%) scale(1);
}
}
@keyframes three {
0%,10% {
transform: translate(-50%,-50%) scale(0);
}
100% {
transform: translate(-50%,-50%) scale(1);
}
}

<body>
<div class="box">
<div>
<div>
<div></div>
</div>
</div>
</div>
</body>

这篇好文章是转载于：学新通技术网

100DaysCSS-day4挑战

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

Android 11 保存文件到外部存储，并分享文件

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开