我有这段代码,它只使用html和css就可以制作一个非常甜蜜的 carousel .它在Chrome上运行得很好,但在Firefox上就不行了.有人能告诉我为什么吗?我不能点击其他单选按钮的标签,只能点击选中的按钮.
以下是一段代码片段:
* {
margin: 10px;
padding: 0px;
}
body {
padding: 20px;
background: #eee;
user-select: none;
}
[type=radio] {
display: none;
}
#slider {
height: 55vw;
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
}
#slider label {
margin: auto;
width: 60%;
height: 80%;
border-radius: 40px;
position: absolute;
left: 0; right: 0;
cursor: pointer;
transition: transform 1.2s ease;
}
#s1:checked ~ #slide4, #s2:checked ~ #slide5,
#s3:checked ~ #slide1, #s4:checked ~ #slide2,
#s5:checked ~ #slide3 {
box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
transform: translate3d(-30%,0,-200px);
}
#s1:checked ~ #slide5, #s2:checked ~ #slide1,
#s3:checked ~ #slide2, #s4:checked ~ #slide3,
#s5:checked ~ #slide4 {
box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
transform: translate3d(-15%,0,-100px);
}
#s1:checked ~ #slide1, #s2:checked ~ #slide2,
#s3:checked ~ #slide3, #s4:checked ~ #slide4,
#s5:checked ~ #slide5 {
box-shadow: 0 13px 25px 0 rgba(0,0,0,.3), 0 11px 7px 0 rgba(0,0,0,.19);
transform: translate3d(0,0,0);
}
#s1:checked ~ #slide2, #s2:checked ~ #slide3,
#s3:checked ~ #slide4, #s4:checked ~ #slide5,
#s5:checked ~ #slide1 {
box-shadow: 0 6px 10px 0 rgba(0,0,0,.3), 0 2px 2px 0 rgba(0,0,0,.2);
transform: translate3d(15%,0,-100px);
}
#s1:checked ~ #slide3, #s2:checked ~ #slide4,
#s3:checked ~ #slide5, #s4:checked ~ #slide1,
#s5:checked ~ #slide2 {
box-shadow: 0 1px 4px 0 rgba(0,0,0,.37);
transform: translate3d(30%,0,-200px);
}
#slide1 { background: #00BCD4 }
#slide2 { background: #4CAF50 }
#slide3 { background: #CDDC39 }
#slide4 { background: #FFC107 }
#slide5 { background: #FF5722 }
<section id="slider">
<input type="radio" name="slider" id="s1">
<input type="radio" name="slider" id="s2">
<input type="radio" name="slider" id="s3"checked>
<input type="radio" name="slider" id="s4">
<input type="radio" name="slider" id="s5">
<label for="s1" id="slide1"></label>
<label for="s2" id="slide2"></label>
<label for="s3" id="slide3"></label>
<label for="s4" id="slide4"></label>
<label for="s5" id="slide5"></label>
</section>
我认为这与Firefox中的CSS兼容性有关,但我真的不确定.我对html/css非常陌生,因此如果有任何帮助,我将不胜感激:)