css如何實(shí)現(xiàn)文字循環(huán)滾動(dòng)效果
這篇文章主要介紹“css如何實(shí)現(xiàn)文字循環(huán)滾動(dòng)效果”，在日常操作中，相信很多人在css如何實(shí)現(xiàn)文字循環(huán)滾動(dòng)效果問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css如何實(shí)現(xiàn)文字循環(huán)滾動(dòng)效果”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
東鄉(xiāng)網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),東鄉(xiāng)網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為東鄉(xiāng)超過(guò)千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的東鄉(xiāng)做網(wǎng)站的公司定做！
css實(shí)現(xiàn)文字循環(huán)滾動(dòng)的方法：1、在文字元素上使用animation屬性綁定一個(gè)循環(huán)動(dòng)畫；2、利用“@keyframes”規(guī)則和“transform: translateX(值%)”語(yǔ)句設(shè)置動(dòng)畫每一幀中文字的平移位置即可。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css實(shí)現(xiàn)文字循環(huán)滾動(dòng)效果
在css中，可以利用animationh和keyframest通過(guò)給文字綁定一個(gè)循環(huán)滾動(dòng)動(dòng)畫來(lái)實(shí)現(xiàn)文字循環(huán)滾動(dòng)效果。
實(shí)現(xiàn)代碼：
html：
文字滾動(dòng)的內(nèi)容文字滾動(dòng)的內(nèi)容文字滾動(dòng)的內(nèi)容文字滾動(dòng)的內(nèi)容
css：
.box {
width: 100%;
margin: 0 auto;
border: 1px solid #ff6700;
overflow: hidden;
}
.animate {
padding-left: 20px;
font-size: 12px;
color: #000;
display: inline-block;
white-space: nowrap;
animation: 5s wordsLoop linear infinite normal;
}
@keyframes wordsLoop {
0% {
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
@-webkit-keyframes wordsLoop {
0% {
transform: translateX(100%);
-webkit-transform: translateX(100%);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}效果圖：
說(shuō)明：
Transform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換。這個(gè)屬性允許你將元素旋轉(zhuǎn)，縮放，移動(dòng)，傾斜等。
translateX(x)：定義平移轉(zhuǎn)換，只是用 X 軸的值。
到此，關(guān)于“css如何實(shí)現(xiàn)文字循環(huán)滾動(dòng)效果”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
當(dāng)前題目：css如何實(shí)現(xiàn)文字循環(huán)滾動(dòng)效果
網(wǎng)頁(yè)鏈接：
http://weahome.cn/article/gpgoee.html
重慶分公司
重慶分公司
