图片轮播的实现

1.图片轮播(使用动画,根据图片不同时间的移动值来实现,图片排放在一个容器中,图片大小要与容器大小一致)

#photo>img{
    float:left;
    width:330px;
    height:470px;
  }
  #photo{
    width:1650px;
    animation:switch 7s ease-out infinite;
  }
 
"container">
"photo"> "images/dushu2.jpg"> "images/dushu3.jpg"> "images/book (4).jpg"> "images/book (5).jpg"> "images/dushu (6).jpg">

上述每个图片宽度为330px;
img第一外层的photo为图片容器,即在此盒子中放了5张图片;图片中有添加 float的效果,这样就不用考虑去边距问题。

#container{
    width:990px;
    height:450px;
    overflow: hidden; 
      }
 

img第二外层的container为所展示图片的容器,上述所展示为3张,剩余两张图片溢出使用overflow:hidden来将其隐藏起来

 #photo{
    width:1650px;
    animation:switch 7s ease-out infinite;
  }
@keyframes switch{
    0%,25%{margin-left: 0;}
    35%,65%{margin-left:-330px;}
    75%,100%{margin-left: -660px;}
  }

上述为使所展示的容器中均有3张图片,一共5张图片,第一阶段展现出来的即为前三张;第二阶段第一张图片左一一个宽度展现出来的为第2,3,4张图片;第三阶段移动2个图片的宽度展现出来后3张图片。
该动画一个周期为7s,且以慢速 无限循环;
35%~65%为图片停留阶段,和第一阶段空出来的时间为动画切换的部分;
2.图片渐变轮播(实现前面图片消失时后一个隐隐出现的效果)


先创建轮播图片的div,id为RotationPicture,在创建一个放入图片的div,id为screen,其中放了4张图片链接。
将图片设为宽度和高度都设置成100%,可以使整个图片显示出来;自由缩放图片且图片放大的尺寸不大于其原始值可以将其设置为max-weight:100%;height:auto;;背景图片可以使其为background-size:100%;使整个背景图片完全放入div中。

#RotationPicture{
    height:50px;
}
#screen a{
    position:absolute;
    animation: donghua 12s Infinite;
}
@keyframes donghua{
    0%{opacity: 0;}
    3%{opacity:1;}
    25%{opacity: 1;}
    28%{opacity: 0;}
}
#screen a:nth-child(1){animation-delay:0s}
#screen a:nth-child(2){animation-delay:3s}
#screen a:nth-child(3){animation-delay:6s}
#screen a:nth-child(4){animation-delay:9s}

先要设置容器的大小位置;动画周期为12s,无限循环;animation-delay为动画延迟时间,即第二张图片于整个阶段第3s开始播放,第3张图片于第6s开始播放;0%-3%中有3%的过渡时间(12s的3%),从刚刚开始的完全透明逐渐过渡到完全不透明,25%-28%再由完全不透明逐渐过渡到完全透明,实现前一张图片消失,同时后一张图片出现的效果。

你可能感兴趣的:(css3,css,动画)