ol 无序列表，圆形卡片设计，HTML/Vue代码在线实时编辑、预览

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

            
            <h1>OL 圆形卡片设计</h1>
<ol>
    <li >
        <div class="icon">
          <svg class="i" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M388 448a92 92 0 1 1 92-92a92.1 92.1 0 0 1-92 92m0-152a60 60 0 1 0 60 60a60.07 60.07 0 0 0-60-60M124 448a92 92 0 1 1 92-92a92.1 92.1 0 0 1-92 92m0-152a60 60 0 1 0 60 60a60.07 60.07 0 0 0-60-60m196-168a31.89 31.89 0 0 0 32-32.1A31.55 31.55 0 0 0 320.2 64a32 32 0 1 0-.2 64"/><path fill="currentColor" d="M367.55 192h-43.76a4 4 0 0 1-3.51-2.08l-31.74-58.17a31 31 0 0 0-49.38-7.75l-69.86 70.4a32.56 32.56 0 0 0-9.3 22.4c0 17.4 12.6 23.6 18.5 27.1c28.5 16.42 48.57 28.43 59.58 35.1a4 4 0 0 1 1.92 3.41v69.12c0 8.61 6.62 16 15.23 16.43A16 16 0 0 0 272 352v-86a16 16 0 0 0-6.66-13l-37-26.61a4 4 0 0 1-.58-6l42-44.79a4 4 0 0 1 6.42.79L298 215.77a16 16 0 0 0 14 8.23h56a16 16 0 0 0 16-16.77c-.42-8.61-7.84-15.23-16.45-15.23"/></svg>  
        </div>
        <div class="title">第1步</div>
        <div class="descr">这段文字没有任何特定的含义，它只是模拟真实的文字内容，以展示版式设计。</div>
    </li>
    <li >
        <div class="icon">
          <svg class="i" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M447.68 220.78a16 16 0 0 0-1-3.08l-37.78-88.16C400.19 109.17 379 96 354.89 96H157.11c-24.09 0-45.3 13.17-54 33.54L65.29 217.7A15.7 15.7 0 0 0 64 224v176a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-16h256v16a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16V224a16 16 0 0 0-.32-3.22M144 320a32 32 0 1 1 32-32a32 32 0 0 1-32 32m224 0a32 32 0 1 1 32-32a32 32 0 0 1-32 32M104.26 208l28.23-65.85C136.11 133.69 146 128 157.11 128h197.78c11.1 0 21 5.69 24.62 14.15L407.74 208Z"/></svg>  
        </div>
        <div class="title">第2步</div>
        <div class="descr">这段文字没有任何特定的含义，它只是模拟真实的文字内容，以展示版式设计。</div>
    </li>
    <li >
        <div class="icon">
          <svg class="i" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M477.64 38.26a4.75 4.75 0 0 0-3.55-3.66c-58.57-14.32-193.9 36.71-267.22 110a317 317 0 0 0-35.63 42.1c-22.61-2-45.22-.33-64.49 8.07C52.38 218.7 36.55 281.14 32.14 308a9.64 9.64 0 0 0 10.55 11.2l87.31-9.63a194 194 0 0 0 1.19 19.7a19.53 19.53 0 0 0 5.7 12L170.7 375a19.6 19.6 0 0 0 12 5.7a194 194 0 0 0 19.59 1.19l-9.58 87.2a9.65 9.65 0 0 0 11.2 10.55c26.81-4.3 89.36-20.13 113.15-74.5c8.4-19.27 10.12-41.77 8.18-64.27a317.7 317.7 0 0 0 42.21-35.64C441 232.05 491.74 99.74 477.64 38.26M294.07 217.93a48 48 0 1 1 67.86 0a47.95 47.95 0 0 1-67.86 0"/><path fill="currentColor" d="M168.4 399.43c-5.48 5.49-14.27 7.63-24.85 9.46c-23.77 4.05-44.76-16.49-40.49-40.52c1.63-9.11 6.45-21.88 9.45-24.88a4.37 4.37 0 0 0-3.65-7.45a60 60 0 0 0-35.13 17.12C50.22 376.69 48 464 48 464s87.36-2.22 110.87-25.75A59.7 59.7 0 0 0 176 403.09c.37-4.18-4.72-6.67-7.6-3.66"/></svg>  
        </div>
        <div class="title">第3步</div>
        <div class="descr">这段文字没有任何特定的含义，它只是模拟真实的文字内容，以展示版式设计。</div>
    </li>
    <li >
        <div class="icon">
          <svg class="i" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M407.72 208c-2.72 0-14.44.08-18.67.31l-57.77 1.52L198.06 48h-62.81l74.59 164.61l-97.31 1.44L68.25 160H16.14l20.61 94.18c.15.54.33 1.07.53 1.59a.26.26 0 0 1 0 .15a15 15 0 0 0-.53 1.58L15.86 352h51.78l45.45-55l96.77 2.17L135.24 464h63l133-161.75l57.77 1.54c4.29.23 16 .31 18.66.31c24.35 0 44.27-3.34 59.21-9.94C492.22 283 496 265.46 496 256c0-30.06-33-48-88.28-48m-71.29 87.9"/></svg>  
        </div>
        <div class="title">第4步</div>
        <div class="descr">这段文字没有任何特定的含义，它只是模拟真实的文字内容，以展示版式设计。</div>
    </li>
    <li >
        <div class="icon">
          <svg class="i" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M477.77 246.42c-2.13-6-7.23-9.55-12.56-11.95L432 221.38V92a20 20 0 0 0-20-20h-76V40a16 16 0 0 0-16-16H192a16 16 0 0 0-16 16v32h-76a20 20 0 0 0-20 20v129.46l-33.08 13.06c-5.33 2.4-10.58 6-12.72 12s-3.16 11.81-1 19L84.25 415.7h1.06c34.12 0 64-17.41 85.31-43.82c21.32 26.41 51.18 42.12 85.3 42.12s64-15.76 85.31-42.17c21.32 26.41 51.18 43.87 85.3 43.87h1.06l51.25-150.17c2.16-6 1.07-13.1-1.07-19.11M256 152l-144 56.83V108a4 4 0 0 1 4-4h280a4 4 0 0 1 4 4v100.76Z"/><path fill="currentColor" d="M345.22 407c-52.25 36.26-126.35 36.25-178.6 0c0 0-45.64 63-94.64 63l13.33 1c29.86 0 58.65-11.73 85.31-25.59a185.33 185.33 0 0 0 170.6 0c26.66 13.87 55.45 25.6 85.31 25.6l13.33-1C392.21 470 345.22 407 345.22 407"/></svg>  
        </div>
        <div class="title">第5步</div>
        <div class="descr">这段文字没有任何特定的含义，它只是模拟真实的文字内容，以展示版式设计。</div>
    </li>
    <li >
        <div class="icon">
          <svg class="i" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="none" d="M400 64H112a16 16 0 0 0 0 32h288a16 16 0 0 0 0-32"/><path fill="currentColor" d="M424 32H88a24 24 0 0 0-24 24v360a32 32 0 0 0 16 27.71V480h72v-32h208v32h72v-36.29A32 32 0 0 0 448 416V56a24 24 0 0 0-24-24M175.82 371.47a32 32 0 1 1-35.3-35.29a32.09 32.09 0 0 1 35.3 35.29M240 288H96V128h144Zm16-192H96.46L96 64h320l-.46 32zm16 32h144v160H272Zm64.18 236.53a32 32 0 1 1 35.3 35.29a32.09 32.09 0 0 1-35.3-35.29"/></svg>  
        </div>
        <div class="title">第6步</div>
        <div class="descr">这段文字没有任何特定的含义，它只是模拟真实的文字内容，以展示版式设计。</div>
    </li>
</ol>
<div class="credits">
</div>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

            
            *,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    --color: rgba(30, 30, 30);
    --bgColor: rgba(245, 245, 245);
    min-height: 100vh;
    display: grid;
    align-content: center;
    gap: 2rem;
    padding: 1rem;
    font-family: "Exo 2", sans-serif;
    color: var(--color);
    background: var(--bgColor);
}

h1 {
    text-align: center
}

ol {
    width: min(60rem, 90%);
    margin-inline: auto;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;

    list-style: none;
    counter-reset: stepnr;
}

li:nth-child(6n + 1) {
    --accent-color: #b8df4e
}

li:nth-child(6n + 2) {
    --accent-color: #4cbccb
}

li:nth-child(6n + 3) {
    --accent-color: #7197d3
}

li:nth-child(6n + 4) {
    --accent-color: #ae78cb
}

li:nth-child(6n + 5) {
    --accent-color: #7dc7a4
}

li:nth-child(6n + 6) {
    --accent-color: #f078c2
}

ol li {
    counter-increment: stepnr;
    width: 18rem;
    --borderS: 2rem;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: calc(var(--borderS) + 2rem);
    position: relative;
}

ol li::before,
ol li::after {
    inset: 0;
    position: absolute;
    border-radius: 50%;
    border: var(--borderS) solid var(--bgColor);
    line-height: 1.1;
}

ol li::before {
    content: counter(stepnr);
    color: var(--accent-color);
    padding-left: 10rem;
    font-size: 12rem;
    font-weight: 700;
    overflow: hidden;
}

ol li::after {
    content: "";
    filter: drop-shadow(-0.25rem 0.25rem 0.0675rem rgba(0, 0, 0, 0.75)) blur(5px);
}

ol li>* {
    width: 7.5rem
}

ol li .icon {
    color: var(--accent-color);
    text-align: center;
}

ol li .icon .i {
    width: 2.3rem;
    height: 2.3rem;
}

ol li .title {
    font-size: 1.9rem;
    font-weight: 500;
}

ol li .descr {
    margin-top: 4px;
    font-size: 0.8rem;
    font-weight: 300
}

.credits {
    margin-top: 2rem;
    text-align: right
}

.credits a {
    color: var(--color)
}