实现一个简单的幻灯片效果页面

css3 animation3 实现颜色切换

<div class="box"></div>
<style>
.box{
    width: 200px;
    height: 100px;
    border:1px solid;
    animation:loop 10s infinite
}
@keyframes loop{
    0%{ background: pink;}
    50%{ background: green;}
    100%{ background: gold;}
}
</style>

 

左右切换

 

<div class="ulbox">
 <ul>
  <li style="background:pink">1</li>
  <li style="background:black">2</li>
  <li style="background:yellow">3</li>
 </ul>
</div>

.ulbox {

    width: 200px;

    height: 100px;

    overflow: hidden;

    border: 1px solid;

}

.ulbox ul {

    width: 600px;

    position: relative;

    animation:loop 2s infinite

}

.ulbox li {

    float: left;

    width: 200px;

    height: 100px;

    list-style: none;

    color: red;

}

@keyframes loop {

    0% {

        left: 0;

    }

    50% {

       left: -200px;

    }

    100% {

        left: -400px;

    }

}

• 1
• 2
• 3