国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

文章專題 AI工具學(xué)習(xí) 下載問(wèn)答源碼最近更新

PHP

會(huì)員中心講師中心微信公眾號(hào)

迅速搬移文字

P粉738248522 2023-09-16 15:37:49

[CSS3討論組]

1506

舉報(bào)

我試圖為我的文本創(chuàng)建一個(gè)在屏幕上開始的無(wú)限循環(huán)。但是我找到的所有方法都是從屏幕外開始，并進(jìn)入屏幕。之后，一切都完美符合我的需求，但是起始點(diǎn)破壞了我的概念。

我知道我們有一些可以移動(dòng)文本的HTML標(biāo)簽，但它也不能幫助我。

.text1{
  animation: move 5s linear 2.5s infinite;
  transform: translateX(-100%);
}

*{
  margin: 0;
  padding:0;
}

.wrapper{
  display: flex;
}

@keyframes move{
  from{
    transform: translateX(-100%);
  }
  
   to{
     transform: translateX(100%);
   }
}

.text2{
  position: absolute;
  animation: move 5s linear 0s infinite;
}

.text1,.text2{
  font-size: 80px;
   white-space: nowrap;
}

<div class="wrapper">
  
<div class="text1">Lorem ipsum dolor sit amet. </div>

<div class="text2">Lorem ipsum dolor sit amet.</div>

</div>

我也不喜歡那個(gè)水平滾動(dòng)條，所以如果有任何辦法可以去掉它。

P粉738248522

全部回復(fù)(1)

P粉0266659192023-09-17 11:53:38 1樓

你可以用多種不同的方法來(lái)實(shí)現(xiàn)這個(gè)，但是你的嘗試還可以，所以我按照你的需求進(jìn)行了修復(fù)。對(duì)于水平滾動(dòng)，你只需要將overflow-x設(shè)置為hidden，在某個(gè)父級(jí)div上設(shè)置即可。我將其設(shè)置為整個(gè)body，但你可以進(jìn)行更改。

.text1{
  animation: move 5s linear 2.5s infinite;
  transform: translateX(-100%);
}

*{
  margin: 0;
  padding:0;
}

.wrapper{
  display: flex;
}

body{
  overflow-x: hidden;
}

@keyframes move{
  from{
    transform: translateX(100%);
  }
  
   to{
     transform: translateX(-100%);
   }
}

.text2{
  position: absolute;
  animation: move 5s linear 0s infinite;
}

.text1,.text2, .text3{
  font-size: 50px;
   white-space: nowrap;
}

.text3{
  position: absolute;
   animation: move2 2.5s linear 0s;
     animation-fill-mode: forwards;

}

@keyframes move2{
  from{
    transform: translateX(0%);
  }
  
   to{
     transform: translateX(-100%);
   }
}

<div class="wrapper">
  
<div class="text1">Lorem ipsum dolor sit amet. </div>

<div class="text2">Lorem ipsum dolor sit amet.</div>

<div class="text3">Lorem ipsum dolor sit amet.</div>

</div>

贊 +0

添加回復(fù)

專題推薦

更多>

熱門話題

熱門教程

更多>

相關(guān)教程