CSS100Day(6)-卡片练习和绝对定位圆圈

1
<div class="frame">
2
    <div class="container">
3
        <div class="profile">
4
            <div class="image">
5
                <div class="circle-1"></div>
6
                <div class="circle-2"></div>
7
                <img src="./jessica-potter.jpg" alt="头像" width="70" height="70" />
8
            </div>
9
            <div class="name">Jessica Potter</div>
10
            <div class="job">Visual Artist</div>
11

12
            <div class="actions">
13
                <button class="btn">Follow</button>
14
                <button class="btn">Message</button>
15
            </div>
16
        </div>
17
        <div class="stats">
18
            <div class="box">
19
                <span class="value">523</span>
20
                <span class="parameter">Posts</span>
21
            </div>
22
            <div class="box">
23
                <span class="value">1387</span>
24
                <span class="parameter">Likes</span>
25
            </div>
26
            <div class="box">
27
                <span class="value">146</span>
28
                <span class="parameter">Follower</span>
29
            </div>
30
        </div>
31
    </div>
32
</div>

1
:root {
2
    --brown: #786450;
3
    font-family: "微软雅黑";
4
}
5

6
.frame {
7
    width: 400px;
8
    height: 400px;
9
    border-radius: 2px;
10
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
11
    background: linear-gradient(to top right, #eebe6c 0%, #ca7c4e 100%);
12
    color: var(--brown);
13
    display: grid;
14
    place-content: center;
15
}
16

17
.container {
18
    width: 320px;
19
    height: 299px;
20
    background-color: #fff;
21
    border-radius: 2px;
22
    overflow: hidden;
23
    box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.3);
24
    display: flex;
25
}
26

27
.profile {
28
    display: flex;
29
    flex-direction: column;
30
    justify-content: center;
31
    width: 200px;
32
    height: 320px;
33
    text-align: center;
34
    align-items: center;
35

36
    .image {
37
        margin: 10px 0;
38
        margin-bottom: 20px;
39
        position: relative;
40
        width: 70px;
41
        height: 70px;
42

43
        .circle-1 {
44
            width: 76px;
45
            height: 76px;
46
            border-width: 1px;
47
            border-style: solid;
48
            border-color: var(--brown) var(--brown) var(--brown) transparent;
49
            position: absolute;
50
            top: -3px;
51
            left: -3px;
52
            border-radius: 50%;
53
            transition: all 1.5s ease-in-out;
54
        }
55

56
        .circle-2 {
57
            width: 82px;
58
            height: 82px;
59
            border-width: 1px;
60
            border-style: solid;
61
            border-color: var(--brown) transparent var(--brown) var(--brown);
62
            position: absolute;
63
            top: -6px;
64
            left: -6px;
65
            border-radius: 50%;
66
            transition: all 1.5s ease-in-out;
67
        }
68

69
        img {
70
            border-radius: 50%;
71
            display: block;
72
        }
73

74
        &:hover {
75
            cursor: pointer;
76
            .circle-1 {
77
                rotate: 360deg;
78
            }
79
            .circle-2 {
80
                rotate: -360deg;
81
            }
82
        }
83
    }
84

85
    .name {
86
        font-size: 1rem;
87
        font-weight: 700;
88
    }
89

90
    .job {
91
        font-size: 0.8rem;
92
    }
93

94
    .actions {
95
        display: flex;
96
        flex-direction: column;
97
        gap: 10px;
98
        align-items: center;
99
        margin: 25px 0;
100

101
        .btn {
102
            width: 120px;
103
            height: 30px;
104
            border-radius: 15px;
105
            font-size: 12px;
106
            border: 1px solid var(--brown);
107
            transition: all 0.3s ease-in-out;
108
            color: var(--brown);
109
            background-color: #fff;
110

111
            &:hover {
112
                background-color: var(--brown);
113
                color: #fff;
114
            }
115
        }
116
    }
117
}
118

119
.stats {
120
    display: flex;
121
    flex-direction: column;
122
    flex: 1;
123

124
    .box {
125
        box-sizing: border-box;
126
        flex: 1;
127
        text-align: center;
128
        display: grid;
129
        place-content: center;
130
        background: #f5e8df;
131
        transition: all 0.5s ease;
132

133
        .value {
134
            font-weight: 700;
135
        }
136

137
        .parameter {
138
            font-size: 0.8rem;
139
        }
140

141
        &:hover {
142
            filter: brightness(0.9);
143
            cursor: pointer;
144
        }
145
    }
146
}