小程序文字跑马灯 h5文字跑马灯

/*文字轮播 wxss*/
        @keyframes kf-marque-animation{ 0% { transform: translateX(0); } 100% { transform: translateX(-33.3%); } }
        .marquee{
            width: 100%;
            height: 44px;
            line-height: 44px;
            background: #fff;
            border: none;
            display: block;
            margin: 0 auto;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: clip;
            position: relative;
            font-size: 28rpx;
        }
        .marquee .content{
            display: inline-block;
            position: relative;
            padding-right: 0px;
            animation: kf-marque-animation 20s linear infinite;
            white-space: nowrap;

        }

<!-- 文字轮播 -->
    <view class="marquee">
        <view class="content">
            <text>{{broadcasting}}</text> <text style="display: inline-block; width: 5em;"></text>
            <text>{{broadcasting}}</text> <text style="display: inline-block; width: 5em;"></text>
            <text>{{broadcasting}}</text> <text style="display: inline-block; width: 5em;"></text>
        </view>
    </view>

h5

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3 Marquee Test</title>
    <style>

        @keyframes kf-marque-animation{ 0% { transform: translateX(0); } 100% { transform: translateX(-33.3333%); } }
        .marquee{
            width: 400px;
            height: 44px;
            line-height: 44px;
            background: #e9eaea;
            display: block;
            margin: 0 auto;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: clip;
            position: relative;
        }
        .marquee .content{
            display: inline-block;
            position: relative;
            padding-right: 0px;
            white-space: nowrap;
            animation: kf-marque-animation 12s infinite linear;
        }
        .marquee .content-space{
            display: inline-block;
            width: 5em;
        }
    </style>
</head>
<body>


<div class="marquee">
  <span class="content">
    raw js + css3 transition 跑马灯测试。跑马灯测试。跑马灯测试。 <span class="content-space"></span>
  </span>
</div>


<script>
//滚动
(function () {
  var speed = 50; // 速度 -- px每秒

  var $marquee = document.querySelector('.marquee');
  var $marqueeContent = $marquee.querySelector('.content');
  // 内容复制3份好有连续性
  $marqueeContent.innerHTML = $marqueeContent.innerHTML + $marqueeContent.innerHTML + $marqueeContent.innerHTML
  var contentWidth = $marqueeContent.getBoundingClientRect().width;
  if (contentWidth <= 0) { // 没有内容搞什么动画
    return;
  }

  // 内容复制了3份,宽度也要除以3
  contentWidth = contentWidth / 3

  // 计算一次动画应该要花费多少时间
  var onceTime = contentWidth / speed * 1000; //ms

  $marqueeContent.style.animationDuration = onceTime + "ms"
})()
</script>

</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值