标签:
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"> <a ng-repeat="new in news" ng-href="new.url">{{new.title}} </a> </p>
其中HTML部分的数组是用AngularJS循环出来的。
其中 .matquee样式类中的animation中的50S,是用来调整轮播速度,值越小越快。infinite代表无限循环(循环次数)。
标签:
原文地址:http://www.cnblogs.com/golddream/p/4906821.html