[英]Wrap dynamic text around a spinning cylinder with CSS/Javascript (splitting.js)
我对编码还很陌生,并且没有深入的知识来自己解决这个问题。 如果有人可以帮助我,我将不胜感激!
我正在尝试使用 CSS 和 split.js 将动态加载的文本包装在旋转圆柱体周围而没有固定数量的字符。 我尝试按照本教程进行操作,一切都很好,直到我开始更改文本。 问题是这种方法只适用于长度不变的文本,因为如果文本太长它会被截断,或者如果太短会导致圆柱体中的间隙。
这是我现在拥有的源代码。 可悲的是,当我将其粘贴到 jsfiddle 中时,它无法正常工作。 然而,它在我的代码编辑器中工作得很好,并且与我上面链接的教程相同。
<div class="circle" data-splitting>
Circle-Text-Animation-Effect-Cool-great
</div>
<script>
Splitting();
</script>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: monospace;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color:aqua;
}
.circle {
transform-style: preserve-3d;
animation: animate 8s linear infinite;
}
@keyframes animate {
0% {
transform: perspective(1000px) rotateY(360deg) rotateX(15deg);
}
100% {
transform: perspective(1000px) rotateY(0deg) rotateX(15deg);
}
}
.circle .char {
position: absolute;
top: 0;
left: 0;
background: red;
color: blue;
font-size: 4em;
padding: 5px 12px;
border: 4px solid black;
transform-style: preserve-3d;
transform-origin: center;
transform: rotateY(calc(var(--char-index) * 10deg)) translateZ(250px);
}
这个问题有什么解决方法吗? 甚至可能不使用 split.js?
我希望我能正确描述我的问题。 英语不是我的母语,我还不能将图片上传到 Stackoverflow,所以我无法直观地描述这个问题!
预先感谢您的帮助!
这里的技巧是要注意,您需要旋转一个字符的度数取决于字符串中的字符总数。
我没有 splitter.js 库,所以放入了一些 JS 做同样的事情 - 将每个字符分成自己的 div,其样式定义了 CSS 变量 - 字符的索引。
JS 还设置了一个新的 CSS 变量 --numchs,在 CSS 中使用该变量来计算每个字符旋转的度数 --deg。 然后使用它而不是 10deg 来决定放置角色的位置。
const circle = document.querySelector('.circle'); const text = circle.innerHTML;// Note I am being lazy here and assuming the string has no unwanted whitespace circle.innerHTML = ''; circle.style.setProperty('--numchs', text.length); for ( let i = 0; i < text.length; i++ ) { circle.innerHTML = circle.innerHTML + '<div class="char" style="--char-index: ' + i + ';">' + text.charAt(i) + '</div>'; }
* { margin: 0; padding: 0; box-sizing: border-box; font-family: monospace; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color:aqua; }.circle { transform-style: preserve-3d; animation: animate 8s linear infinite; --deg: calc(360deg / var(--numchs)); } @keyframes animate { 0% { transform: perspective(1000px) rotateY(360deg) rotateX(15deg); } 100% { transform: perspective(1000px) rotateY(0deg) rotateX(15deg); } }.circle.char { position: absolute; top: 0; left: 0; background: red; color: blue; font-size: 4em; padding: 5px 12px; border: 4px solid black; transform-style: preserve-3d; transform-origin: center; transform: rotateY(calc(var(--char-index) * var(--deg))) translateZ(250px); }
<div class="circle" data-splitting>Circle-Text-Animation-Effect-Cool-great</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.