簡單的css文字動(dòng)畫效果

發(fā)布時(shí)間：2021-04-06 16:47:06 作者：Nooray Yemon

這篇文章主要介紹了css文字動(dòng)畫效果如何實(shí)現(xiàn)，幫助大家更好的理解和學(xué)習(xí)使用css，感興趣的朋友可以了解下

實(shí)現(xiàn)效果

實(shí)現(xiàn)代碼

html

<div id=container>
  Welcome 
  <div id=flip>
    <div><div>jb51</div></div>
    <div><div>腳本之家</div></div>
    <div><div>歡迎訪問</div></div>
  </div>
  
</div>

<p>a css3 animation demo</p>

css

@import url('https://fonts.googleapis.com/css?family=Roboto:700');

body {
  margin:0px;
  font-family:'Roboto';
  text-align:center;
}

#container {
  color:#999;
  text-transform: uppercase;
  font-size:36px;
  font-weight:bold;
  padding-top:200px;  
  position:fixed;
  width:100%;
  bottom:45%;
  display:block;
}

#flip {
  height:50px;
  overflow:hidden;
}

#flip > div > div {
  color:#fff;
  padding:4px 12px;
  height:45px;
  margin-bottom:45px;
  display:inline-block;
}

#flip div:first-child {
  animation: show 5s linear infinite;
}

#flip div div {
  background:#42c58a;
}
#flip div:first-child div {
  background:#4ec7f3;
}
#flip div:last-child div {
  background:#DC143C;
}

@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
}

p {
  position:fixed;
  width:100%;
  bottom:30px;
  font-size:12px;
  color:#999;
  margin-top:200px;
}

以上就是簡單的css文字動(dòng)畫效果的詳細(xì)內(nèi)容，更多關(guān)于css文字動(dòng)畫效果的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

Tag：css 文字動(dòng)畫

相關(guān)文章

Vue+CSS3實(shí)現(xiàn)文字飛入飛出動(dòng)畫特效代碼
vue css3彩色文字點(diǎn)擊文字飛入效果、文字飛出效果、文字動(dòng)畫效果代碼，非常不錯(cuò)，喜歡的朋友快來下載吧
2021-01-26
CSS3 文字動(dòng)畫效果
這篇文章主要介紹了CSS3 文字動(dòng)畫效果如何實(shí)現(xiàn)，幫助大家更好的使用和制作CSS3特效，感興趣的朋友可以了解下
2020-11-12
CSS3文字圖標(biāo)組合懸停UI動(dòng)畫特效源碼
是一段基于css3屬性制作的鼠標(biāo)懸停文字和圖標(biāo)動(dòng)畫切換效果代碼，主要調(diào)用了藍(lán)色和白色兩種色彩元素，非常清新淡雅，歡迎對(duì)此段代碼有興趣的朋友前來下載使用
2020-09-21
基于css3+svg實(shí)現(xiàn)的文字輪廓邊框線條動(dòng)畫特效源碼
是一段基于css3+svg制作的線條邊框文字輪廓?jiǎng)赢嬏匦?，文字邊框線條開始由一點(diǎn)向右邊流動(dòng)，將字體包裹完成后，在倒流回去，非常有意思，并且邊框線條流動(dòng)過程中，文字顏色也
2020-08-25
css3懸停文字交叉飄動(dòng)切換動(dòng)畫特效
是一段splitting基于css3制作的鼠標(biāo)懸停文字交叉切換，文字飄動(dòng)切換效果代碼，同時(shí)鼠標(biāo)懸停后，文字還有翻轉(zhuǎn)效果，歡迎有興趣的朋友前來下載了解
2020-08-20
CSS3實(shí)現(xiàn)的立體文字重疊動(dòng)畫特效源碼
CSS3實(shí)現(xiàn)的立體文字重疊動(dòng)畫效果是一段基于css3 alpha屬性設(shè)置文本透明度，重疊3D效果，波浪文字動(dòng)畫特效。非常個(gè)性有意思，歡迎感興趣的朋友前來下載使用
2020-08-07
js+css3實(shí)現(xiàn)彩色文字標(biāo)簽云3d立體旋轉(zhuǎn)動(dòng)畫特效
這是一個(gè)基于js+css3制作的彩色文字標(biāo)簽云3d立體旋轉(zhuǎn)動(dòng)畫特效代碼，修改js內(nèi)部文字，即可直接使用，簡單實(shí)用，需要的朋友可下載試試
2020-06-12
CSS3+SVG實(shí)現(xiàn)炫酷的霓虹燈發(fā)光文字動(dòng)畫特效源碼
這是一款基于CSS3+SVG實(shí)現(xiàn)炫酷的霓虹燈發(fā)光文字動(dòng)畫特效源碼。畫面中央是一行空心文字，文字的邊緣帶有模糊發(fā)光的漸變色彩，且漸變色彩不斷地變換著顏色，形成霓虹燈文字漸
2020-02-13
jQuery基于CSS3制作的文字碎片化loading加載動(dòng)畫特效源碼
是一段基于css3 transform變換屬性制作loading文字碎片化加載動(dòng)畫特效，實(shí)現(xiàn)了將文字碎花有合成的動(dòng)畫效果，非常有意思，歡迎有興趣的朋友前來下載
2019-07-11
css3+animation屬性制作拆分loading文字加載動(dòng)畫特效
css3 animation屬性制作loading文字拆分上下滾動(dòng)加載動(dòng)畫特效。非常不錯(cuò)，感興趣的朋友前來下載使用
2019-07-03