发表于: 2018-09-22 20:34:28

1 942


今天完成的事情:


今天完成了任务1415,但是轮播图没有做出想要的效果,所以就重新做了一个,能点有动画的,但是还没有完成。
明天计划的事情


明天放假


遇到的问题:

 

轮播图一开始虽然能轮播,但是不能点击然后变换,所以就去看网上的教程,然后用动画效果做出来的。

/*创建三种动画策略*/
@-webkit-keyframes slide1 {

   0%,25% {
       margin-left: 0;
   }
   35%, 50% {
       margin-left: -100%;
   }
   60%,100% {
       margin-left: -200%;
   }
}
@-webkit-keyframes slide2 {

   0%,25% {
       margin-left:-100% ;
   }
   35%, 50% {
       margin-left: -200%;
   }
   60%,100% {
       margin-left: 0;
   }
}
@-webkit-keyframes slide3 {

   0%,25% {
       margin-left: -200%;
   }
   35%, 50% {
       margin-left: -100%;
   }
   60%,100% {
       margin-left: 0;
   }
}

要首先创建3种动画效果,第一种从第一张图片开始,第2种从第2张图片开始,以此类推,然后加上lable按钮,关联一起,点击的时候重置并切换它的动画效果,达到点击切换图片的效果,

/*修改动画名称*/
#l01:checked ~ #wrap #slider {
   -webkit-animation-name:slide1;
}

#l02:checked ~ #wrap #slider {
   -webkit-animation-name:slide2;
}

#l03:checked ~ #wrap #slider {
   -webkit-animation-name:slide3;
}


/*短暂地取消动画名称,模拟重启动画*/
#l01:active ~ #wrap #slider {
   -webkit-animation-name:none;
   margin-left:0;
}


#l02:active ~ #wrap #slider {
   -webkit-animation-name:none;
   margin-left:-100%;
}

#l03:active ~ #wrap #slider {
   -webkit-animation-name:none;
   margin-left:-200%;
}

<input type="radio" checked name="slider" id="l01">

用input框关联lable按钮,然后点击切换,改变3个动画名称,导致他不会出错,

然后加上动画效果,然后就开始自动轮播还可以点击,效果很好,按钮的部分,可以改变样式,然后绝对定位到图片上,就做出来需要的效果,

理论基础 CSS3 animation 属性和 @keyframes 规则 主体思想 准备相同大小的多个图片 将要展示图片横排放在一个图片容器里面 在图片容器外再加一个展示容器,展示容器大小为图片大小 给图片容器添加自定义动画,在动画不同阶段设置递增的偏移值 注意事项 动画效果分为切换和停留两部分 自定义动画阶段与图片数量相关 动画各阶段偏移值与图片大小相关  

收获:

今天了解了动画效果,还可以那样用,做出轮播图的效果,收获很多。


返回列表 返回列表
评论

    分享到