CSS100Day(25)-翻转动画另一种实现

1
<div class="frame">
2
    <div class="map">
3
        <svg width="400px" height="400px" viewBox="0 0 400 400">
4
            <path
5
                d="M161.061341,399.999994 C161.061341,399.999994 191.270445,391.453331 205.135883,365.931812 C219.001321,340.410293 200.432398,333.765052 214.613679,309.426833 C228.79496,285.088614 250.056003,267.776851 262.826394,266.922116 C275.596785,266.067381 268.157228,295.720245 275.715421,305.337232 C283.273615,314.954218 275.976179,326.217927 303.147406,318.226259 C330.318634,310.234591 337.441809,308.749917 354.803656,282.075606 C372.165503,255.401296 353.503439,227.118217 363.183533,215.005256 C372.863628,202.892294 400.000001,171.927011 400.000001,171.927011 L400.000001,399.999994 L161.061341,399.999994 Z M8.33144441e-07,274.813084 C8.33144441e-07,274.813084 39.2929748,253.427701 69.7020648,222.975932 C100.111155,192.524163 111.329013,178.897167 120.245786,154.398535 C129.162559,129.899902 108.904134,115.269131 115.056957,98.3643901 C121.20978,81.459649 135.217027,74.9407179 149.468681,74.1092913 C163.720334,73.2778646 154.420375,103.542195 180.702766,94.5346817 C206.985157,85.5271688 208.897554,56.1953712 227.012818,47.5333294 C245.128081,38.8712876 253.356729,68.8621277 278.808059,63.1798791 C304.259388,57.4976304 304.842006,36.4943955 317.091607,32.0191906 C329.341207,27.5439856 334.697225,18.5903589 367.296171,25.5675291 C399.895117,32.5446994 399.999998,49.0022571 399.999998,49.0022571 L400,-5.40012479e-13 L2.47316295e-05,-1.96109795e-12 L8.33144441e-07,274.813084 Z"
6
            ></path>
7
        </svg>
8
    </div>
9
    <div class="marker">
10
        <svg width="48px" height="72px" viewBox="0 0 48 72">
11
            <path
12
                d="M24,0 C11.406,0 0,10.209 0,22.806 C0,35.4 10.407,50.436 24,72 C37.593,50.436 48,35.4 48,22.806 C48,10.209 36.597,0 24,0 L24,0 Z M24,33 C19.029,33 15,28.971 15,24 C15,19.029 19.029,15 24,15 C28.971,15 33,19.029 33,24 C33,28.971 28.971,33 24,33 L24,33 Z"
13
            ></path>
14
        </svg>
15
        <div class="shadow"></div>
16
    </div>
17
    <div class="card">
18
        <img src="https://100dayscss.com/codepen/surfshop.jpg" class="banner" alt="" width="240" height="60" />
19
        <p class="name">Phil's Surfshop</p>
20
        <p>High Street 19<br />8579 Arkney</p>
21

22
        <div class="actions">
23
            <a title="">Save</a>
24
            <span class="divide"></span>
25
            <a title="">Route</a>
26
        </div>
27
    </div>
28
</div>
29
<script>
30
    const markers = document.querySelectorAll(".marker")
31
    const cards = document.querySelectorAll(".card")
32
    markers.forEach((marker) => {
33
        marker.addEventListener("click", function () {
34
            cards.forEach((card) => card.classList.add("active"))
35
            markers.forEach((m) => m.classList.add("inactive"))
36
        })
37
    })
38
    cards.forEach((card) => {
39
        card.addEventListener("click", function () {
40
            cards.forEach((c) => c.classList.remove("active"))
41
            markers.forEach((m) => m.classList.remove("inactive"))
42
        })
43
    })
44
</script>

1
:root {
2
    --frame-text: #3f3f3f;
3
    --map-bg: #2196f3;
4
    --map-svg-fill: #1f8de4;
5
    --marker-svg-fill: #ffcc30;
6
    --shadow-bg: #1b7ac7;
7
    --card-bg: #fff;
8
    --link-text: #1f8de4;
9
    --divide-bg: #91ccfb;
10
}
11

12
.frame {
13
    box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.3);
14
    width: 400px;
15
    height: 400px;
16
    position: absolute;
17
    color: var(--frame-text);
18
    overflow: hidden;
19
    border-radius: 2px;
20
}
21

22
.map {
23
    position: absolute;
24
    inset: 0;
25
    background: var(--map-bg);
26

27
    svg {
28
        fill: var(--map-svg-fill);
29
    }
30
}
31

32
.marker {
33
    position: absolute;
34
    z-index: 5;
35
    top: 151px;
36
    left: 176px;
37
    cursor: pointer;
38
    font-size: 0;
39
    opacity: 1;
40
    transition: all 0.5s ease 0.4s;
41

42
    svg {
43
        fill: var(--marker-svg-fill);
44
        animation: hovering 1s ease-in-out infinite alternate;
45
    }
46

47
    .shadow {
48
        width: 18px;
49
        height: 4px;
50
        background: var(--shadow-bg);
51
        margin: 5px auto 0 auto;
52
        border-radius: 50%;
53
        animation: shadow 1s ease-in-out infinite alternate;
54
    }
55

56
    &.inactive {
57
        transform: perspective(600px) rotateY(-90deg);
58
        opacity: 0;
59
        transition: all 0.5s ease;
60
    }
61
}
62

63
.card {
64
    position: absolute;
65
    z-index: 10;
66
    width: 240px;
67
    height: 190px;
68
    top: 105px;
69
    left: 80px;
70
    border-radius: 3px;
71
    overflow: hidden;
72
    background: #fff;
73
    box-shadow: 4px 8px 12px 0 rgba(0, 0, 0, 0.2);
74
    text-align: center;
75
    transform: perspective(600px) rotateY(90deg);
76
    opacity: 0;
77
    pointer-events: none;
78
    transition: all 0.5s ease;
79

80
    &.active {
81
        transform: perspective(600px) rotateY(0deg);
82
        opacity: 1;
83
        pointer-events: all;
84
        transition: all 0.5s ease 0.4s;
85
    }
86
}
87

88
img {
89
    margin-bottom: 18px;
90
}
91

92
p {
93
    font-weight: 400;
94
    font-size: 12px;
95
    line-height: 17px;
96
    margin: 2px 0;
97

98
    &.name {
99
        font-size: 14px;
100
        line-height: 19px;
101
        font-weight: 600;
102
    }
103
}
104

105
.actions {
106
    position: absolute;
107
    bottom: 0;
108
    left: 0;
109
    width: 100%;
110
    height: 40px;
111

112
    a {
113
        float: left;
114
        width: 50%;
115
        text-align: center;
116
        line-height: 40px;
117
        text-decoration: none;
118
        color: #1f8de4;
119
        font-weight: 400;
120
        font-size: 12px;
121
    }
122

123
    .divide {
124
        position: absolute;
125
        width: 1px;
126
        height: 20px;
127
        left: 50%;
128
        top: 10px;
129
        background: #91ccfb;
130
    }
131
}
132

133
@keyframes hovering {
134
    0% {
135
        transform: translateY(0);
136
    }
137
    100% {
138
        transform: translateY(-5px);
139
    }
140
}
141

142
@keyframes shadow {
143
    0% {
144
        scale: 1;
145
    }
146
    100% {
147
        scale: 1.25;
148
    }
149
}