前端特效学习6

拾忆
2021-01-22 / 0 评论 / 130 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年01月26日,已超过184天没有更新,若内容或图片失效,请留言反馈。

效果图

demo

HTML代码

<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片层叠</title>
    <link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
    <div class="cont">
        <input type="radio" name="slider" id="item-1" checked>
        <input type="radio" name="slider" id="item-2">
        <input type="radio" name="slider" id="item-3">
        <div class="cards">
            <label class="card" for="item-1" id="img-1">
                <img src="img/1.jpg">
            </label>
            <label class="card" for="item-2" id="img-2">
                <img src="img/2.jpg">
            </label>
            <label class="card" for="item-3" id="img-3">
                <img src="img/3.jpg">
            </label>
        </div>
    </div>
</body>
</html>

css代码

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1F1F1F;
}

input[type=radio] {
    display: none;
}

.card {
    position: absolute;
    width: 60%;
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;
    transition: transform .4s ease, -webkit-transform .4s ease;
    cursor: pointer;
}

.cont {
    width: 100%;
    max-width: 800px;
    max-height: 600px;
    height: 100%;
}

.cards {
    position: relative;
    width: 100%;
    height: 100%;
}

img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    object-fit: cover;
}

#item-1:checked~.cards #img-3,
#item-2:checked~.cards #img-1,
#item-3:checked~.cards #img-2 {
    transform: translatex(-40%) scale(0.8);
    opacity: .4;
    z-index: 0;
}

#item-1:checked~.cards #img-2,
#item-2:checked~.cards #img-3,
#item-3:checked~.cards #img-1 {
    transform: translatex(40%) scale(0.8);
    opacity: .4;
    z-index: 0;
}

#item-1:checked~.cards #img-1,
#item-2:checked~.cards #img-2,
#item-3:checked~.cards #img-3 {
    transform: translatex(0) scale(1);
    opacity: 1;
    z-index: 1;
}

#item-1:checked~.cards #img-1 img,
#item-2:checked~.cards #img-2 img,
#item-3:checked~.cards #img-3 img {
    box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
}
2

评论 (0)

取消