CSS3动画

动画属性

Demo 小实例

代码布局

<div class="boxOne">
    <ul class="imgBox">
        <li class="img img1"></li>
        <li class="img img2"></li>
        <li class="img img3"></li>
        <li class="img img4"></li>
    </ul>
    <div class="boxTwo">
        <ul class="iconBox">
            <li><div class="icon icon1"></div></li>
            <li><div class="icon icon2"></div></li>
            <li><div class="icon icon3"></div></li>
            <li><div class="icon icon4"></div></li>
        </ul>
    </div>
</div>

代码样式清单：

<style>
        *{margin: 0;padding: 0}
        li{
            list-style: none;
        }
        .boxOne{
            margin: 0 auto;
            width:247px;
            height: 350px;
            position: relative;
        }
        .imgBox,.img{
            width:247px;
            height: 350px;
        }
        .img + .img{
            opacity:0;
        }
        .img{
            width:100%;
            position:absolute;
            animation-timing-function: linear;
            animation-name:fade;
            animation-iteration-count: infinite;
            background-size:100%;
        }

        /*设置动画，请根据实际需要修改秒数*/
        .img,.icon{
            animation-duration: 20s;
        }
        .img1,.icon1{
            animation-delay: -1s;
        }
        .img2,.icon2{
            animation-delay:3s;
        }
        .img3,.icon3{
            animation-delay:7s;
        }
        .img4,.icon4{
            animation-delay: 11s;
        }
        @keyframes fade {
          0%{
              opacity:0;
              z-index:3;
          }
           5%{
             opacity:1;
              z-index: 2;
         }
         20%{
            opacity:1;
             z-index:1;
          }
         50%{
             opacity:0;
             z-index:0;
         }     
        100%{
             opacity:0;
              z-index:0;
         }
     }

        /*设置背景，响应式请利用媒体查询根据断点修改路径*/
        .img1{
            background-image: url("images/image_1.png");
        }
        .img2{
            background-image: url("images/image_2.png");
        }
        .img3{
            background-image: url("images/image_3.png");
        }
        .img4{
            background-image: url("images/image_4.png");
        }

        .iconBox:after {
            content: "";
            display: table;
            clear: both;
        }
        /*设置轮播焦点的位置*/
        .boxTwo{
            position:absolute;
            z-index:7;
            bottom: 4%;
            left: 40%;

        }
        .boxTwo li{
            width:10px;
            height:10px;
            border-radius:50%;
            float:left;
            margin-right:10px;
            background:#fff;
        }
        .icon{
            width:100%;
            height:100%;
            border-radius:inherit;
            animation-timing-function: linear;
            animation-name:fade;
            animation-iteration-count: infinite;
        }

        .icon2,.icon3,.icon4{
            opacity: 0;
        }
        
        /*设置当前图片焦点的颜色*/
        .icon{
            background: #51B1D9;
        }
    </style>