簡單的css文字動(dòng)畫效果
發(fā)布時(shí)間：2021-04-06 16:47:06 作者：Nooray Yemon 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了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)文章！
相關(guān)文章
Vue+CSS3實(shí)現(xiàn)文字飛入飛出動(dòng)畫特效代碼
vue css3彩色文字點(diǎn)擊文字飛入效果、文字飛出效果、文字動(dòng)畫效果代碼，非常不錯(cuò)，喜歡的朋友快來下載吧2021-01-26
這篇文章主要介紹了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
