代码改变世界
[登录 · 注册]
  • css 跑马灯
  • html:

    <view class="in_scro">
      <view class="in_scrview">恭喜139******1用户约看特价房</view>
      <view class="in_scrview">恭喜139******1用户约看特价房</view>
      <view class="in_scrview">恭喜139******1用户约看特价房</view>
      <view class="in_scrview">恭喜139******1用户约看特价房</view>
      <view class="in_scrview">恭喜139******1用户约看特价房</view>
      <view class="in_scrview">恭喜139******1用户约看特价房</view>
    </view>

    css:

        /* 跑马灯 */
        .in_scro {
            height: 150px;
            width: 80%;
            margin: 15px auto;
            overflow: hidden;
        }
    
        .in_scrview {
            color: #000000;
            font-size: 15px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            animation: myMove 2s linear infinite;
            animation-fill-mode: forwards;
        }
    
        /*     .in_scrview:nth-child(even) {
            color: #686767;
            font-size: 16px;
        } */
    
        /*文字无缝滚动*/
        @keyframes myMove {
            0% {
                transform: translateY(0);
            }
    
            50% {
                transform: translateY(-30px);
            }
    
            100% {
                transform: translateY(-60px);
            }
        }
  • 【推广】 阿里云小站-上云优惠聚集地(新老客户同享)更有每天限时秒杀!
    【推广】 云服务器低至0.95折 1核2G ECS云服务器8.1元/月
    【推广】 阿里云老用户升级四重礼遇享6.5折限时折扣!
  • 原文:https://www.cnblogs.com/sxdpanda/p/13644939.html
Copyright 2008-2020 晋ICP备12007731号-1