/* 整体容器的样式 */
.container {
width: 280px;
height: 400px;
margin: 100px auto;
}
/* 上方的图片不好看切换一张的样式 */
.container .changeImg {
text-align: center;
position: relative;
font-size: 16px;
color: rgb(126, 57, 218);
font-weight: bolder;
cursor: pointer;
user-select: none;
}
/* 前面的图标 */
.changeImg::before {
content: '';
display: block;
position: absolute;
left: 10%;
top: calc(50% - 13px);
width: 26px;
height: 26px;
background: url('../img/sx.png') no-repeat;
background-size: cover;
background-position: center;
}
/* img 容器整体样式，包含标题 + 图片 + 滑条 */
.imgContainer {
height: 320px;
box-sizing: border-box;
padding: 15px;
border: 1px solid #adadad;
box-shadow: 0px 0px 2px #adadad;
/* 设置盒子阴影 */
border-radius: 15px;
/* 设置圆角 */
}
/* 上方标题 */
.imgContainer h3 {
text-align: center;
margin: 0;
margin-bottom: 10px;
}
/* 中间的图片 */
.imgContainer .imgBox {
width: 100%;
height: 200px;
background-repeat: no-repeat;
position: relative;
}
/* 可以拖动的图片 */
.imgBox .imgBlock {
width: 50px;
height: 50px;
position: absolute;
z-index: 10;
opacity: 0;
}
/* 图片缺口 */
.imgBox .imgGap {
width: 50px;
height: 50px;
position: absolute;
background-color: white;
box-shadow: 0px 0px 3px #adadad;
/* 设置盒子阴影 */
}
/* 滑动条 */
.slider {
width: 100%;
height: 30px;
margin: auto;
margin-top: 15px;
background-color: #ddd;
border-radius: 10px;
position: relative;
text-align: center;
line-height: 30px;
font-size: 14px;
font-weight: 200;
}
/* 滑动条的按钮 */
.slider button {
position: absolute;
top: -5px;
left: -2px;
background: white url('../img/yz.png') no-repeat;
background-size: 100%;
border-radius: 50%;
border: 0;
width: 40px;
height: 40px;
cursor: pointer;
z-index: 20;
}
/* 滑动条文字的样式 */
.slider span {
transition: all .5s;
}
