请注意:更新本页面后,您可能需要清除浏览器缓存才能看到所作变更的影响。
Google Chrome、Microsoft Edge、Mozilla Firefox、Safari:按住⇧ Shift,同时单击“刷新”。
Google Chrome、Microsoft Edge、Mozilla Firefox、Safari:按住⇧ Shift,同时单击“刷新”。
警告:如果您是根据讨论页、电子邮件或其他通信工具的留言要求来这里操作的,请务必保持警惕。相关留言要求您添加到本页面的内容里可能包含了盗取用户账号的恶意功能,如果您将其插入了您的自定义界面设置(即本页面),可能为您带来严重的风险!
如果您无法确定相关操作是否安全,请前往有兽茶谈询问相关事宜。
如果您无法确定相关操作是否安全,请前往有兽茶谈询问相关事宜。
警告:用户可能引用来自其他网站的脚本或样式,相关内容可能不以CC BY-SA 4.0许可;使用或改编此页面内容前,请确认相关内容的著作权许可协议!
/* 手动轮播样式 */
.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);
}