无编辑摘要 标签:已被回退 |
无编辑摘要 标签:已被回退 |
||
第1行: | 第1行: | ||
ul.lbcircle, |
|||
ul.lbhua { |
|||
margin: 0; |
|||
padding: 0; |
|||
list-style: none !important; |
|||
} |
|||
.lboutbox { |
|||
/* 手动轮播样式 */ |
|||
position: relative; |
|||
.banner-container{ |
|||
width: 500px; |
|||
height: 300px; |
|||
overflow: hidden; |
|||
margin:1rem auto; |
|||
overflow: hidden; |
|||
position: relative; |
|||
} |
} |
||
.lbinbox { |
|||
.banner-container .banner-img-container { |
|||
position: absolute; |
|||
width:600px; |
|||
top: 0; |
|||
height:40px; |
|||
left: 0; |
|||
overflow: hidden; |
|||
height: 300px; |
|||
position: absolute; |
|||
display: flex; |
|||
transition: left ease-in-out .5s; |
|||
} |
} |
||
.lbinbox > div { |
|||
.banner-container .banner-img-container img{ |
|||
width: 500px; |
|||
height: 300px; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
} |
||
.lbbox1 { |
|||
/* 轮播图圆点样式 */ |
|||
background-color: #66ccff; |
|||
.banner-container a { |
|||
width:24px; |
|||
height:24px; |
|||
background:#87c8eb; |
|||
position: absolute; |
|||
bottom:1rem; |
|||
border-radius: 100%; |
|||
margin:0; |
|||
z-index: 1; |
|||
} |
} |
||
.lbcircle { |
|||
.banner-container input{ |
|||
position: absolute; |
|||
width:24px; |
|||
width: 100%; |
|||
height:24px; |
|||
bottom: 0; |
|||
position: absolute; |
|||
display: flex; |
|||
bottom:1rem; |
|||
justify-content: center; |
|||
margin:0; |
|||
cursor: pointer; |
|||
z-index: 2; |
|||
opacity: 0; |
|||
} |
} |
||
.lbcircleChild { |
|||
/* 设置导航圆点偏移量(居中布局)*/ |
|||
width: 20px; |
|||
#banner-control-1,#banner-control-1 + .banner-nav-a{ |
|||
height: 20px; |
|||
border-radius: 20px; |
|||
background-color: #fff; |
|||
margin: 10px 10px; |
|||
} |
} |
||
#banner-control-2,#banner-control-2 + .banner-nav-a{ |
|||
.lbcircle > .lbhover { |
|||
left: 40%; |
|||
background-color: #26b94b !important; |
|||
} |
} |
||
#banner-control-3,#banner-control-3 + .banner-nav-a{ |
|||
.lbhua { |
|||
left: 50%; |
|||
position: absolute; |
|||
} |
|||
top: 0; |
|||
#banner-control-4,#banner-control-4 + .banner-nav-a{ |
|||
right: 0; |
|||
bottom: 0; |
|||
} |
|||
left: 0; |
|||
#banner-control-5,#banner-control-5 + .banner-nav-a{ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
} |
||
.lbhua > li { |
|||
/* 设置高亮 */ |
|||
margin: 0 3px; |
|||
/*当 input 被选中时 他的兄弟级a标签高亮展示*/ |
|||
color: #fff; |
|||
input:checked + .banner-nav-a { |
|||
font-weight: 900; |
|||
font-size: 30px; |
|||
cursor: pointer; |
|||
border-radius: 1000px; |
|||
user-select: none; |
|||
background-color: rgba(0, 0, 0, 0); |
|||
transition: background-color ease-in-out .2s; |
|||
} |
} |
||
.lboutbox:hover > .lbhua > li { |
|||
/* 设置轮播图动画 */ |
|||
background-color: rgba(0, 0, 0, .3); |
|||
#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:35的版本
ul.lbcircle,
ul.lbhua {
margin: 0;
padding: 0;
list-style: none !important;
}
.lboutbox {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.lbinbox {
position: absolute;
top: 0;
left: 0;
height: 300px;
display: flex;
transition: left ease-in-out .5s;
}
.lbinbox > div {
width: 500px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.lbbox1 {
background-color: #66ccff;
}
.lbcircle {
position: absolute;
width: 100%;
bottom: 0;
display: flex;
justify-content: center;
}
.lbcircleChild {
width: 20px;
height: 20px;
border-radius: 20px;
background-color: #fff;
margin: 10px 10px;
}
.lbcircle > .lbhover {
background-color: #26b94b !important;
}
.lbhua {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.lbhua > li {
margin: 0 3px;
color: #fff;
font-weight: 900;
font-size: 30px;
cursor: pointer;
border-radius: 1000px;
user-select: none;
background-color: rgba(0, 0, 0, 0);
transition: background-color ease-in-out .2s;
}
.lboutbox:hover > .lbhua > li {
background-color: rgba(0, 0, 0, .3);
}