我想為我的投資組合在 css 中制作無限的文本尾巴。我盡力而為，我制造了一些垃圾。我看起來很不舒服。所以，請告訴我如何在 css 中創建這個東西，因為我不了解 javascript。
我試試這個：
div {
margin: 5vh 0;
}
.t {
display: flex;
font-size: 2rem;
animation:move 15s linear infinite;
}
@keyframes move{
0%{
transform:translatex(0);
}
100%{
transform:translatex(-100%);
}
}
.t p{
padding:2rem;
}<div class="t">
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</div>uj5u.com熱心網友回復：
這很容易。我以簡單的方式創建它并且只使用一個 div。
你可以使用 text-shadow 屬性來制作像這樣的無限影片：
.text{
width:8rem;
text-align:center;
}
.text h1{
font-size:2rem;
line-height:1;
width:8rem;
animation: roll 5s linear infinite;
text-shadow: 8rem 0 black, calc(8rem * 2) 0 black,
calc(8rem * 3) 0 black,
calc(8rem * 4) 0 black,
calc(8rem * 5) 0 black,
calc(8rem * 6) 0 black,
calc(8rem * 7) 0 black,
calc(8rem * 8) 0 black,
calc(8rem * 9) 0 black;
}
@keyframes roll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}<div class="text">
<h1>hello</h1>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/419170.html
標籤：