这段CSS代码展示了如何创建一个带有动态交互的元素。.box-left和.box-right使用绝对定位和边距实现位置调整，同时设置圆角和过渡效果，提供鼠标悬停交互。.partA和.partB用于创建斜切角效果，而.bar则通过宽度变化实现拖动条的动画效果。
CSS
语言：
CSSSCSS
确定
.box-left {
position: absolute;
height: 100px;
width: 80px;
background-color: #e74c3c;
top: 0;
bottom: 0;
left: 0;
right: 50px;
margin: auto;
cursor: pointer;
border-top-left-radius: 13px;
border-bottom-left-radius: 13px;
}
.box-right {
position: absolute;
height: 100px;
width: 20px;
background-color: #e74c3c;
top: 0;
bottom: 0;
left: 50px;
right: 0;
margin: auto;
transition: 0.5s;
cursor: pointer;
border-top-right-radius: 13px;
border-bottom-right-radius: 13px;
}
.partA {
position: absolute;
height: 50px;
width: 15px;
background-color: white;
-webkit-transform: rotate(-45deg);
top: 0;
bottom: 0;
left: 20px;
right: 0;
margin: auto;
}
.pA2 {
-webkit-transform: rotate(45deg);
}
.partB {
position: absolute;
height: 50px;
width: 15px;
background-color: black;
-webkit-transform: rotate(45deg);
top: 0;
bottom: 0;
left: 15px;
right: 0;
margin: auto;
}
.pB2 {
left: -35px;
height: 22px;
-webkit-transform: rotate(-45deg);
}
.bar {
height: 80px;
width: 0px;
background-color: lightgray;
position: absolute;
top: 10px;
bottom: 0;
left: 80px;
right: 0;
transition: 0.5s;
overflow: hidden;
}
.cl-bar2 {
width: 80px;
}
.cl-box2 {
left: 210px;
}
扫一扫
726
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
