CSS 动画帧自动滚动

最新推荐文章于 2024-04-05 21:12:09 发布

勤奋的懒洋洋350

最新推荐文章于 2024-04-05 21:12:09 发布

阅读量458

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_64374806/article/details/128232805

版权

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯css实现文字循环滚动效果及暂停</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
 
        .box {
            width: 150px;
            height:300px;
            margin: 0 auto;
            border: 0px solid #ff6700;    
            background-color:black;     
            overflow: hidden;
        }
   
 
        .animate {
            padding-top: 50px;
            padding-left: 10px;
            font-size: 12px;
            color: #000;
            display: inline-block;
            white-space: nowrap;
            animation: 5s wordsLoop linear infinite normal;
        }
 
        @-webkit-keyframes wordsLoop {
            0% {
                transform: translateY(250px);
                -webkit-transform: translateY(250px);
            }
            100% {
                transform: translateY(-100%);
                -webkit-transform: translateY(-100%);
            }
        }

     .animate:hover{
      animation-play-state: paused;

     }
    </style>
</head>
<body>
<div class="box">
    <p class="animate" style="color:yellow;font-size:20px;"> 
     <span id='shower'>
         从下向上滚动
     </span>
    </p>
</div>
</body>
</html>

2.从右往左

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯css实现文字循环滚动</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height:30px;
            margin: 0 auto;
            border: 0px solid #ff6700;    
            background-color:black;     
            overflow: hidden;
        }
        .animate {

            padding-left: 10px;
            font-size: 12px;
            color: #000;
            display: inline-block;
            white-space: nowrap;
            animation: 5s wordsLoop linear infinite normal;
        }
 
        @-webkit-keyframes wordsLoop {
            0% {
                transform: translateX(250px);
                -webkit-transform: translateX(250px);
            }
            100% {
                transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
            }
        }
     .animate:hover{
      animation-play-state: paused;
     }
    </style>
</head>
<body>
<div class="box">
    <p class="animate" style="color:yellow;font-size:20px;"> 
     <span id='shower'>
         从右往左滚动
     </span>
    </p>
</div>
</body>
</html>