滚动的边框动画，HTML代码在线实时编辑、实时预览

index.html

style.css

index.js

            
                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

            
            <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <script src="./index.js"></script>
</head>

<body>
  <article>

    <section class="sectionWrapper">

        <section id="_boxes">

            <ul>

                <li>

                    <figure>

                        <h2>
                            风格 1
                        </h2>

                        <figcaption>
                            这是一个测试文本段落，用于展示中文排版效果。文字内容包含随机生成的语句，主要测试网页元素的显示风格。段落中描述了不同场景下的视觉呈现方式，包括字体间距、行高对齐等排版细节。通过这段文字可以观察中文在不同容器中的换行表现，以及标点符号与文字的结合效果。测试文本不需要具备实际意义，只需保证字符数量和段落结构符合设计要求即可。
                        </figcaption>

                        <a href="javascript:void(0);" title="查看更多">
                            <em>查看更多</em>
                            <i>&#10095;&#10095;</i>
                        </a>

                    </figure>

                    <svg preserveAspectRatio="none" stroke="#3F9F47" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" viewBox="0 0 108 108" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.84999 4.52304C10.4167 4.87174 12.9833 4.7961 15.55 4.29611C18.1167 3.79612 20.6833 3.77393 23.25 4.22954C25.8167 4.68515 28.3833 4.63313 30.95 4.07349C33.5167 3.51385 36.0833 3.30905 38.65 3.45907C41.2167 3.6091 43.7833 3.64025 46.35 3.55252C48.9167 3.46479 51.4833 3.72872 54.05 4.34432C56.6167 4.95992 59.1833 5.05995 61.75 4.64441C64.3167 4.22888 66.8833 3.95074 69.45 3.81001C72.0167 3.66928 74.5833 3.51867 77.15 3.35817C79.7167 3.19768 82.2833 3.08289 84.85 3.0138C87.4166 2.94472 89.9833 3.10282 92.55 3.48811C95.1167 3.8734 97.5238 4.0717 99.7714 4.08301C102.019 4.09432 103.173 5.38331 103.232 7.94997C103.292 10.5166 103.67 13.0833 104.365 15.65C105.06 18.2166 105.138 20.7833 104.597 23.35C104.057 25.9166 103.853 28.4833 103.984 31.05C104.115 33.6166 103.921 36.1833 103.402 38.75C102.883 41.3166 102.633 43.8833 102.652 46.45C102.671 49.0166 102.93 51.5833 103.427 54.15C103.924 56.7166 104.256 59.2833 104.424 61.85C104.592 64.4166 104.434 66.9833 103.95 69.5499C103.466 72.1166 103.173 74.6833 103.071 77.2499C102.968 79.8166 103.161 82.3833 103.649 84.9499C104.137 87.5166 104.182 90.0833 103.785 92.6499C103.388 95.2166 103.291 97.854 103.494 100.562C103.698 103.27 102.517 104.445 99.95 104.088C97.3834 103.73 94.8167 103.807 92.25 104.318C89.6834 104.83 87.1167 104.777 84.55 104.159C81.9834 103.541 79.4167 103.494 76.8501 104.017C74.2834 104.54 71.7167 104.474 69.1501 103.82C66.5834 103.165 64.0167 102.893 61.4501 103.003C58.8834 103.114 56.3167 103.442 53.7501 103.989C51.1834 104.536 48.6167 104.517 46.0501 103.933C43.4834 103.348 40.9167 103.085 38.3501 103.144C35.7834 103.202 33.2167 103.585 30.65 104.292C28.0834 104.999 25.5167 104.974 22.95 104.217C20.3834 103.46 17.8167 103.267 15.25 103.638C12.6834 104.009 10.049 104.112 7.3471 103.947C4.64516 103.782 3.21816 102.417 3.06612 99.85C2.91407 97.2833 3.27189 94.7166 4.13956 92.15C5.00724 89.5833 5.22889 87.0166 4.80451 84.45C4.38014 81.8833 4.37256 79.3166 4.78179 76.75C5.19101 74.1833 5.23802 71.6166 4.92281 69.0499C4.60759 66.4833 4.31893 63.9166 4.05682 61.3499C3.7947 58.7833 3.76382 56.2166 3.96416 53.6499C4.1645 51.0832 4.12396 48.5166 3.84252 45.9499C3.56109 43.3832 3.70993 40.8166 4.28905 38.2499C4.86817 35.6832 5.17886 33.1165 5.22111 30.5499C5.26336 27.9832 4.95095 25.4165 4.28387 22.8499C3.61679 20.2832 3.15862 17.7165 2.90935 15.1499C2.66007 12.5832 2.77953 10.0832 3.26771 7.64992C3.7559 5.21663 5.28332 4.17434 7.84999 4.52304Z">
                        </path>
                    </svg>

                </li>

                <li>

                    <figure>

                        <h2>
                            风格 2
                        </h2>

                        <figcaption>
                            这是一个测试文本段落，用于展示中文排版效果。文字内容包含随机生成的语句，主要测试网页元素的显示风格。段落中描述了不同场景下的视觉呈现方式，包括字体间距、行高对齐等排版细节。通过这段文字可以观察中文在不同容器中的换行表现，以及标点符号与文字的结合效果。测试文本不需要具备实际意义，只需保证字符数量和段落结构符合设计要求即可。
                        </figcaption>

                        <a href="javascript:void(0);" title="查看更多">
                            <em>查看更多</em>
                            <i>&#10095;&#10095;</i>
                        </a>

                    </figure>

                    <svg preserveAspectRatio="none" stroke="#FF3636" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" viewBox="0 0 112 113" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5.99995 7.0001H6.09995L10.75 4.97102L15.5 7.11381L20.25 7.65424L25 6.38528L29.75 5.07185L34.5 4.37598L39.25 7.4074L44 7.71973L48.75 9.00461L53.5 7.51571L58.2499 5.1471L63 4.93949L67.75 4.5446L72.5 7.10172L77.2499 5.61113L81.9999 9.29682L86.75 5.8137L91.5 7.16559L96.2499 7.20386L101 7.98377L105.75 5.04723L106.697 11.5001L108.122 16.2501L105.081 21.0001L103.973 25.7501L103.867 30.5001L103.895 35.2501L103.822 40.0001L103.304 44.7501L103.708 49.5001L108.454 54.2501L105.779 59.0001L106.911 63.7501L105.035 68.5001L105.647 73.2501L107.383 78.0001L108.242 82.7501L105.152 87.5001L108.615 92.2501L104.166 97.0001L106.903 101.75L105.494 106.5L101.75 105.427L96.9999 109.341L92.2499 105.701L87.4999 104.923L82.7499 105.233L78 107.709L73.25 107.43L68.5 104.508L63.75 106.291L59 108.664L54.25 105.196L49.5 109.575L44.75 107.241L39.9999 108.489L35.25 106.15L30.5 106.605L25.75 104.843L20.9999 108.664L16.25 106.547L11.5 106.779L6.74995 108.331L4.42624 103L8.16474 98.2501L8.15011 93.5001L5.73984 88.7501L4.98589 84.0001L6.8467 79.2501L5.48534 74.5001L8.23187 69.7501L6.24534 65.0001L4.77584 60.2501L6.44667 55.5001L8.31979 50.7501L5.89976 46.0001L4.09119 41.2501L3.98213 36.5001L3.31506 31.7501L5.71742 27.0001L4.85499 22.2501L5.21783 17.5001L8.43265 12.7501L6.15278 8.00009L5.99995 7.0001Z">
                        </path>
                    </svg>

                </li>

                <li>

                    <figure>

                        <h2>
                            风格 3
                        </h2>

                        <figcaption>
                            这是一个测试文本段落，用于展示中文排版效果。文字内容包含随机生成的语句，主要测试网页元素的显示风格。段落中描述了不同场景下的视觉呈现方式，包括字体间距、行高对齐等排版细节。通过这段文字可以观察中文在不同容器中的换行表现，以及标点符号与文字的结合效果。测试文本不需要具备实际意义，只需保证字符数量和段落结构符合设计要求即可。
                        </figcaption>

                        <a href="javascript:void(0);" title="查看更多">
                            <em>查看更多</em>
                            <i>&#10095;&#10095;</i>
                        </a>

                    </figure>

                    <svg preserveAspectRatio="none" stroke="#00A9FF" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" viewBox="0 0 108 108" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M5.38753 4.89455C5.69587 5.09339 6.0042 5.09227 6.31253 4.89117L7.23753 4.28788C7.54587 4.08679 7.8542 3.88806 8.16253 3.69172L9.08753 3.10267C9.39587 2.90633 9.7042 2.98486 10.0125 3.33827L10.9375 4.39849C11.2459 4.7519 11.5542 4.90381 11.8625 4.85422L12.7875 4.70547C13.0959 4.65588 13.4042 4.50512 13.7125 4.25317L14.6375 3.49732C14.9459 3.24537 15.2542 3.19525 15.5625 3.34697L16.4875 3.8021C16.7959 3.95381 17.1042 4.09265 17.4125 4.21861L18.3375 4.5965C18.6459 4.72246 18.9542 4.61662 19.2625 4.27897L20.1875 3.26604C20.4959 2.92839 20.8042 2.90268 21.1125 3.18891L22.0375 4.04761C22.3459 4.33384 22.6542 4.49937 22.9625 4.5442L23.8875 4.6787C24.1959 4.72354 24.5042 4.64068 24.8125 4.43013L25.7375 3.79848C26.0459 3.58793 26.3542 3.55854 26.6625 3.71033L27.5875 4.16568C27.8959 4.31746 28.2042 4.45217 28.5125 4.5698L29.4375 4.92269C29.7459 5.04032 30.0542 5.12415 30.3625 5.17417L31.2875 5.32425C31.5959 5.37427 31.9042 5.26194 32.2125 4.98725L33.1375 4.16319C33.4459 3.8885 33.7542 3.8652 34.0625 4.0933L34.9875 4.77758C35.2959 5.00568 35.6042 5.05637 35.9125 4.92967L36.8375 4.54957C37.1459 4.42286 37.4542 4.41178 37.7625 4.5163L38.6875 4.82988C38.9959 4.9344 39.3042 4.9964 39.6125 5.01587L40.5375 5.07429C40.8459 5.09377 41.1542 5.04545 41.4625 4.92935L42.3875 4.58105C42.6959 4.46495 43.0042 4.40917 43.3125 4.4137L44.2375 4.42732C44.5459 4.43186 44.8542 4.42243 45.1625 4.39902L46.0875 4.32881C46.3959 4.30541 46.7042 4.17067 47.0125 3.92461L47.9375 3.18642C48.2459 2.94035 48.5542 3.00455 48.8625 3.37902L49.7875 4.50243C50.0959 4.8769 50.4042 4.94819 50.7125 4.71629L51.6375 4.0206C51.9459 3.7887 52.2542 3.58968 52.5625 3.42353L53.4875 2.9251C53.7959 2.75896 54.1042 2.68291 54.4125 2.69696L55.3375 2.7391C55.6459 2.75314 55.9542 2.98145 56.2625 3.42402L57.1875 4.75172C57.4959 5.19429 57.8042 5.39609 58.1125 5.35712L59.0375 5.2402C59.3459 5.20122 59.6542 4.9609 59.9625 4.51923L60.8875 3.19421C61.1959 2.75254 61.5042 2.7598 61.8125 3.216L62.7375 4.58461C63.0459 5.04081 63.3542 5.23096 63.6625 5.15507L64.5875 4.92738C64.8958 4.85149 65.2042 4.73895 65.5125 4.58977L66.4375 4.14223C66.7458 3.99305 67.0542 3.8288 67.3625 3.64947L68.2875 3.11148C68.5958 2.93215 68.9042 3.06258 69.2125 3.50278L70.1375 4.82338C70.4458 5.26358 70.7542 5.39299 71.0625 5.2116L71.9875 4.66744C72.2958 4.48606 72.6042 4.42419 72.9125 4.48183L73.8375 4.65476C74.1458 4.71241 74.4542 4.67917 74.7625 4.55505L75.6875 4.18269C75.9958 4.05858 76.3042 3.93477 76.6125 3.81127L77.5375 3.44078C77.8458 3.31728 78.1542 3.39268 78.4625 3.66698L79.3875 4.48989C79.6958 4.76419 80.0042 4.70676 80.3125 4.31761L81.2375 3.15014C81.5458 2.76099 81.8542 2.75009 82.1625 3.11746L83.0875 4.21958C83.3958 4.58695 83.7042 4.75298 84.0125 4.71767L84.9375 4.61176C85.2458 4.57645 85.5542 4.4194 85.8625 4.1406L86.7875 3.3042C87.0958 3.02539 87.4042 2.9036 87.7125 2.93881L88.6375 3.04445C88.9458 3.07967 89.2542 3.2896 89.5625 3.67426L90.4875 4.82823C90.7958 5.21289 91.1042 5.20121 91.4125 4.79318L92.3375 3.56911C92.6458 3.16109 92.9542 3.02207 93.2625 3.15205L94.1875 3.542C94.4958 3.67199 94.8042 3.78533 95.1125 3.88204L96.0375 4.17217C96.3458 4.26888 96.6542 4.20183 96.9625 3.97102L97.8875 3.27859C98.1958 3.04778 98.5042 2.99605 98.8125 3.12338L99.7375 3.5054C100.046 3.63274 100.354 3.70154 100.662 3.71179L101.587 3.74255C101.896 3.7528 102.204 3.68358 102.512 3.53488L103.437 3.08879C103.746 2.94009 103.797 3.10608 103.59 3.58674L102.97 5.02872C102.763 5.50938 102.882 5.90387 103.327 6.21221L104.662 7.13721C105.108 7.44554 105.209 7.75387 104.966 8.0622L104.238 8.9872C103.995 9.29554 103.963 9.60387 104.142 9.9122L104.677 10.8372C104.856 11.1455 104.808 11.4539 104.532 11.7622L103.705 12.6872C103.429 12.9955 103.227 13.3039 103.098 13.6122L102.711 14.5372C102.583 14.8455 102.642 15.1539 102.889 15.4622L103.63 16.3872C103.877 16.6955 103.886 17.0039 103.657 17.3122L102.97 18.2372C102.741 18.5455 102.843 18.8539 103.275 19.1622L104.571 20.0872C105.003 20.3955 105.127 20.7039 104.944 21.0122L104.394 21.9372C104.21 22.2455 104.23 22.5539 104.451 22.8622L105.117 23.7872C105.339 24.0955 105.381 24.4039 105.244 24.7122L104.833 25.6372C104.696 25.9455 104.455 26.2539 104.111 26.5622L103.078 27.4872C102.734 27.7955 102.661 28.1039 102.86 28.4122L103.455 29.3372C103.654 29.6455 103.837 29.9539 104.006 30.2622L104.511 31.1872C104.68 31.4955 104.814 31.8039 104.915 32.1122L105.215 33.0372C105.316 33.3455 105.214 33.6539 104.911 33.9622L104.001 34.8872C103.698 35.1955 103.705 35.5039 104.022 35.8122L104.975 36.7372C105.292 37.0455 105.368 37.3539 105.202 37.6622L104.703 38.5872C104.537 38.8955 104.512 39.2039 104.629 39.5122L104.979 40.4372C105.095 40.7455 104.972 41.0539 104.61 41.3622L103.522 42.2872C103.16 42.5955 102.966 42.9039 102.94 43.2122L102.862 44.1372C102.836 44.4456 102.851 44.7539 102.908 45.0622L103.077 45.9872C103.134 46.2956 103.189 46.6039 103.244 46.9122L103.406 47.8372C103.46 48.1456 103.65 48.4539 103.976 48.7622L104.952 49.6872C105.278 49.9956 105.287 50.3039 104.98 50.6122L104.059 51.5372C103.752 51.8456 103.576 52.1539 103.531 52.4622L103.396 53.3872C103.351 53.6956 103.474 54.0039 103.764 54.3123L104.634 55.2373C104.924 55.5456 105.026 55.8539 104.941 56.1623L104.683 57.0873C104.598 57.3956 104.472 57.7039 104.306 58.0123L103.809 58.9373C103.643 59.2456 103.516 59.5539 103.427 59.8623L103.161 60.7873C103.072 61.0956 103.219 61.4039 103.601 61.7123L104.748 62.6373C105.13 62.9456 105.103 63.2539 104.667 63.5623L103.359 64.4873C102.923 64.7956 102.737 65.104 102.801 65.4123L102.995 66.3373C103.06 66.6456 103.252 66.954 103.573 67.2623L104.536 68.1873C104.857 68.4956 104.882 68.804 104.613 69.1123L103.803 70.0373C103.533 70.3456 103.343 70.654 103.231 70.9623L102.897 71.8873C102.785 72.1956 102.76 72.504 102.821 72.8123L103.005 73.7373C103.066 74.0456 103.094 74.354 103.088 74.6623L103.069 75.5873C103.063 75.8957 103.152 76.204 103.336 76.5123L103.889 77.4373C104.074 77.7457 104.203 78.054 104.278 78.3623L104.501 79.2873C104.576 79.5957 104.646 79.904 104.711 80.2123L104.907 81.1373C104.972 81.4457 104.911 81.754 104.723 82.0623L104.161 82.9873C103.974 83.2957 103.786 83.604 103.599 83.9123L103.035 84.8373C102.847 85.1457 102.835 85.454 102.998 85.7624L103.488 86.6874C103.651 86.9957 103.673 87.304 103.552 87.6124L103.19 88.5374C103.07 88.8457 103.087 89.154 103.242 89.4624L103.707 90.3874C103.862 90.6957 103.913 91.004 103.86 91.3124L103.701 92.2374C103.648 92.5457 103.751 92.8541 104.011 93.1624L104.789 94.0874C105.049 94.3957 105.074 94.7041 104.866 95.0124L104.242 95.9374C104.033 96.2457 104.056 96.5541 104.31 96.8624L105.072 97.7874C105.325 98.0957 105.396 98.4041 105.284 98.7124L104.948 99.6374C104.835 99.9457 104.787 100.254 104.801 100.562L104.845 101.487C104.86 101.796 104.714 102.104 104.408 102.412L103.491 103.337C103.185 103.646 102.976 103.92 102.862 104.159L102.521 104.877C102.407 105.116 102.196 105.256 101.887 105.296L100.962 105.418C100.654 105.458 100.346 105.31 100.037 104.972L99.1124 103.958C98.804 103.62 98.4957 103.426 98.1874 103.375L97.2624 103.223C96.954 103.172 96.6457 103.191 96.3373 103.279L95.4123 103.545C95.104 103.633 94.7957 103.76 94.4873 103.925L93.5623 104.419C93.254 104.584 92.9457 104.606 92.6373 104.483L91.7123 104.115C91.404 103.993 91.0957 103.831 90.7873 103.631L89.8623 103.029C89.554 102.829 89.2457 102.8 88.9373 102.942L88.0123 103.368C87.704 103.51 87.3957 103.602 87.0873 103.642L86.1623 103.763C85.854 103.804 85.5456 103.824 85.2373 103.825L84.3123 103.828C84.004 103.828 83.6956 103.857 83.3873 103.913L82.4623 104.082C82.154 104.138 81.8456 104.138 81.5373 104.081L80.6123 103.911C80.304 103.854 79.9956 103.862 79.6873 103.936L78.7623 104.159C78.454 104.233 78.1456 104.364 77.8373 104.552L76.9123 105.116C76.604 105.304 76.2956 105.288 75.9873 105.069L75.0623 104.411C74.7539 104.192 74.4456 103.977 74.1373 103.767L73.2123 103.138C72.9039 102.928 72.5956 103.026 72.2873 103.431L71.3623 104.646C71.0539 105.051 70.7456 105.115 70.4373 104.837L69.5123 104.003C69.2039 103.725 68.8956 103.632 68.5873 103.723L67.6623 103.996C67.3539 104.087 67.0456 104.023 66.7373 103.806L65.8123 103.154C65.5039 102.937 65.1956 102.911 64.8872 103.078L63.9622 103.577C63.6539 103.744 63.3456 103.795 63.0372 103.732L62.1122 103.54C61.8039 103.476 61.4956 103.476 61.1872 103.539L60.2622 103.729C59.9539 103.792 59.6456 103.759 59.3372 103.631L58.4122 103.245C58.1039 103.116 57.7956 103.071 57.4872 103.109L56.5622 103.224C56.2539 103.262 55.9456 103.447 55.6372 103.779L54.7122 104.775C54.4039 105.107 54.0955 105.26 53.7872 105.233L52.8622 105.153C52.5539 105.126 52.2455 105.015 51.9372 104.82L51.0122 104.236C50.7039 104.041 50.3955 103.851 50.0872 103.666L49.1622 103.11C48.8539 102.925 48.5455 103.035 48.2372 103.442L47.3122 104.662C47.0039 105.069 46.6955 105.124 46.3872 104.826L45.4622 103.934C45.1539 103.636 44.8455 103.41 44.5372 103.254L43.6122 102.788C43.3039 102.632 42.9955 102.702 42.6872 102.997L41.7622 103.881C41.4539 104.176 41.1455 104.332 40.8372 104.35L39.9122 104.403C39.6038 104.421 39.2955 104.273 38.9872 103.959L38.0622 103.015C37.7538 102.701 37.4455 102.695 37.1372 102.997L36.2122 103.903C35.9038 104.206 35.5955 104.367 35.2872 104.389L34.3622 104.454C34.0538 104.475 33.7455 104.34 33.4372 104.049L32.5122 103.176C32.2038 102.885 31.8955 102.883 31.5872 103.172L30.6621 104.037C30.3538 104.325 30.0455 104.378 29.7371 104.195L28.8121 103.646C28.5038 103.463 28.1955 103.445 27.8871 103.592L26.9621 104.031C26.6538 104.178 26.3455 104.23 26.0371 104.189L25.1121 104.065C24.8038 104.024 24.4955 104.122 24.1871 104.361L23.2621 105.078C22.9538 105.316 22.6455 105.215 22.3371 104.773L21.4121 103.447C21.1038 103.005 20.7954 102.879 20.4871 103.07L19.5621 103.641C19.2538 103.832 18.9454 103.916 18.6371 103.893L17.7121 103.825C17.4038 103.803 17.0954 103.694 16.7871 103.498L15.8621 102.912C15.5538 102.716 15.2454 102.734 14.9371 102.965L14.0121 103.659C13.7038 103.891 13.3954 104.041 13.0871 104.11L12.1621 104.318C11.8538 104.388 11.5454 104.469 11.2371 104.563L10.3121 104.842C10.0037 104.936 9.69541 105.01 9.38708 105.065L8.46208 105.229C8.15374 105.284 7.84541 105.269 7.53707 105.183L6.61207 104.927C6.30373 104.841 5.9954 104.766 5.68707 104.7L4.76207 104.503C4.45373 104.437 4.25964 104.242 4.17978 103.916L3.9402 102.938C3.86035 102.612 3.92186 102.295 4.12475 101.987L4.73341 101.062C4.9363 100.753 4.8632 100.445 4.51412 100.137L3.46688 99.2118C3.11779 98.9034 3.03939 98.5951 3.23168 98.2868L3.80853 97.3618C4.00081 97.0534 4.11235 96.7451 4.14314 96.4368L4.23553 95.5118C4.26633 95.2034 4.32972 94.8951 4.42572 94.5868L4.7137 93.6618C4.80969 93.3534 4.8733 93.0451 4.90452 92.7367L4.99818 91.8118C5.0294 91.5034 4.93921 91.1951 4.7276 90.8867L4.09276 89.9617C3.88114 89.6534 3.8728 89.3451 4.06773 89.0367L4.65253 88.1117C4.84746 87.8034 4.8109 87.4951 4.54286 87.1867L3.73872 86.2617C3.47068 85.9534 3.43631 85.6451 3.63561 85.3367L4.23352 84.4117C4.43282 84.1034 4.39829 83.7951 4.12993 83.4867L3.32483 82.5617C3.05647 82.2534 3.02704 81.945 3.23654 81.6367L3.86507 80.7117C4.07458 80.4034 4.18977 80.095 4.21065 79.7867L4.27328 78.8617C4.29416 78.5534 4.36953 78.245 4.4994 77.9367L4.88899 77.0117C5.01885 76.7034 4.96311 76.395 4.72177 76.0867L3.99773 75.1617C3.75638 74.8534 3.75933 74.545 4.00656 74.2367L4.74826 73.3117C4.9955 73.0034 5.11535 72.695 5.10782 72.3867L5.08523 71.4617C5.0777 71.1534 4.88683 70.845 4.51261 70.5367L3.38997 69.6117C3.01576 69.3033 2.90919 68.995 3.07027 68.6867L3.55351 67.7617C3.7146 67.4533 3.90837 67.145 4.13484 66.8367L4.81426 65.9117C5.04073 65.6033 4.95917 65.295 4.56957 64.9867L3.40078 64.0617C3.01118 63.7533 2.96864 63.445 3.27315 63.1367L4.18667 62.2117C4.49118 61.9033 4.66097 61.595 4.69605 61.2866L4.80127 60.3616C4.83634 60.0533 4.77999 59.745 4.6322 59.4366L4.18885 58.5116C4.04106 58.2033 3.96118 57.895 3.94921 57.5866L3.91328 56.6616C3.9013 56.3533 3.99838 56.045 4.20451 55.7366L4.8229 54.8116C5.02903 54.5033 5.00279 54.195 4.74418 53.8866L3.96833 52.9616C3.70972 52.6533 3.50144 52.345 3.34351 52.0366L2.86972 51.1116C2.71179 50.8033 2.78543 50.4949 3.09065 50.1866L4.00629 49.2616C4.31151 48.9533 4.49031 48.6449 4.5427 48.3366L4.69987 47.4116C4.75225 47.1033 4.77738 46.7949 4.77524 46.4866L4.76883 45.5616C4.7667 45.2533 4.66366 44.9449 4.45973 44.6366L3.84793 43.7116C3.644 43.4033 3.65391 43.0949 3.87766 42.7866L4.54892 41.8616C4.77267 41.5532 4.86391 41.2449 4.82264 40.9366L4.69883 40.0116C4.65755 39.7032 4.70494 39.3949 4.84098 39.0866L5.24909 38.1616C5.38513 37.8532 5.43106 37.5449 5.38689 37.2366L5.25435 36.3116C5.21018 36.0032 5.00183 35.6949 4.62932 35.3866L3.51177 34.4616C3.13926 34.1532 3.05332 33.8449 3.25394 33.5366L3.85582 32.6116C4.05645 32.3032 4.25657 31.9949 4.45619 31.6866L5.05504 30.7615C5.25465 30.4532 5.27457 30.1449 5.11479 29.8365L4.63544 28.9115C4.47565 28.6032 4.42306 28.2949 4.47767 27.9865L4.64149 27.0615C4.6961 26.7532 4.64922 26.4449 4.50084 26.1365L4.05572 25.2115C3.90734 24.9032 3.74181 24.5949 3.55913 24.2865L3.01107 23.3615C2.82838 23.0532 2.83955 22.7449 3.04455 22.4365L3.65958 21.5115C3.86459 21.2032 3.91547 20.8948 3.81223 20.5865L3.50251 19.6615C3.39927 19.3532 3.49617 19.0448 3.79322 18.7365L4.68436 17.8115C4.9814 17.5032 5.09306 17.1948 5.01932 16.8865L4.79809 15.9615C4.72435 15.6532 4.66452 15.3448 4.61862 15.0365L4.4809 14.1115C4.435 13.8032 4.34532 13.4948 4.21187 13.1865L3.81152 12.2615C3.67807 11.9532 3.76518 11.6448 4.07286 11.3365L4.99588 10.4115C5.30356 10.1031 5.23708 9.79481 4.79645 9.48648L3.47456 8.56147C3.03393 8.25314 2.86539 7.94481 2.96893 7.63647L3.27957 6.71147C3.38311 6.40313 3.38266 6.0948 3.2782 5.78646L2.96485 4.86146C2.86039 4.55313 2.90749 4.36569 3.10613 4.29916L3.70207 4.09956C3.90071 4.03303 4.1542 4.09918 4.46253 4.29802L5.38753 4.89455Z">
                        </path>
                    </svg>

                </li>

            </ul>

        </section>

    </section>

</article>
</body>

</html>

            
                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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312

            
            *:not(head, head *, style, script, svg, svg *),
*:not(head, head *, style, script, svg, svg *)::before,
*:not(head, head *, style, script, svg, svg *)::after {
    all: unset;
    box-sizing: border-box;
}

@charset "UTF-8";

body,
html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: gray black;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    margin: 0;
    background-color: #222;
    font: normal normal 400 16px / 150% sans-serif;
    color: #444;
}

article {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

article .sectionWrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px;
}

article #_boxes {
    width: 100%;
    max-width: 1265px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px 0;
}

article #_boxes ul {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 25px;
}

article #_boxes ul li {
    width: calc((100% / 3) - 10px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px;
    border-radius: 8px;
    z-index: 1;
    overflow: visible;
}

article #_boxes ul li:nth-child(1) {
    --cardAccent: #3f9f47;
}

article #_boxes ul li:nth-child(2) {
    --cardAccent: #ff3636;
}

article #_boxes ul li:nth-child(3) {
    --cardAccent: #00a9ff;
}

article #_boxes ul li::after {
    position: absolute;
    width: calc(100% - 50px);
    height: calc(100% - 50px);
    z-index: -2;
    border-radius: 8px;
    background-color: black;
    filter: drop-shadow(0px 0px 35px var(--cardAccent)) hue-rotate(0deg);
    content: "";
}

article #_boxes ul li:nth-child(1)::after {
    animation: hue-rotate-special 7s linear infinite reverse;
}

article #_boxes ul li:nth-child(2)::after {
    animation: hue-rotate-special 9s linear infinite;
}

article #_boxes ul li:nth-child(3)::after {
    animation: hue-rotate-special 5s linear infinite alternate-reverse;
}

@keyframes hue-rotate-special {
    to {
        filter: drop-shadow(0px 0px 35px var(--cardAccent)) hue-rotate(360deg);
    }
}

article #_boxes ul li svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

article #_boxes ul li:nth-child(1) svg {
    stroke-dasharray: 331 66;
    animation: dash 7s linear infinite reverse;
}

article #_boxes ul li:nth-child(2) svg {
    stroke-dasharray: 307 131;
    animation: dash2 9s linear infinite;
}

article #_boxes ul li:nth-child(3) svg {
    stroke-dasharray: 309 154;
    animation: dash3 5s linear infinite alternate-reverse;
}

@keyframes dash {
    to {
        stroke-dashoffset: -397px;
        filter: hue-rotate(360deg);
    }
}

@keyframes dash2 {
    to {
        stroke-dashoffset: -438px;
        filter: hue-rotate(360deg);
    }
}

@keyframes dash3 {
    to {
        stroke-dashoffset: -463px;
        filter: hue-rotate(360deg);
    }
}

article #_boxes ul li figure {
    position: relative;
    background-color: #ccc;
    border-radius: 8px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 35px;
    z-index: 1;
}

article #_boxes ul li figure::after {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 70px;
    height: 70px;
    border: 20px solid var(--cardAccent);
    border-radius: 100%;
    pointer-events: none;
    z-index: 1;
    content: "";
}

article #_boxes ul li figure h2 {
    color: black;
    font-weight: 700;
    line-height: 110%;
    text-transform: capitalize;
    font-size: 250%;
    margin-bottom: 20px;
}

article #_boxes ul li figure figcaption {
    padding-left: 30px;
    border-left: 1px solid black;
    text-align: justify;
    text-justify: inter-word;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

article #_boxes ul li figure a {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 25px;
    background-color: var(--cardAccent);
    padding: 7px 17px;
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
    z-index: 1;
}

article #_boxes ul li figure a::after {
    position: absolute;
    right: calc(100% + 1px);
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    border-radius: 4px;
    transition: all 0.3s ease;
    z-index: -1;
    content: "";
}

article #_boxes ul li figure a:hover::after {
    right: 0;
    transition: all 0.3s ease;
}

article #_boxes ul li:nth-child(1) figure a,
article #_boxes ul li:nth-child(1) figure::after {
    animation: hue-rotate 7s linear infinite reverse;
}

article #_boxes ul li:nth-child(2) figure a,
article #_boxes ul li:nth-child(2) figure::after {
    animation: hue-rotate 9s linear infinite;
}

article #_boxes ul li:nth-child(3) figure a,
article #_boxes ul li:nth-child(3) figure::after {
    animation: hue-rotate 5s linear infinite alternate-reverse;
}

@keyframes hue-rotate {
    to {
        filter: hue-rotate(360deg);
    }
}

article #_boxes ul li figure a em {
    color: white;
    font-weight: 500;
    margin-right: 10px;
}

article #_boxes ul li figure a i {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    color: white;
    position: relative;
    top: 1px;
    transition: all 0.3s ease;
}

article #_boxes ul li figure a:hover i {
    margin-left: 10px;
    transition: all 0.3s ease;
}

@media (max-width: 1050px) {
    article #_boxes ul li {
        width: 100%;
    }
}

@media (max-width: 900px) {
    article #_boxes ul li figure h2 {
        font-size: 200%;
    }
}

@media (max-width: 450px) {
    article #_boxes ul li figure::after {
        width: 50px;
        height: 50px;
        border: 15px solid var(--cardAccent);
    }
}

            
                1

            
            console.log(["Hello 笔.COOL 控制台"])

预览

控制台