前端特效学习6

用户7162790

发布于 2022-03-23 14:50:15

2150

发布于 2022-03-23 14:50:15

文章被收录于专栏：森屿暖树

效果图

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);
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css