animation 实现跑马灯上下或者左右滚动

深碍√TFBOYSˉ_ 2022-11-20 09:44 197阅读 0赞

// 左右滚动 对应结构span
      //.container_text{
      //  display: inline-block;
      //  //padding-left: 100%; /* show the marquee just outside the paragraph */
      //  animation: marquee 18s linear infinite;
      //  font-family: PingFang-SC-Medium;
      //  font-size: 12px;
      //  color: #2e9ffb;
      //  .notify_title{
      //    margin-right: 60px;
      //  }
      //}
    
    
      // 上下滚动 对应结构div
      .container_text{
        display: inline-block;
        padding-top: 10%;
        animation: marquee 5s linear infinite;
        font-family: PingFang-SC-Medium;
        font-size: 12px;
        color: #2e9ffb;
        .notify_title{
          margin-left: 80px;
        }
      }
    }

/* Make it move 左右滚动 */
    //@keyframes marquee {
    //  0% {
    //    transform: translate(0, 0);
    //  }
    //  100% {
    //    transform: translate(-100%, 0);
    //  }
    //}
    
    
    // 上下滚动
    @keyframes marquee {
      0% {
        transform: translate(0, 0);
      }
      100% {
        transform: translate(0, -100%);
      }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，197人围观）

还没有评论，来说两句吧...

相关阅读

相关 animation跑马灯动画实现两种方法

//方法一 @interface ViewController () @end @implementation ViewCo

一时失言乱红尘/ 2023年10月17日 02:25/ 0 赞/ 33 阅读

相关 Android新闻公告切换效果(上下滚动&左右滚动)

今日，看到淘宝的一个效果，之前做的App中没做过，就实现了一下。使用的是原生的控件TextSwitcher，进行了简单的封装处理。 ![Android新闻公告切换效果][A

- 日理万妓/ 2023年06月19日 09:59/ 0 赞/ 27 阅读

相关 animation 实现跑马灯上下或者左右滚动

// 左右滚动对应结构span //.container_text{ // display: inline-block; //

深碍√TFBOYSˉ_/ 2022年11月20日 09:44/ 0 赞/ 198 阅读

相关 HarmonyOS 实现跑马灯效果

`跑马灯效果实现效果图` ![20210728102605974.gif][] `注意事项: HarmonyOS里面Text由于multiple_lines默认为fals

野性酷女/ 2022年09月01日 13:47/ 0 赞/ 226 阅读

相关 TextView实现跑马灯效果

下面是布局代码，需要注意的是设置singleLine属性、ellipsize属性、focusable属性和focusableInTouchMode属性 <TextVi

冷不防/ 2022年08月14日 05:40/ 0 赞/ 265 阅读

相关 vue实现跑马灯效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

深碍√TFBOYSˉ_/ 2022年04月18日 06:23/ 0 赞/ 532 阅读

相关 vue-seamless-scroll实现无缝上下滚动与左右滚动

vue-seamless-scroll实现无缝上下滚动与左右滚动上下滚动与左右滚动是我们很常见的一个功能，利用vu

╰半橙微兮°/ 2022年03月29日 14:48/ 0 赞/ 634 阅读

相关一直滚动的TextView[跑马灯效果]

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] /\\ \ 一直滚动的TextView\[跑马灯效

朱雀/ 2022年01月16日 01:31/ 0 赞/ 335 阅读

相关 android实现跑马灯效果

第一步：新建一个新项目，MarqueeTextView 首先为了观察到跑马灯效果，将要显示的文字极可能写长。在strings.xml目录里面将 <string

超、凢脫俗/ 2021年10月23日 07:59/ 0 赞/ 478 阅读

相关 JQuery 公告滚动(跑马灯特效)

一.公告向左滚动 ![20170713135450828][] <!DOCTYPE HTML> <html> <head> <meta charset="ut

短命女/ 2021年09月13日 14:48/ 0 赞/ 360 阅读