大湖

马黑黑

南无月 发表于 2024-6-14 18:08
transform-style: preserve-3d; 又发现一新的设置

这是设置3d转换的属性，这种方法要求：

在父元素设置

     perspective: 1000px; /* 景深设置，1000或其他数值 */

在需要使用3d转换动画的子元素设置

    transform-style: preserve-3d; /* 3d转换动画 */

红影

马黑黑 发表于 2024-6-14 11:56
之前有过解释，可能你没主要到。

在属性描述中加上 offset 设定，表示对应运动节点在时间节点上的占比 ...

哦哦，知道了，谢谢黑黑

红影

马黑黑 发表于 2024-6-14 11:58
有条件的动态生成最好，条件不具备就老老实实写数组代码

看样子我是必须老老实实写数组代码的那个了

红影

马黑黑 发表于 2024-6-14 12:01
这个是异步加载图片的函数，以确保图片全部成功加载了才运行动画。它的好处是让动画的运行丝滑般流畅，缺 ...

嗯嗯，这段代码只能套用了

马黑黑

红影 发表于 2024-6-14 19:23
嗯嗯，这段代码只能套用了

其实，如非必须，也不用这么加载图片，直接用图片地址数组也行的，不过最好图片尺寸一致，或做背景图片用

马黑黑

红影 发表于 2024-6-14 19:23
看样子我是必须老老实实写数组代码的那个了

这么问题的，还容易懂

南无月

马黑黑 发表于 2024-6-14 18:24
这是设置3d转换的属性，这种方法要求：

在父元素设置

好哒，现在晓得了。
看之前呼啦圈转动的3D效果里并没有这个，看着眼生就问问

马黑黑

南无月 发表于 2024-6-14 21:21
好哒，现在晓得了。
看之前呼啦圈转动的3D效果里并没有这个，看着眼生就问问

CSS3d转换有两种实现形式

南无月

马黑黑 发表于 2024-6-14 21:24
CSS3d转换有两种实现形式

反正都能实现就是了这个是新的一种

马黑黑

南无月 发表于 2024-6-14 21:27
反正都能实现就是了这个是新的一种

这个是最先介绍的

红影

马黑黑 发表于 2024-6-14 20:48
这么问题的，还容易懂

嗯嗯，这样最好了。

红影

马黑黑 发表于 2024-6-14 20:48
其实，如非必须，也不用这么加载图片，直接用图片地址数组也行的，不过最好图片尺寸一致，或做背景图片用

哦哦，图片尺寸一致也不用这样加载啊。

马黑黑

红影 发表于 2024-6-15 10:12
哦哦，图片尺寸一致也不用这样加载啊。

图片尺寸一致，或设定为相同尺寸呈现，那么，就不用去动态获取原始尺寸。

这里，加载图片之后再做别的，目的有二：

一是让后续的渲染更丝滑（不因图片没有加载成功而影响渲染效果），二是获取图片的原始尺寸。

马黑黑

红影 发表于 2024-6-15 10:11
嗯嗯，这样最好了。

嗯呐

红影

马黑黑 发表于 2024-6-15 11:13
图片尺寸一致，或设定为相同尺寸呈现，那么，就不用去动态获取原始尺寸。

这里，加载图片之后再做别的 ...

为了丝滑，这个加载还是需要的。

红影

马黑黑 发表于 2024-6-15 11:13
嗯呐

这个考虑了所有情况，真好。

马黑黑

红影 发表于 2024-6-15 13:47
这个考虑了所有情况，真好。

没那么完美的

马黑黑

红影 发表于 2024-6-15 13:46
为了丝滑，这个加载还是需要的。

那也不一定

南无月

马黑黑 发表于 2024-6-14 22:43
这个是最先介绍的

被老师抓到翘课了

马黑黑

南无月 发表于 2024-6-15 21:44
被老师抓到翘课了

本来也没想讲做帖的事情，刚来时 @小辣椒 对俺很是排挤，就拿这个HTML帖子吓唬吓唬它，然后就讲到现在了