- 首页 > it技术 > >
一个简单的滑动验证效果|一个简单的滑动验证效果 vue组件
请向右滑动滑块
>>
【一个简单的滑动验证效果|一个简单的滑动验证效果 vue组件】验证成功
.slide {
width: 100%;
.out {
z-index: 999;
overflow: hidden;
box-sizing: border-box;
position: relative;
margin: 0px auto;
width: 300px;
height: 40px;
border: 1px solid #ccc;
background-color: #eee;
user-select: none;
font-size: 14px;
text-align: center;
line-height: 40px;
color: #666;
.transition {
transition: 0.5s;
}
.jiantou {
position: absolute;
box-sizing: border-box;
top: -1px;
left: -1px;
width: 50px;
height: 40px;
border: 1px solid #ccc;
background-color: #fff;
& > p {
user-select: none;
line-height: 38px;
text-align: center;
color: #ccc;
}
&:hover {
cursor: move;
}
.green {
cursor: default;
width: 300px;
height: 40px;
background-color: #7ac23c;
position: absolute;
left: -253px;
top: -1px;
z-index: -1;
& > p {
font-size: 14px;
color: #fff;
line-height: 40px;
text-align: center;
}
}
}
}
}
推荐阅读
