请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2024-5-22 07:49 编辑
上一讲，《CSS关键帧动画：元素绕椭圆圆周运动的实现（一）》，我们用两个CSS属性 ① offset-path 设计路径、② offset-distance 控制元素在路径上的偏移位置，实现了绝对定位的子元素在相对定位的父元素场景下做椭圆运动。椭圆运动往往能模拟出一定效果的3d运动，为了让效果显得更生动逼真，我们还需要让运动中的元素在运动周期中能变小变大，规则是，元素离观测点最近时最大、反正最小。椭圆路径始于左中（M0 120），按顺时针方向运动，移动到 25% 即椭圆的最顶端时离我们的眼睛（观测点）最远，到 50% 即右中时和出发点同在一个水平位置，到 75% 即最底端时离我们最近。按这个规律，我们设计一组CSS关键帧动画，就叫它 size 吧，用来控制元素在移动时的尺寸变化：
@keyframes size {
0%, 50%, 100% { transform: scale(1); }
25% { transform: scale(0.5); }
75% { transform: scale(1.5); }
}
这里，我们设计了三种变化状态，最小 0.5，最大 1.5，正常 1，分别对应于运动路径上的 ① 0%、50%、100%，② 25%，③ 75%，然后将这个动画追加给 li-zi 的 animation 属性——我们早已知道，animation 属性支持多个关键帧动画。下面是效果和代码：
<style>
.eBox {
margin: 20px auto;
width: 400px;
height: 240px;
border: 1px solid gray;
border-radius: 50%;
position: relative;
}
li-zi {
position: absolute;
width: 30px;
height: 30px;
background: plum;
offset-path: path('M0 120 A200 120 0 1 1 400 120 A200 120 0 1 1 0 120');
animation: move 10s linear infinite, size 10s linear infinite;
}
@keyframes move {
from { offset-distance: 0; }
to { offset-distance: 100%; }
}
@keyframes size {
0%, 50%, 100% { transform: scale(1); }
25% { transform: scale(0.5); }
75% { transform: scale(1.5); }
}
</style>
<div class="eBox">
<li-zi></li-zi>
</div>
留意观察第 16 行代码，animation属性调用了两个关键帧动画，彼此间用小角逗号隔开，两组动画的运行参数保持一致以确保动作协调。
以上只是一个 li-zi 元素实例的运动展示，如果是多个元素前后拉开距离在同一个跑道上运动，那又如何实现呢？思路其实也简单：利用 animation-delay 实现，该属性表示动画延时执行的时间，使用负值表示提前执行。下面的实例，我们利用 JS 批量生成 12 个 li-zi 元素，每一个 li-zi 元素背景色随机产生，animation-delay 属性值取负数值，按照动画总时长除以 li-zi 总数乘以序列 id (具体看第36行代码）以便让小矩形在路径上均匀分布。
效果：
完整代码：
<style>
.eBox {
margin: 20px auto;
width: 400px;
height: 240px;
border: 1px solid gray;
border-radius: 50%;
position: relative;
}
li-zi {
position: absolute;
width: 30px;
height: 30px;
background: plum;
offset-path: path('M0 120 A200 120 0 1 1 400 120 A200 120 0 1 1 0 120');
animation: move 10s linear infinite, size 10s linear infinite;
}
@keyframes move {
from { offset-distance: 0; }
to { offset-distance: 100%; }
}
@keyframes size {
0%, 50%, 100% { transform: scale(1); }
25% { transform: scale(0.5); }
75% { transform: scale(1.5); }
}
</style>
<div class="eBox" id="lzpa"></div>
<script>
var total = 12;
for(var i = 0; i < total; i ++) {
let lz = document.createElement('li-zi');
lz.style.cssText += `
animation-delay: -${10 / total * i}s;
background-color: #${Math.random().toString(16).substring(2, 8)};
`;
lzpa.appendChild(lz);
}
</script>
注意，第 36 行代码，10 来源于 animation 属性中设置的 animation-duration 即第 16 行代码中的 10s，这个数值若发生变化这里也要跟着改。
这里只是演示，实际应用时应当根据需要做必要的修改，反正万变不离其宗，懂得做的都会懂。
| 
发表于 2024-5-22 07:45
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-5-22 12:51
