Skip to content

Instantly share code, notes, and snippets.

@Clarence-pan

Clarence-pan/0_跑马灯【微信小程序可用】.md

Last active August 14, 2018 03:14
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Clarence-pan/d3f230d661885af6ea6bc111eb803e4f to your computer and use it in GitHub Desktop.
Save Clarence-pan/d3f230d661885af6ea6bc111eb803e4f to your computer and use it in GitHub Desktop.
Download ZIP
【小程序可用】CSS3 animation 实现的跑马灯
Raw
0_跑马灯【微信小程序可用】.md
Raw
1_marquee.css
/*小程序中请复制到xxx.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 11.3s linear infinite;
white-space: nowrap;
}
Raw
2_marquee.wxml
<view>3 css3 + animation跑马灯</view>
<view class="marquee">
<view class="content">
<text>{{text}}</text> <text style="display: inline-block; width: 5em;"></text>
<text>{{text}}</text> <text style="display: inline-block; width: 5em;"></text>
<text>{{text}}</text> <text style="display: inline-block; width: 5em;"></text>
</view>
</view>
Raw
3_marquee.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment