CSS实现轮播效果

原理：在div1中放入第二个div2，限制div1的宽为一张图片的宽，并隐藏div2溢出的宽度，在div2中横向并排n个图片，div2的宽是N张图片的宽度之和，div2左右移动即可实现图片轮播。

运用css3里的animation实现轮播。

语法：
animation: name duration timing-function delay iteration-count direction;
animation:动画名称 动画时长 速度曲线 延时 执行次数 动画是否轮流正向反向

定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：

  • animation-name：规定需要绑定到选择器的 keyframe 名称
  • animation-duration：规定完成动画所花费的时间，以秒或毫秒计
  • animation-timing-function：规定动画的速度曲线
  • animation-delay：规定在动画开始之前的延迟
  • animation-iteration-count：规定动画应该播放的次数。
  • animation-direction：规定是否应该轮流反向播放动画
  • 注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

通过 @keyframes 规则，您能够创建动画。

 

@keyframes创建动画的原理是：将一套 CSS 样式逐渐变化为另一套样。

　　　　在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。（为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。）

　　　　注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

< DOCTYPE!html>
<meta charset="UTF-8"> 
<head> 
    <style>
        div{
                background:red;    
}
/* mymove是自己取的动画名称，是必须存在的*/
        @keyframes  mymove{
            from {top:0px;}
            to {top:200px;}
 }  
    </style>
</head>   
<body>
    <div></div>
</body>   /*此时div会匀速从0px向下行驶200px*/

@keyframes语法：

语法：
@keyframes animationname {keyframes-selector {css-styles;}}

@keyframes 动画名称｛
    动画时长｛css样式｝
｝

animationname：指定义一个动画名称（必需）；

keyframes-selector：指动画时长的百分比（必需）。
    合法的值：
    0-100%
    from（与 0% 相同）
    to（与 100% 相同） 
css-styles：一个或多个合法的 CSS 样式属性

  
一个动画中添加多个keyframes选择器
@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}
给div改变多个css样式
@keyframes mymove
{
/*0秒开始，div距离上0px，100%结束时距离上200px，0-100%过程中慢慢由红色变黄色且宽度由100变300px*/
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

@keyframes跟动画animation结合操作：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../css/overflow.css"/>
</head>
<body>
<div class="box1">
    <div class="box" id="play">
        <img src="../image/marvel_fans/dm_pic01.jpg" alt=""/>
        <img src="../image/marvel_fans/dm_pic02.jpg" alt="" class="b">
        <img src="../image/marvel_fans/dm_pic03.jpg" alt=""/>
        <img src="../image/marvel_fans/dm_pic04.jpg" alt=""/>
    </div>
</div>
</body>
</html>
.box1{
    width:230px;
    height: 130px;
    overflow: hidden;
}
.box img{
    width: 230px;
    height: 130px;
    float: right;
}
#play{
   width: calc(230px*4);
    animation:carousel 12s ease-in-out infinite ;
}
@keyframes carousel {
    0%,25%{  margin-left: 0px; }
    30%,50%{  margin-left: -230px; }
    55%,75%{  margin-left: -460px; }
    80%,100%{  margin-left: -690px; }
}

 







        

        

            posted on 
2017-10-15 22:00 
Mikolulu 
阅读(1150) 
评论(0) 
 
收藏 
举报

        

    










    
    

    
    

    

        

    

        

            
                
                
            
        

    

    
    

    

    





            

        

        

            

导航