移动端的公告怎么用css3实现

最新推荐文章于 2022-07-13 17:03:04 发布

weixin_30980795

最新推荐文章于 2022-07-13 17:03:04 发布

阅读量186

点赞数

本文链接：https://blog.csdn.net/weixin_30980795/article/details/108545781

版权

一、效果
在这里插入图片描述
二、代码（html和css）
注意：新建一个html文件就可以实现
animation用来实现动画配合@keyframes使用
语法：动画指定需要多少秒或毫秒完成

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

name: 指定要绑定到选择器的关键帧的名称
duration:动画指定需要多少秒或毫秒完成
timing-function:设置动画将如何完成一个周期
delay:设置动画在启动前的延迟间隔。
iteration-count:定义动画的播放次数。
direction: 指定是否应该轮流反向播放动画。
fill-mode: 指定是否应该轮流反向播放动画。（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
play-state:指定动画是否正在运行或已暂停。

transform用来实现过渡效果
w3c文档介绍：transform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes wordsLoop {
      0% {
        transform: translateX(600px);
      }

      100% {
        transform: translateX(-100%);
      }
    }

    .box {
      width: 600px;
      overflow: hidden;
      margin-right: 26px;

     


    }
    .animation {
        display: inline-block;
        padding-left: 20px;
        color: #FF0027;
        font-size: 24px;
        line-height: 24px;
        white-space: nowrap;
        animation: wordsLoop 10s linear infinite normal;

      }
    </style>
</head>
<body>
    <div class='notice'>
        <div class='box'>
          <span class='animation'>因国庆假期车管所业务暂停，9月26日起邮寄资料的年审</span>
        </div>
      </div>
</body>
</html>

weixin_30980795

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端的公告怎么用css3实现

一、效果二、代码（html和css）注意：新建一个html文件就可以实现animation用来实现动画配合@keyframes使用语法：动画指定需要多少秒或毫秒完成animation: name duration timing-function delay iteration-count direction fill-mode play-state;name: 指定要绑定到选择器的关键帧的名称duration:动画指定需要多少秒或毫秒完成timing-function:设置动画将如何完成
复制链接

扫一扫