热门推荐

    [CSS教程] 简单的css文字动画效果

    百宝网 Lv.7 显示全部楼层 发表于 2021-8-19 19:37:01

    实现效果


    202146164346619.gif

    202146164346619.gif

    实现代码


    html

    1. <div id=container>
    2.   Welcome
    3.   <div id=flip>
    4.     <div><div>jb51</div></div>
    5.     <div><div>脚本之家</div></div>
    6.     <div><div>欢迎访问</div></div>
    7.   </div>
    8.   
    9. </div>

    10. <p>a css3 animation demo</p>
    复制代码

    css


    1. @import url('https://fonts.googleapis.com/css?family=Roboto:700');
    2. body {
    3.   margin:0px;
    4.   font-family:'Roboto';
    5.   text-align:center;
    6. }
    7. #container {
    8.   color:#999;
    9.   text-transform: uppercase;
    10.   font-size:36px;
    11.   font-weight:bold;
    12.   padding-top:200px;  
    13.   position:fixed;
    14.   width:100%;
    15.   bottom:45%;
    16.   display:block;
    17. }
    18. #flip {
    19.   height:50px;
    20.   overflow:hidden;
    21. }
    22. #flip > div > div {
    23.   color:#fff;
    24.   padding:4px 12px;
    25.   height:45px;
    26.   margin-bottom:45px;
    27.   display:inline-block;
    28. }
    29. #flip div:first-child {
    30.   animation: show 5s linear infinite;
    31. }
    32. #flip div div {
    33.   background:#42c58a;
    34. }
    35. #flip div:first-child div {
    36.   background:#4ec7f3;
    37. }
    38. #flip div:last-child div {
    39.   background:#DC143C;
    40. }
    41. @keyframes show {
    42.   0% {margin-top:-270px;}
    43.   5% {margin-top:-180px;}
    44.   33% {margin-top:-180px;}
    45.   38% {margin-top:-90px;}
    46.   66% {margin-top:-90px;}
    47.   71% {margin-top:0px;}
    48.   99.99% {margin-top:0px;}
    49.   100% {margin-top:-270px;}
    50. }
    51. p {
    52.   position:fixed;
    53.   width:100%;
    54.   bottom:30px;
    55.   font-size:12px;
    56.   color:#999;
    57.   margin-top:200px;
    58. }
    复制代码

    以上就是简单的css文字动画效果的详细内容,更多关于css文字动画效果的资料请关注百宝网其它相关文章!
    回复

    使用道具 举报

    发表回复

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

  • 返回顶部

  • 快速回复 返回顶部 返回列表