使用css制作轮播图

最新推荐文章于 2024-10-30 08:37:39 发布

weixin_30596343

最新推荐文章于 2024-10-30 08:37:39 发布

阅读量118

点赞数

文章标签： ui

原文链接：http://www.cnblogs.com/changx/p/10792857.html

版权

<!DOCTYPE html>

<li><img src="images/ui01.jpg" alt="pic"></li>
　　　　　　　　　　</ul>
　　　　　　　　</div>
　　　　　　</div>
　　　　</div>
　　</div>
</body>
</html>

.user{
　　min-height: 808px;
}
.container{
　　width: 1000px;
　　margin:0 auto;
}
.user-inner{
　　min-width: 808px;
}
.iphone{
　　width: 193px;
　　height: 408px;
　　background: url(../images/ui-phone.png) no-repeat;
　　position:relative;
}
.iphone-inner{
　　width: 167px;
　　height: 295px;
　　background-color: red;
　　position: absolute;
　　top: 57px;
　　left: 14px;
　　overflow: hidden;
}
.iphone-inner:hover ul{
　　animation-play-state:paused;
}
.iphone-inner ul{
　　width: 1169px;
　　position: absolute;
　　top: 0;
　　left: 0;

animation:imggo 10s linear infinite;
}
.iphone-inner ul li{
　　float: left;
}
.iphone-inner ul li img{
　　width: 167px;
　　height: 295px;
}

@keyframes imggo{
　　0%{
　　　　left:0;
　　}
　　10%{
　　　　left:0;
　　}
　　16.66%{
　　　　left:-167px;
　　}
　　26.66%{
　　　　left:-167px;
　　}
　　33.33%{
　　　　left:-334px;
　　}
　　43.33%{
　　　　left:-334px;
　　}
　　50%{
　　　　left:-501px;
　　}
　　60%{
　　　　left:-501px;
　　}
　　66.66%{
　　　　left:-668px;
　　}
　　76%{
　　　　left:-668px;
　　}
　　83.33%{
　　　　left:-835px;
　　}
　　93.33%{
　　　　left:-835px;
　　}
　　100%{
　　　　left:-1002px;
　　}
}