Screenshot:
JSFiddle: https://jsfiddle.net/650spwen/
Last active
August 14, 2018 03:14
-
-
Save Clarence-pan/d3f230d661885af6ea6bc111eb803e4f to your computer and use it in GitHub Desktop.
【小程序可用】CSS3 animation 实现的跑马灯
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*小程序中请复制到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; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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