CSS100Day(26)-激励卡片切换

1
<div class="frame">
2
    <div class="card active">
3
        <div class="number-bg"></div>
4
        <div class="number">1</div>
5
        <div class="text">
6
            <span class="headline">The couch</span>
7
            <p>
8
                If you want to grow, get outside<br />
9
                your comfort zone.
10
            </p>
11
        </div>
12
        <div class="button">切换</div>
13
    </div>
14
    <div class="card">
15
        <div class="number-bg"></div>
16
        <div class="number">2</div>
17
        <div class="text">
18
            <span class="headline">Failing is learning</span>
19
            <p>Pick yourself up, dust yourself off, and start again.</p>
20
        </div>
21
        <div class="button">切换</div>
22
    </div>
23
    <div class="card">
24
        <div class="number-bg"></div>
25
        <div class="number">3</div>
26
        <div class="text">
27
            <span class="headline">Flowers and rainbows</span>
28
            <p>
29
                Always be yourself,<br />
30
                unless you can be a unicorn.
31
            </p>
32
        </div>
33
        <div class="button">切换</div>
34
    </div>
35
</div>

1
.frame {
2
    box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.3);
3
    width: 400px;
4
    height: 400px;
5
    border-radius: 2px;
6
    background: #c7d6e1;
7
    overflow: hidden;
8
    display: grid;
9
    place-content: center;
10
}
11
.card {
12
    pointer-events: none;
13
    background: #fff;
14
    border-radius: 2px;
15
    width: 240px;
16
    height: 150px;
17
    position: absolute;
18
    top: 125px;
19
    left: 80px;
20
    box-shadow: 4px 8px 12px 0 rgba(0, 0, 0, 0.2);
21
    opacity: 0;
22
    overflow: hidden;
23
    &.active {
24
        pointer-events: all;
25
        z-index: 1;
26
        animation: fadeIn 0.6s ease-in-out both 0.5s;
27
    }
28
    &.inactive {
29
        pointer-events: none;
30
        z-index: 2;
31
        animation: fadeOut 0.5s ease-in-out both;
32
    }
33
    .number-bg {
34
        position: absolute;
35
        width: 60px;
36
        height: 60px;
37
        top: -31px;
38
        right: -31px;
39
        background: #8391a1;
40
        transform: rotate(45deg);
41
    }
42
    .number {
43
        position: absolute;
44
        top: 6px;
45
        right: 8px;
46
        font-size: 13px;
47
        line-height: 13px;
48
        font-weight: 600;
49
        color: #fff;
50
    }
51
    .text {
52
        text-align: center;
53
        padding: 20px 10px;
54
        .headline {
55
            display: block;
56
            font-size: 14px;
57
            line-height: 22px;
58
            font-weight: 600;
59
            color: #616e7d;
60
            margin-bottom: 8px;
61
        }
62

63
        p {
64
            font-size: 12px;
65
            line-height: 17px;
66
            color: #8391a1;
67
            margin: 0;
68
        }
69
    }
70
    .button {
71
        position: absolute;
72
        width: 100%;
73
        height: 40px;
74
        bottom: 0;
75
        left: 0;
76
        right: 0;
77
        background: #3ca7fb;
78
        cursor: pointer;
79
        text-align: center;
80
        text-transform: uppercase;
81
        line-height: 38px;
82
        font-size: 13px;
83
        color: #fff;
84
        transition: all 0.3s ease-in-out;
85
        &:hover {
86
            background: #2196f3;
87
        }
88
    }
89
}
90

91
@keyframes fadeIn {
92
    from {
93
        opacity: 0;
94
        transform: scale(0.9);
95
    }
96
    to {
97
        opacity: 1;
98
        transform: scale(1);
99
    }
100
}
101
@keyframes fadeOut {
102
    from {
103
        opacity: 1;
104
        transform: scale(1);
105
    }
106
    to {
107
        opacity: 0;
108
        transform: scale(1.15);
109
    }
110
}

1
<script>
2
    let active = 1 const buttons = document.querySelectorAll(".button") buttons.forEach(function (button){" "}
3
    {button.addEventListener("click", function () {
4
        var currentCard = document.querySelector(".card:nth-child(" + active + ")")
5
        if (currentCard) {
6
            currentCard.classList.remove("active")
7
            currentCard.classList.add("inactive")
8
        }
9
        if (active === 3) {
10
            active = 0
11
        }
12
        active++
13
        var nextCard = document.querySelector(".card:nth-child(" + active + ")")
14
        if (nextCard) {
15
            nextCard.classList.remove("inactive")
16
            nextCard.classList.add("active")
17
        }
18
    })}
19
    )
20
</script>