(清空全部内容) 标签:清空 已被回退 |
无编辑摘要 标签:手工回退 已被回退 |
||
第1行: | 第1行: | ||
/* 手动轮播样式 */ |
|||
.banner-container{ |
|||
width:1200px; |
|||
height:400px; |
|||
margin:1rem auto; |
|||
overflow: hidden; |
|||
position: relative; |
|||
} |
|||
.banner-container .banner-img-container { |
|||
width:6000px; |
|||
height:400px; |
|||
overflow: hidden; |
|||
position: absolute; |
|||
display: flex; |
|||
transition: transform 0.6s ease; |
|||
} |
|||
.banner-container .banner-img-container img{ |
|||
width:100%; |
|||
height:100%; |
|||
} |
|||
/* 轮播图圆点样式 */ |
|||
.banner-container a { |
|||
width:24px; |
|||
height:24px; |
|||
background:#87c8eb; |
|||
position: absolute; |
|||
bottom:1rem; |
|||
border-radius: 100%; |
|||
margin:0; |
|||
z-index: 1; |
|||
} |
|||
.banner-container input{ |
|||
width:24px; |
|||
height:24px; |
|||
position: absolute; |
|||
bottom:1rem; |
|||
margin:0; |
|||
cursor: pointer; |
|||
z-index: 2; |
|||
opacity: 0; |
|||
} |
|||
/* 设置导航圆点偏移量(居中布局)*/ |
|||
#banner-control-1,#banner-control-1 + .banner-nav-a{ |
|||
left: 30%; |
|||
} |
|||
#banner-control-2,#banner-control-2 + .banner-nav-a{ |
|||
left: 40%; |
|||
} |
|||
#banner-control-3,#banner-control-3 + .banner-nav-a{ |
|||
left: 50%; |
|||
} |
|||
#banner-control-4,#banner-control-4 + .banner-nav-a{ |
|||
left: 60%; |
|||
} |
|||
#banner-control-5,#banner-control-5 + .banner-nav-a{ |
|||
left: 70%; |
|||
} |
|||
/* 设置高亮 */ |
|||
/*当 input 被选中时 他的兄弟级a标签高亮展示*/ |
|||
input:checked + .banner-nav-a { |
|||
background-color: #ad244f; |
|||
} |
|||
/* 设置轮播图动画 */ |
|||
#banner-control-1:checked ~ .banner-img-container{ |
|||
transform: translateX(0px); |
|||
} |
|||
#banner-control-2:checked ~ .banner-img-container{ |
|||
transform: translateX(-1200px); |
|||
} |
|||
#banner-control-3:checked ~ .banner-img-container{ |
|||
transform: translateX(-2400px); |
|||
} |
|||
#banner-control-4:checked ~ .banner-img-container{ |
|||
transform: translateX(-3600px); |
|||
} |
|||
#banner-control-5:checked ~ .banner-img-container{ |
|||
transform: translateX(-4800px); |
|||
} |
2023年7月18日 (二) 17:09的版本
/* 手动轮播样式 */
.banner-container{
width:1200px;
height:400px;
margin:1rem auto;
overflow: hidden;
position: relative;
}
.banner-container .banner-img-container {
width:6000px;
height:400px;
overflow: hidden;
position: absolute;
display: flex;
transition: transform 0.6s ease;
}
.banner-container .banner-img-container img{
width:100%;
height:100%;
}
/* 轮播图圆点样式 */
.banner-container a {
width:24px;
height:24px;
background:#87c8eb;
position: absolute;
bottom:1rem;
border-radius: 100%;
margin:0;
z-index: 1;
}
.banner-container input{
width:24px;
height:24px;
position: absolute;
bottom:1rem;
margin:0;
cursor: pointer;
z-index: 2;
opacity: 0;
}
/* 设置导航圆点偏移量(居中布局)*/
#banner-control-1,#banner-control-1 + .banner-nav-a{
left: 30%;
}
#banner-control-2,#banner-control-2 + .banner-nav-a{
left: 40%;
}
#banner-control-3,#banner-control-3 + .banner-nav-a{
left: 50%;
}
#banner-control-4,#banner-control-4 + .banner-nav-a{
left: 60%;
}
#banner-control-5,#banner-control-5 + .banner-nav-a{
left: 70%;
}
/* 设置高亮 */
/*当 input 被选中时 他的兄弟级a标签高亮展示*/
input:checked + .banner-nav-a {
background-color: #ad244f;
}
/* 设置轮播图动画 */
#banner-control-1:checked ~ .banner-img-container{
transform: translateX(0px);
}
#banner-control-2:checked ~ .banner-img-container{
transform: translateX(-1200px);
}
#banner-control-3:checked ~ .banner-img-container{
transform: translateX(-2400px);
}
#banner-control-4:checked ~ .banner-img-container{
transform: translateX(-3600px);
}
#banner-control-5:checked ~ .banner-img-container{
transform: translateX(-4800px);
}