设计一个简单的套娃小播

花飞飞

马黑黑 发表于 2025-7-5 20:57
CSS 貌似熟悉一点

CSS长得样子就是平易近人的。。
不跟JS似的天天一张扑克脸，老严肃了不好接近。。

花飞飞

马黑黑 发表于 2025-7-5 21:00
效果不同的

肯定是我没仔细看呗。。。
我看都打满了啊。。没啥差别

马黑黑

花飞飞 发表于 2025-7-5 21:05
CSS长得样子就是平易近人的。。
不跟JS似的天天一张扑克脸，老严肃了不好接近。。

它的编程能力较弱，一切都是逻辑性的。

当然，CSS也可以用三角函数，那叫一个爽

马黑黑

花飞飞 发表于 2025-7-5 21:04
看出来了，这个底图可以改成不同的图形。。
多套几层自然往里缩小，你这创意是真的很厉害啊

套多少层，都需要合适的设置，比如宽度，总要小于它的上层父元素

马黑黑

花飞飞 发表于 2025-7-5 21:05
肯定是我没仔细看呗。。。
我看都打满了啊。。没啥差别

里层的阴影，不会比外层的引用大

花飞飞

马黑黑 发表于 2025-7-5 21:06
它的编程能力较弱，一切都是逻辑性的。

当然，CSS也可以用三角函数，那叫一个爽

切切，冷不丁就拿函数来吓唬人。
编程能力弱么，感觉能实现的也不老少，目前好象还好呗

花飞飞

马黑黑 发表于 2025-7-5 21:07
套多少层，都需要合适的设置，比如宽度，总要小于它的上层父元素

嗯哪，如果不改的话，就是上层的70，所以就一直自己动缩小往里套。。
>DIV这么神奇

花飞飞

马黑黑 发表于 2025-7-5 21:07
里层的阴影，不会比外层的引用大

我把阴影整得不那么扩散看看。。

马黑黑

花飞飞 发表于 2025-7-5 21:16
我把阴影整得不那么扩散看看。。

其实不论设置阴影多大或多小，从物理角度出发，大的盒子阴影更大，小的盒子阴影更小

马黑黑

花飞飞 发表于 2025-7-5 21:15
嗯哪，如果不改的话，就是上层的70，所以就一直自己动缩小往里套。。
>DIV这么神奇

符号 > 表示直接下一代子元素，例如：

.pa > p { color: red; }

酱紫的话：

<div class="pa">
    <p>红色文本</p>
    <div>
        <p>这里就不是红色文本了</p>
    </div>
</div>

马黑黑

花飞飞 发表于 2025-7-5 21:14
切切，冷不丁就拿函数来吓唬人。
编程能力弱么，感觉能实现的也不老少，目前好象还好呗

CSS确实可以使用一些数学只是，三角函数是被支持的。它还有自己的数学方法，比如 calc

红影

马黑黑 发表于 2025-7-5 18:44
最简单的是把 animate 里的 rot 改为不存在的名称，比如 rot1，或者，把 @keyframes 的 rot 改为 rot1， ...

好玩，把它弄停了去数啊，我弄慢了一样能数呢

红影

马黑黑 发表于 2025-7-5 18:45
两个 div 的边框，还可以继续套

嗯嗯，多套一下，就多出来了呢

马黑黑

红影 发表于 2025-7-5 22:56
嗯嗯，多套一下，就多出来了呢

但是要回套：这需要改装的

马黑黑

红影 发表于 2025-7-5 22:54
好玩，把它弄停了去数啊，我弄慢了一样能数呢

停止了更好数

花飞飞

马黑黑 发表于 2025-7-5 22:04
其实不论设置阴影多大或多小，从物理角度出发，大的盒子阴影更大，小的盒子阴影更小

这道理好直白

花飞飞

马黑黑 发表于 2025-7-5 22:07
符号 > 表示直接下一代子元素，例如：

.pa > p { color: red; }

下代直系亲属，允许个性化变异

花飞飞

马黑黑 发表于 2025-7-5 22:08
CSS确实可以使用一些数学只是，三角函数是被支持的。它还有自己的数学方法，比如 calc

加减乘除比较简单。。外出啦，回聊

马黑黑

花飞飞 发表于 2025-7-6 09:16
加减乘除比较简单。。外出啦，回聊

88

马黑黑

花飞飞 发表于 2025-7-6 09:11
下代直系亲属，允许个性化变异

符号 > 就是这个意思。没有这个符号，那么，其下的P标签都是红色的文本：

<style>
    .red p { color: red; }
</style>

<div class="red">
    <p>红色文本</p>
    <div>
        <p>红色文本</p>
        <section>
            <p>红色文本</p>
        </section>
    </div>
</div>