gpt4 book ai didi

javascript - 如何为主要浏览器(以及 Chrome)转换(旋转)句子中的单个字母

转载 作者:行者123 更新时间:2023-11-30 09:25:29 26 4
gpt4 key购买 nike

我要输出一个句子。当句子出现时,所有单个字母都应通过旋转和变大的方式出现。

我的方法如下:我所做的是拆分句子并将每个字母放在单独的 span 元素中。然后我使用 ccs 转换 -webkit-transform 转换字母。但是,除非您设置 display: inline-block,否则这在 Chrome 中不起作用。然后旋转按预期工作,但不再显示空格。这导致所有单词都被捆绑在一起。

见下文或 here

let containerDiv = "div.chart";

function displayText(_textArray) {
let sel = d3.select(containerDiv);

// add headers for all strings but the last one
for (let i = 0; i < _textArray.length - 1; i++) {
sel.append("div")
.attr("class", "header h" + i)
.append("h1")
.attr("class", "trans")
.text(_textArray[i]);
}

// add last string by wrapping each letter around a span
// which can be styled individually
let sel2 = sel.append("div")
.attr("class", "header h" + (_textArray.length - 1))
.append("h1")
.style("opacity", 1)
.attr("class", "trans");

const lastString = _textArray[_textArray.length-1];
for (let i = 0; i < lastString.length; i++) {
sel2.append("span")
.attr("class", "color-" + (i % 5))
.text(lastString[i]);
}
}

function transitionLetters(_selection){
_selection
.transition()
.duration(2000)
.delay((d,i) => i * 200)
.style("opacity", 1)
.style("-webkit-transform", "rotate(-720deg) scale(1)");
}

let myText = ["I like to eat", "ham and eggs"];
displayText(myText);
d3.selectAll("span").call(transitionLetters);
div.header {
margin: 0 auto;
text-align: center;
width: max-content;
}

h1 span {
opacity: 0;
display: inline-block;
-webkit-transform: rotate(-0deg) scale(0.001);
}

.color-0 { color: rgb(255, 0, 171); }
.color-1 { color: rgb(0, 168, 255); }
.color-2 { color: rgb(171, 0, 255); }
.color-3 { color: rgb(255, 171, 0); }
.color-4 { color: rgb(168, 255, 0); }
<script src="https://d3js.org/d3.v4.min.js"></script>
<meta charset="utf-8">
<body>
<div class="chart"></div>
</body>

最佳答案

空格在那里,只是没有显示,因为 span 不会显示只有空白的内容。

span { /* or some custom class for those spans */
white-space:pre;
}

来自这个答案:

https://stackoverflow.com/a/19742967/7355135

关于javascript - 如何为主要浏览器(以及 Chrome)转换(旋转)句子中的单个字母,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49286349/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com