css+html 图片移动

最新推荐文章于 2023-06-01 08:53:37 发布

前进的胖子

最新推荐文章于 2023-06-01 08:53:37 发布

阅读量867

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/weixin_44593999/article/details/108874886

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击图片</title>
    <link rel="stylesheet" href="点击图片.css">
</head>
<body>
    <div id="background">
    <div id="background-img">
        <label for="img1"></label>
        <input type="radio" id='img1' name="img" /> 
        <label for="img2"></label>
        <input type="radio" id='img2' name="img" > 
        <label for="img3"></label>
        <input type="radio" id='img3' name="img" > 
        <label for="img4"></label>
        <input type="radio" id='img4' name="img" > 
        <label for="img5"></label>
        <input type="radio" id='img5' name="img" > 
        <label for="img6"></label>
        <input type="radio" id='img6' name="img" > 
    </div>
</div>
</body>
</html>
// css 部分
#background{
    width: 680PX;
    height: 400px;
    border: 19px solid #5376b1;
    margin: 0 auto;
    border-radius: 9px;
    position: relative;
    overflow: hidden;
}
#background-img label
{
    position: absolute;
    width: 699px;
    height: 419px;
    border:2px solid #16254c;

    
}
#background-img input {
    display: none;
}
/* 伪类 来匹配哪些元素应该被选中 */
#background-img label:nth-of-type(1){
    background: url("../images/pic1.png") no-repeat;
    left: 0px;
}
#background-img label:nth-of-type(2){
    background: url("../images/pic2.png") no-repeat;
    left: 76px;
}
#background-img label:nth-of-type(3){
    background: url("../images/pic3.png") no-repeat;
    left: 152px;
}
#background-img label:nth-of-type(4){
    background: url("../images/pic4.png") no-repeat;
    left: 228px;
}
#background-img label:nth-of-type(5){
    background: url("../images/pic5.png") no-repeat;
    left: 304px;
}
#background-img label:nth-of-type(6){
    background: url("../images/pic6.png") no-repeat;
    left: 380px;
}
#background-img input:checked~label{
    transform: translateX(152px)
}

效果图

前进的胖子

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
css+html 图片移动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>点击图片</title> <link rel="stylesheet" href="点击图片.css"&gt
复制链接

扫一扫