背景自动切换动画和通过过渡实现图片平移（animation和transition的使用）

代码

HTML

"en">

    "UTF-8">
    
    "main.css" rel="stylesheet">


"mr-bakg">
    
"mr-picbom">
        
"mr-pic">"images/phine1.png" alt="" />
        
"mr-picleft">"images/phine2.png" alt="" />
        
"mr-picright">"images/phone3.png" alt="" />
    

CSS

.mr-bakg{
                 /* 给背景div设置样式 */
    margin:0 25%;     /* 设置其外边距 */
    width:575px;         /* 设置宽度 */
    height:300px;     /* 设置高度 */
    border:1px #f00 solid;
    background:url(./images/01.jpg);   /* 添加一张默认的背景图片 */
    animation:cs1 10s linear normal infinite;
}
@keyframes cs1          {
     
    25%{
      background:url(./images/01.jpg)}
    50%{
      background:url(./images/02.jpg)}
    75%{
      background:url(./images/03.jpg)}
    100%{
      background:url(./images/01.jpg)}
}
.mr-picbom{
            /* 放置图片的盒子 */
    position:relative;   /* 设置其定位方式为相对定位 */
    margin:50px 242px;   /* 设置其上下边距和左右边距 */
    width:110px;
    height:190px;
}
.mr-picleft,.mr-picright{
         /* 通过定位将左右两张图片与中间图片重合 */
    position: absolute;       /* 设置其为绝对定位 */
    top: 0px
}
.mr-picbom:hover .mr-picleft{
         /* 当鼠标悬停于中间图片时，左边图片向左边平移 */
    transform: translateX(190px);
    transition:all 1s ease;
}
.mr-picbom:hover .mr-picright{
          /* 当鼠标悬停于中间图片时，右边图片向右边平移 */
    transform: translateX(-190px);
    transition:all 1s ease;
}