如何讓將一段話分成三段迴圈淡入淡出

2021-10-03 22:29:39 字數 785 閱讀 8541

將一段話分成三段,第一段顯示後隱藏後接著第二段顯示隱藏接著第三段,第一段…一直迴圈,要求每次顯示隱藏時文字要淡入淡出。參考:

將淡入淡出的動畫效果寫在乙個類中,然後通過js新增移除這個類來實現

@keyframes txt-fade 

50%

100%

}.slider_text_one

.fade

//獲取dom節點

var txtone=document.queryselector('.txt-one');

var txttwo=document.queryselector('.txt-two');

var txtthree=document.queryselector('.txt-three');

//頁面載入時,給txtone加入動畫,執行一次

txtone.classlist.add('fade');

//監聽txt-one動畫是否結束

txtone.addeventlistener('animationend',function())

txttwo.addeventlistener('animationend',function())

txtthree.addeventlistener('animationend',function())

@keyframes、animation和addeventlistener會有瀏覽器相容問題

效果參考:

百科一段話

div css是 標準 或稱 web標準 中常用術語之一,div css 是一種網頁的布局方法,這一種網頁布局方法有別於傳統的html網頁設計語言中的 table 定位方式,可實現網頁頁面內容與表現相分離。xhtml是the extensible hypertext markup language ...

送給自己的一段話

乙個人去過多少地方 見過多少人 決定了他思維的寬度和內心的包容程度 如果你去過 你會對生死有不同的想法 如果你從歐洲遊歷一圈兒 你不會以為失去乙個前男友就失去了整個宇宙 如果你在美國住上一段時間 你就不再有狹隘的反美情緒或者狂熱的西方崇拜 懂的葡萄酒的產地和身份 看得出普洱的好壞和年份 說的出莫奈和...

昨天聽了 阿杜 的一段話

昨天晚上回去的時候,我和張峰站在阿杜 寢室的門口聽張小清們開組內部的會議,然後 就跑到阿杜寢跟我說自己生了病,辦法醫治,自己的生活很 感覺很難過之類的話語,後來阿杜進來了,就問阿杜怎麼提高生活質量,讓自己有精神。然後我們開始談起了 養生之道了 呵呵。阿杜由於很會說會,而且在對社會的了解比我們深,在加...