用css如何做一个文字动画效果？一文带你看懂
发布时间：2022-02-14 13:40:10 所属栏目：语言 来源：互联网
导读：今天给大家分享的是用css做一个文字动画效果的内容，本文实现的动画效果比较简单，但是对新手学习和了解CSS动画效果的实现有一定的帮助，有需要的朋友可以参考一下，下面一起跟随小编来学习一下吧。 实现代码 html div id=container Welcome div id=flip div
|
今天给大家分享的是用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; } （编辑：信阳站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
