码迷,mamicode.com
首页 > Web开发 > 详细

用CSS实现新闻轮播效果

时间:2015-10-24 15:50:06      阅读:273      评论:0      收藏:0      [点我收藏+]

标签:

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}} &nbsp; &nbsp; &nbsp;</a>
</p>

其中HTML部分的数组是用AngularJS循环出来的。

其中 .matquee样式类中的animation中的50S,是用来调整轮播速度,值越小越快。infinite代表无限循环(循环次数)。

 

用CSS实现新闻轮播效果

标签:

原文地址:http://www.cnblogs.com/golddream/p/4906821.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!