文字效果集中营

马黑黑

红影 发表于 2022-4-9 09:59
我对电脑根本不懂啊

你只需要人家去解决问题

红影

马黑黑 发表于 2022-4-9 10:14
你只需要人家去解决问题

没办法，我笨呗

马黑黑

红影 发表于 2022-4-9 11:32
没办法，我笨呗

所以网管就是去解决问题的

红影

马黑黑 发表于 2022-4-9 11:59
所以网管就是去解决问题的

嗯嗯，是守护神一样的存在。

马黑黑

红影 发表于 2022-4-9 19:02
嗯嗯，是守护神一样的存在。

所以你要多和守护神沟通

马黑黑

马黑黑

406代碼：

1. 
   
2. <style>
   
3. .body { perspective: 1000px; }
   
4. .stage {
   
5.         --len: 100px;
   
6.         margin: 80px auto 0;
   
7.         position: relative;
   
8.         width: var(--len);
   
9.         height: var(--len);
   
10.         transform-style: preserve-3d;
    
11.         animation: rot 15s linear infinite;
    
12. }
    
13. .stage div {
    
14.         position: absolute;
    
15.         width: inherit;
    
16.         height: inherit;
    
17.         color: #eee;
    
18.         text-shadow: 1px 1px 3px #111;
    
19.         font: 2em / var(--len) Arial;
    
20.         text-align: center;
    
21.         left: 0; top: 0;
    
22.         opacity: .8;
    
23. }
    
24. 
    
25. @keyframes rot {
    
26.         from { transform: rotateY(0deg); }
    
27.         to { transform: rotateY(-360deg); }
    
28. }
    
29. </style>
    
30. 
    
31. <div class="stage"></div>
    
32. 
    
33. <script>
    
34. let stage = document.querySelector(".stage");
    
35. let txt = "花潮論壇歡迎您";
    
36. let angle = 360 / txt.length;
    
37. let w = stage.clientWidth;
    
38. let trz = Math.ceil(Math.tan(Math.PI / 180 * (180 - angle) /2 ) *w / 2);
    
39. let str = "";
    
40. for(j=0; j<txt.length; j++){
    
41.         let cc = `#${Math.random().toString(16).substr(-6)}`;
    
42.         let ry = Math.floor(j*angle);
    
43.         str += `<div style="transform:rotateY(${ry}deg) translateZ(${trz}px); background: ${cc};">${txt.charAt(j)}</div>\n`;
    
44. }
    
45. stage.innerHTML = str;
    
46. </script>
    

复制代码

马黑黑

代码中，景深放在 body 选择器，实际使用时可以放在帖子主体元素的CSS代码处。

红影

马黑黑 发表于 2022-4-10 09:14
代码中，景深放在 body 选择器，实际使用时可以放在帖子主体元素的CSS代码处。

这个为什么不是像你帖子里那样翘起来一点？没看出来是哪个语句决定翘的。

马黑黑

红影 发表于 2022-4-10 14:58
这个为什么不是像你帖子里那样翘起来一点？没看出来是哪个语句决定翘的。

没有做专门的设置，但可以做。两个帖子间，翘不翘看景深所在的那个元素的宽度吧，这里的景深依托 body，整个屏幕的宽度；水吧那个帖子主体放景深语句，其宽度小一些。

加林森

再来学习

红影

马黑黑 发表于 2022-4-10 16:21
没有做专门的设置，但可以做。两个帖子间，翘不翘看景深所在的那个元素的宽度吧，这里的景深依托 body， ...

原来是这样，那还是放主体元素里比较好。

马黑黑

红影 发表于 2022-4-11 08:21
原来是这样，那还是放主体元素里比较好。

其实都行

马黑黑

本帖代码与之前的一些变量有冲突，效果与代码移至：

CSS+JS环形多彩文本

红影

马黑黑 发表于 2022-4-11 12:08
其实都行

嗯，虽然都行，但感觉效果不一样。

马黑黑

红影 发表于 2022-4-12 23:43
嗯，虽然都行，但感觉效果不一样。

也是差不多的吧

红影

马黑黑 发表于 2022-4-12 23:55
也是差不多的吧

一个是有个空间折角，一个是正视图，后面的全部遮掩了。

马黑黑

红影 发表于 2022-4-13 20:07
一个是有个空间折角，一个是正视图，后面的全部遮掩了。

你很细心

红影

马黑黑 发表于 2022-4-13 20:29
你很细心

细心也没用啊，还没找到是怎样造成这种效果的。

马黑黑

红影 发表于 2022-4-15 08:55
细心也没用啊，还没找到是怎样造成这种效果的。

会有办法的