请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 马黑黑 于 2024-2-28 15:24 编辑
《千灯展卷》一帖本在正月十五发布，当天没空错过了，后来不想再发出来，昨天空闲时翻来看看，觉得还是可以发的。下面谈谈动画部分的制作。
当时根据预设主题，相中如下这张图片：
根据上面图片特点，我想设计一组五角星，按照图中的五角星的方向自左向右飞行。最快捷的路径设计是使用 offset-path，用三次贝塞尔曲线实现路径。这里以在 740*400 为例，路径从（0,200）起步，到（740,200）终止，控制点在（370,-180），路径效果示意如下：
路径偏上了，没关系，使用该路径的元素是绝对定位，它们会以路径为导向，但可以偏移路径。现在，来写一个五角星元素，试着把它放到路径看看。先看代码：
<!-- css : 粒子 -->
li-zi {
position: absolute;
width: 60px;
height: 60px;
background: url('https://638183.freep.cn/638183/t23/btn/y5j.png') no-repeat center/cover;
offset-path: path('M0,200 Q370,-180 700,200');
offset-distance: 0;
}
<!-- html : 粒子元素 -->
<li-zi></li-zi>
效果：
借助 offset-distance，新加入的五角星现在在弧线路径的最左端，需要将其往下放，设置好top值就可以。绝对定位的元素left和top值均为0，现在把 top 值改为100看看：
没问题吧？最后的工作是用JS随机生成五角星，让它们在一定的top值区间布排，随机设置其大小以及运行关键帧动画的提前时间等等。以下完整示例，考虑到五角星的宽度占位，路径控制点和终点略作改动。看看代码和效果：
<style>
#papa {
margin: 10px auto 0;
position: relative;
width: 740px;
height: 400px;
background: url('https://638183.freep.cn/638183/t24/1/bbce.jpeg') no-repeat center/cover;
}
li-zi {
position: absolute;
width: 60px;
height: 60px;
background: url('https://638183.freep.cn/638183/t23/btn/y5j.png') no-repeat center/cover;
offset-path: path('M0,200 Q390,-180 780,200');
animation: move 10s linear infinite;
}
@keyframes move { to { offset-distance: 100%; } }
</style>
<div id="papa"></div>
<script>
Array.from({length: all=20}).forEach(star => {
var size = 30 + Math.floor(Math.random() * 30);
star = document.createElement('li-zi');
star.style.cssText += `
left: 0;
top: ${Math.random() * 140 + 60}px;
width: ${size}px;
height: ${size}px;
opacity: ${Math.random() * 0.4 + 0.4};
animation-delay: -${Math.random() * 10}s, -${Math.random() * 5}s;
`;
papa.prepend(star);
});
</script>
说明：① 演示2和3的绿色路径是使用了svg画出来的，演示4已经去掉了svg，所以看不到路径；② 五角星溢出帖子没有做处理是为了演示五角星运行的完整过程，实际应用时可根据需要设置#papa选择器的overflow 属性 为 hidden；③ 和帖子《千灯展卷》相比，这里的五角星没有旋转，若需要旋转，可以修改@keyframes动画，帖子中是给 li-zi 选择器添加另外加一个关键帧动画。
| 
发表于 2024-2-28 11:52
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-2-28 21:15
发表于 2024-2-29 17:04
