手机版滑动门css实例

最近我学习了手机版滑动门的CSS实例，非常有用。下面是我分享的代码：

//HTML结构div class="slider">
    ul>
    li>
    a href="#">
    图片1/a>
    /li>
    li>
    a href="#">
    图片2/a>
    /li>
    li>
    a href="#">
    图片3/a>
    /li>
    li>
    a href="#">
    图片4/a>
    /li>
    /ul>
    /div>
//CSS样式.slider {
    overflow: hidden;
}
.slider ul {
    list-style: none;
    width: 400%;
    margin: 0;
    padding: 0;
    display: flex;
}
.slider ul li {
    width: 25%;
    float: left;
}
.slider ul li a {
    display: block;
    height: 100%;
    width: 100%;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    outline: none;
}
.slider ul li:first-child a {
    background: #6699cc;
}
.slider ul li:nth-child(2) a {
    background: #ff9966;
}
.slider ul li:nth-child(3) a {
    background: #99cc99;
}
.slider ul li:last-child a {
    background: #ff6666;
}
.slider ul li a:focus {
    color: #fff;
}
.slider ul li a:focus:hover {
    background: #333;
    color: #fff;
}
.slider ul li:focus-within ~ li a {
    transform: translateX(-100%);
}
.slider ul li:first-child:focus-within ~ li a {
    transform: none;
}
    

这个CSS实例实现了一个包含四张图片的滑动门效果。你可以通过滑动手势或者点击链接来滑动不同的图片。通过:focus-within来控制当前选择的图片，再用transform属性来移动

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！