马黑黑 发表于 2025-12-9 21:32

暗香浮动月黄昏

<div class="codebox" data-prev="1">
&lt;style&gt;
        .pa {
                margin: 20px auto;
                width: 1024px;
                height: 640px;
                font-size: 16px;
                display: grid;
                place-items: center;
                perspective: 600px;
                position: relative;
        }
        .txt3d {
                color: beige;
                font: bold 5em sans-serif;
                text-shadow: 2px 2px 4px gray, 3px 3px 8px orange, 4px 4px 16px black;
                animation: rot ease-in-out 3s infinite alternate;
                transform-style: preserve-3d;
        }
        @keyframes rot {
                0% { transform: rotate3d(0, 0.75, 0, 0deg); }
                50% { transform: rotate3d(0.5, 0.35, 0, 300deg); }
                100% { transform: rotate3d(1, 0, 0, 60deg); }
        }
&lt;/style&gt;

&lt;div class="pa"&gt;
        &lt;p class="txt3d"&gt;暗香浮动月黄昏&lt;/p&gt;
&lt;/div&gt;
</div>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

马黑黑 发表于 2025-12-9 21:34

一楼演示的是文本3d动画，这只是一个简易的示例——随意设计，未做斟酌。

马黑黑 发表于 2025-12-9 21:54

3d动画针对非3d构造的文本，应避免纸片效果，所以给文本标签设计了三重阴影，可能设计得不够意思，可以耐心一点，将字的厚度通过细致的多重阴影真正渲染出来。

霜染枫丹 发表于 2025-12-9 22:36

这个也是特别漂亮，做播放器标很喜欢，谢谢马老师分享，辛苦了！



https://s3.bmp.ovh/imgs/2025/12/09/ec0372e5ce06192a.png


霜染枫丹 发表于 2025-12-9 22:55

https://cccimg.com/view.php/762e38ab4ee9692f5d87a9f8f3ddacd6.gif

红影 发表于 2025-12-9 23:30

真漂亮，这些阴影已经让文字有厚度的感觉了呢。
空中旋转的3D字{:4_199:}

上海朝阳 发表于 2025-12-10 07:58

还是黑白艺术字结构吧，我以为黑黑写诗了{:4_189:}

上海朝阳 发表于 2025-12-10 07:59

霜染枫丹 发表于 2025-12-9 22:55


梅姐厉害，学的真快

霜染枫丹 发表于 2025-12-10 09:42

上海朝阳 发表于 2025-12-10 07:59
梅姐厉害，学的真快

问好上海朝阳！这是我用马老师代码合成了一个背景。感谢你的支持，上午好！

马黑黑 发表于 2025-12-10 12:25

上海朝阳 发表于 2025-12-10 07:58
还是黑白艺术字结构吧，我以为黑黑写诗了

文盲一个，吟两句可以，写不出来

马黑黑 发表于 2025-12-10 12:26

红影 发表于 2025-12-9 23:30
真漂亮，这些阴影已经让文字有厚度的感觉了呢。
空中旋转的3D字

厚度一般般

马黑黑 发表于 2025-12-10 12:28

霜染枫丹 发表于 2025-12-9 22:36
这个也是特别漂亮，做播放器标很喜欢，谢谢马老师分享，辛苦了！

{:4_190:}

红影 发表于 2025-12-10 12:33

马黑黑 发表于 2025-12-10 12:26
厚度一般般

貌似文字仓库里有黑黑设置过的带厚度的字呢{:4_173:}

马黑黑 发表于 2025-12-10 13:44

红影 发表于 2025-12-10 12:33
貌似文字仓库里有黑黑设置过的带厚度的字呢

应该有的

杨帆 发表于 2025-12-10 17:56

红影 发表于 2025-12-10 12:33
貌似文字仓库里有黑黑设置过的带厚度的字呢

文字仓库在哪？谁有钥匙呀{:4_173:}

红影 发表于 2025-12-10 21:58

马黑黑 发表于 2025-12-10 13:44
应该有的

我记得色彩比这个更鲜艳呢{:4_173:}

红影 发表于 2025-12-10 21:59

杨帆 发表于 2025-12-10 17:56
文字仓库在哪？谁有钥匙呀

文字效果集中营
https://www.huachaowang.com/forum.php?mod=viewthread&tid=57643&fromuid=2
(出处: 花潮论坛)

就是这个啊，黑黑把以前做的文字效果集中起来了{:4_173:}

马黑黑 发表于 2025-12-10 22:07

红影 发表于 2025-12-10 21:58
我记得色彩比这个更鲜艳呢

有时候素颜也是好看的

红影 发表于 2025-12-10 22:19

马黑黑 发表于 2025-12-10 22:07
有时候素颜也是好看的

其实不光是说颜色啊，是说那个的层次更多，立体感更强呢{:4_173:}

马黑黑 发表于 2025-12-10 22:23

红影 发表于 2025-12-10 22:19
其实不光是说颜色啊，是说那个的层次更多，立体感更强呢

还行
页: [1] 2
查看完整版本: 暗香浮动月黄昏