马黑黑 发表于 2023-4-22 10:48

Magic中的3d球

帖子地址：Magic - 动画音画 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

里面的球形播放器，看着像3d，其实不是，这是 css-doodle 图案内部阴影营造出来的隐隐约约的效果。剥离出来的球形播放器代码如下：

<css-doodle click-to-update>
        :doodle {
                @grid: 4 / 200px;
                @shape: circle;
                filter: drop-shadow(10px 10px 20px black);
                cursor: pointer;
                --state: running;
        }
        :doodle(:hover) { --state: paused; }
        background: #@repeat(6, @p());
        @shape: bud @p(3,4,5,6);
        @size: @r(20, 40)px;
        animation: rot 6s infinite linear var(--state);
        @keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>filter: drop-shadow() 滤镜将阴影投射在xy各10px的位置，由于 css-doodle 主元素没有背景，滤镜作用于内部元素，诸多个内元素于是都有自己的阴影，形成彼此间或相连或不相连的阴影集合。阴影设为纯黑，但模糊半径是20px，存在一定透明度。总体效果就是这样来的。

马黑黑 发表于 2023-4-22 10:48

<p>效果<br><br></p>
<css-doodle click-to-update>
        :doodle {
                @grid: 4 / 200px;
                @shape: circle;
                filter: drop-shadow(10px 10px 20px black);
                cursor: pointer;
                --state: running;
        }
        :doodle(:hover) { --state: paused; }
        background: #@repeat(6, @p());
        @shape: bud @p(3,4,5,6);
        @size: @r(20, 40)px;
        animation: rot 6s infinite linear var(--state);
        @keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>

<script>
(function() {
        let scriptEle = document.createElement('script');
        scriptEle.setAttribute('type','text/javascript');
        scriptEle.setAttribute('src','https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js');
        document.head.appendChild(scriptEle);
})();
</script>

红影 发表于 2023-4-22 11:38

原来是这样弄出来的立体效果。在这样纯色的背景下，貌似更好看呢{:4_187:}

马黑黑 发表于 2023-4-22 11:42

红影 发表于 2023-4-22 11:38
原来是这样弄出来的立体效果。在这样纯色的背景下，貌似更好看呢

复杂背景色之下，滤镜的颜色需要适当调整

醉美水芙蓉 发表于 2023-4-22 11:47

马黑黑 发表于 2023-4-22 11:48

醉美水芙蓉 发表于 2023-4-22 11:47
看着挺漂亮的！

可以一看

红影 发表于 2023-4-22 12:21

马黑黑 发表于 2023-4-22 11:42
复杂背景色之下，滤镜的颜色需要适当调整

嗯嗯。这些阴影竟能连接起来，没想到呢。

雨中悄然 发表于 2023-4-22 12:30

好看的水晶球。大写{:4_199:}的牛

马黑黑 发表于 2023-4-22 12:41

雨中悄然 发表于 2023-4-22 12:30
好看的水晶球。大写的牛

牛

马黑黑 发表于 2023-4-22 12:43

红影 发表于 2023-4-22 12:21
嗯嗯。这些阴影竟能连接起来，没想到呢。

多人行，必有影子相连

梦缘 发表于 2023-4-22 19:39

感谢老师的代码分享，欣赏问好！{:4_187:}

马黑黑 发表于 2023-4-22 20:17

梦缘 发表于 2023-4-22 19:39
感谢老师的代码分享，欣赏问好！

{:4_191:}

红影 发表于 2023-4-22 22:32

马黑黑 发表于 2023-4-22 12:43
多人行，必有影子相连

哈哈，这话还挺有哲理的。当然，此影子不是俺的名字{:4_173:}

马黑黑 发表于 2023-4-22 22:35

红影 发表于 2023-4-22 22:32
哈哈，这话还挺有哲理的。当然，此影子不是俺的名字

{:5_106:}

红影 发表于 2023-4-23 10:55

马黑黑 发表于 2023-4-22 22:35


多人行应该改成多个效果行。

马黑黑 发表于 2023-4-23 11:01

红影 发表于 2023-4-23 10:55
多人行应该改成多个效果行。

一个效果也行

红影 发表于 2023-4-23 13:26

马黑黑 发表于 2023-4-23 11:01
一个效果也行

一个效果还怎么影子相连{:4_173:}

马黑黑 发表于 2023-4-23 22:42

红影 发表于 2023-4-23 13:26
一个效果还怎么影子相连

和自己相连

红影 发表于 2023-4-24 20:09

马黑黑 发表于 2023-4-23 22:42
和自己相连

和自己那叫自带光环{:4_189:}

马黑黑 发表于 2023-4-24 22:24

红影 发表于 2023-4-24 20:09
和自己那叫自带光环

多好啊
页: [1]
查看完整版本: Magic中的3d球