红影 发表于 2022-4-9 09:59
我对电脑根本不懂啊
你只需要人家去解决问题
马黑黑 发表于 2022-4-9 10:14
你只需要人家去解决问题
没办法，我笨呗{:4_173:}
红影 发表于 2022-4-9 11:32
没办法，我笨呗
所以网管就是去解决问题的
马黑黑 发表于 2022-4-9 11:59
所以网管就是去解决问题的
嗯嗯，是守护神一样的存在。
红影 发表于 2022-4-9 19:02
嗯嗯，是守护神一样的存在。
所以你要多和守护神沟通
本帖最后由 马黑黑 于 2022-4-10 10:45 编辑 <br /><br /><style>
.body { perspective: 1000px; }
.stage {
--len: 100px;
margin: 80px auto 0;
position: relative;
width: var(--len);
height: var(--len);
transform-style: preserve-3d;
animation: rot 15s linear infinite;
}
.stage div {
position: absolute;
width: inherit;
height: inherit;
color: #eee;
text-shadow: 1px 1px 3px #111;
font: 2em / var(--len) Arial;
text-align: center;
left: 0; top: 0;
opacity: .95;
}
@keyframes rot {
from { transform: rotateY(0deg); }
to { transform: rotateY(-360deg); }
}
</style>
<div class="stage"></div>
<script>
let stage = document.querySelector(".stage");
let txt = "花潮論壇歡迎您";
let angle = 360 / txt.length;
let w = stage.clientWidth;
let trz = Math.ceil(Math.tan(Math.PI / 180 * (180 - angle) /2 ) *w / 2);
let str = "";
for(j=0; j<txt.length; j++){
let cc = `#${Math.random().toString(16).substr(-6)}`;
let ry = Math.floor(j*angle);
str += `<div style="transform:rotateY(${ry}deg) translateZ(${trz}px); background: ${cc};">${txt.charAt(j)}</div>\n`;
}
stage.innerHTML = str;
</script>
本帖最后由 马黑黑 于 2022-4-10 10:44 编辑
406代碼：
<style>
.body { perspective: 1000px; }
.stage {
--len: 100px;
margin: 80px auto 0;
position: relative;
width: var(--len);
height: var(--len);
transform-style: preserve-3d;
animation: rot 15s linear infinite;
}
.stage div {
position: absolute;
width: inherit;
height: inherit;
color: #eee;
text-shadow: 1px 1px 3px #111;
font: 2em / var(--len) Arial;
text-align: center;
left: 0; top: 0;
opacity: .8;
}
@keyframes rot {
from { transform: rotateY(0deg); }
to { transform: rotateY(-360deg); }
}
</style>
<div class="stage"></div>
<script>
let stage = document.querySelector(".stage");
let txt = "花潮論壇歡迎您";
let angle = 360 / txt.length;
let w = stage.clientWidth;
let trz = Math.ceil(Math.tan(Math.PI / 180 * (180 - angle) /2 ) *w / 2);
let str = "";
for(j=0; j<txt.length; j++){
let cc = `#${Math.random().toString(16).substr(-6)}`;
let ry = Math.floor(j*angle);
str += `<div style="transform:rotateY(${ry}deg) translateZ(${trz}px); background: ${cc};">${txt.charAt(j)}</div>\n`;
}
stage.innerHTML = str;
</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
原来是这样，那还是放主体元素里比较好。
其实都行
本帖最后由 马黑黑 于 2022-4-12 07:52 编辑
本帖代码与之前的一些变量有冲突，效果与代码移至：
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
细心也没用啊，还没找到是怎样造成这种效果的。
会有办法的