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

来源：互联网发布：mac os x lion 10.7.3 编辑：程序博客网时间：2024/05/22 04:42

/*文字轮播 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>

<!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>

阅读全文

0 1