第36天 请手写一个幻灯片的效果 注:可以使用纯css
Activity
AnsonZnl commentedon May 22, 2019
使用css3 动画就可以,预览地址:https://codepen.io/ansonznl/pen/KLyJjX
haizhilin2013 commentedon May 22, 2019
@AnsonZnl 不错,可以再用js再写个,呵呵
tzjoke commentedon May 28, 2019
js的思路可以是设置元素className来切换
myprelude commentedon Jun 13, 2019
你这个是难为我胖虎啊 @haizhilin2013
面试那么长时间写个这个也是有点麻烦 考虑的比较多,简单说下思路还是ok的,
思路一 元素并排浮动 改变offset
思路二 position 层叠 改变z-Index
Konata9 commentedon Sep 1, 2019
不算很好的实现,先占个楼。
https://codepen.io/Konata9/pen/GRKvxjx?editors=0111
seho-dev commentedon Sep 3, 2019
.box > .main > .swiper > .swiperList {
position: absolute;
display: flex;
width: 3500px;
height: 270px;
animation: 20s swiper infinite; /循环/
}
.swiper > .swiperList > li {
width: 625px;
height: 270px;
}
.box > .main > .swiper > .swiperList > li:first-child {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}
.box > .main > .swiper > .swiperList > li:nth-child(2) {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}
.box > .main > .swiper > .swiperList > li:nth-child(3) {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}
.box > .main > .swiper > .swiperList > li:nth-child(4) {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}
.box > .main > .swiper > .swiperList > li:nth-child(5) {
background: url(images/banner.jpg) no-repeat center center / 100% 100%;
}
/动画/
@Keyframes swiper {
0% {
left: 0px;
}
12% {
left: 0px;
}
25% {
left: -625px;
}
37% {
left: -625px;
}
50% {
left: -1250px;
}
62% {
left: -1250px;
}
75% {
left: -1875px;
}
87% {
left: -1875px;
}
100% {
left: -2500px;
}
}
jamsehua commentedon Jan 10, 2021
c3整的挺6
HoseaGuo commentedon Aug 22, 2022
利用 animation-timing-function 的 steps
https://codepen.io/hoseaguo/pen/NWYJbQr
纯css无限轮播,鼠标悬停动画停止
https://codepen.io/hoseaguo/pen/OJvqGGw