css3实现图片横向无缝滚动的效果

来源：互联网发布：网络视频教学编辑：程序博客网时间：2024/05/21 07:50

之前实现无缝滚动大多结合js，如今有了css3，就简单多了。

下面就一起看看实例吧。

html代码：

<div id="wrap">    <ul id="list">      <li>1</li>      <li>2</li>      <li>3</li>      <li>4</li>      <li>5</li>      <li>1</li>      <li>2</li>      <li>3</li>      <li>4</li>      <li>5</li>    </ul></div>

css样式：

*{    margin: 0;     padding: 0;}#wrap{    width: 500px;    height: 100px;     border: 1px solid #000;     position: relative;     margin: 100px auto;     overflow: hidden;}#list{    position: absolute;    left: 0;     top: 0;     margin: 0;     padding: 0;        -webkit-animation: 3s move infinite linear;     width: 200%; }#list li {    list-style: none;     width: 98px;     height: 98px;     border: 1px solid #fff;     background: #000;     color: #fff;     font: 50px/98px Arial;    text-align: center;    float: left;}@-webkit-keyframes move{    0% {          left: 0;    }    100% {          left: -500px;    }}@keyframes move {    0% {       left: 0;    }    100% {       left: -500px;    }}#wrap:hover #list {    -webkit-animation-play-state: paused; /*动画暂停播放*/}

阅读全文

0 0