发表于： 2019-07-14 23:33:34
1 883
今天完成的事：在坑呼上找到轮播图的思路和方法，还有师兄之前给的那个轮播图链接， 基本上把轮播图的实现原理搞清楚了，之后就是在菜鸟上查css3动画属性，结合前面的实现原理，总算把这之前一直以为很难的问题给解决了。
明天的计划：不能再拖了要抓紧进js，还要把任务在进行一些精修一下给css阶段画上一个完美的逗号。
遇到的问题：轮播图最大的难点就下面的几个小点和图片的完美配合，主要就是时间不好调配。还有就是从最后一个切换到第一个的过渡，我的解决办法是让他提前开始过渡
.carousel {
position: relative;
width: 100VW;
height: 31vw;
overflow: hidden;
font-size: 0;
}
.carousel-mian {
position: absolute;
left:0;
width: 500VW;
animation: carousel-pictures 12s infinite;
>div{
display: inline-block;
width: 100VW;
}
}
@keyframes carousel-pictures {
0%,15%{left: 0;}
25%,35%{left: -100vw;}
50%,60%{left: -200vw;}
75%,90%{left: -300vw;}
100%{left: -400vw;}
}
.carousel-msg {
height: 20px;
width: 60px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -30px;
display: flex;
justify-content: space-around;
align-items: center;
z-index: 10;
}
.carousel-msg>div{
height: 10px;
width: 10px;
border-radius: 50%;
background-color: #1f7c55;
}
.item-carousel-1 {
animation: item-carousel-1 12s infinite;
}
@keyframes item-carousel-1 {
0%,15% {background-color: #1f7c55}
25%,90%{background-color: #fff;}
98%,100% {background-color: #1f7c55;}/*提前开始过渡*/
}
.item-carousel-2 {
animation: item-carousel-2 12s infinite;}
@keyframes item-carousel-2 {
0%,15% {background-color: #fff}
25%,35%{background-color: #1f7c55;}
50%,100%{background-color: #fff;}
}
.item-carousel-3 {
animation: item-carousel-3 12s infinite;}
@keyframes item-carousel-3 {
0%,35% {background-color: #fff}
50%,60%{background-color: #1f7c55;}
75%,100%{background-color: #fff;}
}
.item-carousel-4 {
animation: item-carousel-4 12s infinite;}
@keyframes item-carousel-4 {
0%,60% {background-color: #fff}
75%,90%{background-color: #1f7c55;}
100% {background-color: #fff;}
}
收获：发现自己最大问题就是学习效率太低。
返回列表
评论