用css如何做一个文字动画效果？

发布时间：2023-09-11 12:10:10 所属栏目：语言来源：

导读：今天给大家分享的是用css做一个文字动画效果的内容，本文实现的动画效果比较简单，但是对新手学习和了解CSS动画效果的实现有一定的帮助，有需要的朋友可以参考一下，下面一起跟随小编来学习一下吧。

实现代码

今天给大家分享的是用css做一个文字动画效果的内容，本文实现的动画效果比较简单，但是对新手学习和了解CSS动画效果的实现有一定的帮助，有需要的朋友可以参考一下，下面一起跟随小编来学习一下吧。

实现代码
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实现文字动画效果就介绍到这，希望本文对大家学习使用CSS3有帮助。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!