发表于： 2019-07-12 22:31:25
1 819
今天完成的事情：今天学习了手动css轮播图，也是使用input的:checked属性，将相应的按键和背景连接起来，然后用:nth-of-type(n)属性和按键连接起来，使得左边第一个按键对应第二个图，第二个按键对应第三个图。第三个按键对应第一个图，做出点击左键，图片向左翻动的效果，右边的按键则是另一个顺序，下侧的点击按键则一一对应即可，
#map1:checked ~ .map-one {
left: 0;
transition: 0.3s linear;
}
#map2:checked ~ .map-one {
left: -100vw;
transition: 0.3s linear;
}
#map3:checked ~ .map-one {
left: -200vw;
transition: 0.3s linear;
}
#map1:checked ~ .circle label:nth-of-type(1),
#map2:checked ~ .circle label:nth-of-type(2),
#map3:checked ~ .circle label:nth-of-type(3) {
background-color: #fff;
}
#map1:checked ~ .arrow-left label:nth-of-type(3),
#map2:checked ~ .arrow-left label:nth-of-type(1),
#map3:checked ~ .arrow-left label:nth-of-type(2) {
@extend %check;
left: 10vw;
}
#map1:checked ~ .arrow-right label:nth-of-type(2),
#map2:checked ~ .arrow-right label:nth-of-type(3),
#map3:checked ~ .arrow-right label:nth-of-type(1) {
@extend %check;
right: 10vw;
}
}
然后做下面两部分的响应式，到照片那里还需要做自动轮播图，现在还在调整位置，准备明天做出来，把第一个页面做出来后再将其属性模块化，然后应用到三个页面上。
返回列表
评论