Magic中的3d球

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

帖子地址：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([0-9A-F]));
@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

效果

: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([0-9A-F])); @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); } }

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

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

马黑黑 · 发表于 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

好看的水晶球。大写

的牛

马黑黑 · 发表于 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

感谢老师的代码分享，欣赏问好！

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

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

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

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

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

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

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

红影 · 发表于 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
一个效果也行

一个效果还怎么影子相连

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

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

和自己相连

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

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

和自己那叫自带光环

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

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

多好啊

醉美水芙蓉该用户已被删除	发表于 2023-4-22 11:47 \| 显示全部楼层提示: 作者被禁止或删除内容自动屏蔽
醉美水芙蓉该用户已被删除
	回复支持反对使用道具举报显身卡

Magic中的3d球

请马上登录，朋友们都在花潮里等着你哦：）

评分

浏览过的版块

花潮帅哥

鼠

牛

虎

兔

龙

蛇

马

羊

猴

鸡

狗

猪

多彩人生

星月交辉

奔放热烈

海样胸怀

春风拂面

火热情怀

优雅迷人

神秘浪漫

相遇之美

鹰傲苍穹

花好月圆

紫色情节

飞龙在天

王者至尊

大将风范

音画大师

天籁妙音

共看流星

风雨同行

我心永远

幸福快乐

喜乐安康

侠骨柔肠

心想事成

开朗大方

花潮管理

花潮美女

缤纷心情

草莓情怀

蝴蝶情怀

心曲飞扬

星星情怀

七彩绚丽

活泼开朗

女儿情怀

一往情深

心香一瓣

金剪刀

妙笔生花

天长地久

绚丽缤纷

中秋征文

周年庆

指尖上的流年

舞会之星

分析（喊冤）章

总结章

杀人王

小强章

最佳杀刺

临屏写诗

七夕诗钟活动

第五届风云

第六届风云

情人节