⽤CSS实现新闻轮播效果
CSS：
/* Make it a marquee */
.marquee {  width: 450px;margin: 0 auto;overflow: hidden;white-space: nowrap;box-sizing: border-box;animation: marquee 50s linear infinite;} .marquee:hover {animation-play-state: paused}
/* Make it move */
@keyframes marquee { 0%  { text-indent: 27.5em }100% { text-indent: -105em }}
/* Style the links */
.marqueeWord a { color: #1570A6;transition: color .5s;text-decoration: none;}
.marqueeWord a:hover {color: #F65314;}
HTML：
<p class="marquee marqueeWord">
marquee marquee<a ng-repeat="new in news" ng-href="new.url">{{new.title}}      </a>
</p>
其中HTML部分的数组是⽤AngularJS循环出来的。
其中 .matquee样式类中的animation中的50S，是⽤来调整轮播速度，值越⼩越快。infinite代表⽆限循环（循环次数）。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。