未命名 LI83uX，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

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    :root {
      font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem);
      --clr-bg: #020617;
      color-scheme: dark light;
    }

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

    body {
      background: var(--clr-bg);
      display: grid;
      place-items: center;
      height: 100svh;
      padding: 1em;
    }

    [defs] {
      position: absolute;
      pointer-events: none;
      opacity: 0;
    }

    [⚡] {
      width: min(40rem, 100%);
      height: 100%;
      display: grid;
      place-items: center;
      filter: url(#electricity);
      isolation: isolate;
      mix-blend-mode: screen;
    }

    @property --a {
      inherits: true;
      syntax: "<angle>";
      initial-value: 0deg;
    }

    @property --i {
      inherits: true;
      syntax: "<percentage>";
      initial-value: 50%;
    }

    @keyframes speen {
      from {
        --a: 0turn;
      }

      to {
        --a: 1turn;
      }
    }

    [⬜] {
      animation: speen 10s infinite linear;
      filter: blur(3px);
      background: repeating-conic-gradient(from var(--a), #000 var(--i), #000 .7turn,
          cyan, hotpink, white);
      display: block;
      cursor: pointer;
      border-radius: 2em;
      width: min(10rem, 100%);
      aspect-ratio: 2/3;
      opacity: 0.6;
      transition: opacity 0.3s, --i 3s;
      transition-timing-function: cubic-bezier(0.44, 0, 0.56, 1);
      will-change: opacity;

      &:hover {
        opacity: 0.8;
        --i: 80%;
      }

      &:active {
        opacity: 1;
      }
    }
  </style>
</head>

<body>
  <main ⚡>
    <i ⬜></i>
  </main>

  <svg defs height="0" width="0" viewBox="0 0 1 1" color-interpolation-filters="sRGB">
    <defs>
      <filter x="-50%" y="-50%" width="200%" height="200%" id="electricity" style="">
        <feTurbulence result="turbulence-0" baseFrequency="0.03" numOctaves="3" type="fractalNoise" />
        <feColorMatrix result="color-matrix-1" in="turbulence-0" type="hueRotate" values="0">

        </feColorMatrix>
        <feComponentTransfer result="component-transfer-0" in="SourceGraphic">
          <feFuncA type="table" tableValues="0 1 1" />
        </feComponentTransfer>
        <feColorMatrix result="color-matrix-0" in="component-transfer-0" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" />
        <feMorphology result="morphology-0" in="color-matrix-0" radius="8" />
        <feComposite result="composite-1" in="color-matrix-0" in2="morphology-0" operator="out" />
        <feFlood result="flood-0" style="flood-color: rgb(128, 128, 0);" />
        <feComposite result="composite-0" in="flood-0" in2="none" operator="in" />
        <feComponentTransfer result="component-transfer-1" in="SourceGraphic">
          <feFuncA type="table" tableValues="0 0 1" />
          <feFuncR />
        </feComponentTransfer>
        <feMorphology result="morphology-1" in="component-transfer-1" radius="10" operator="dilate" />
        <feSpecularLighting xmlns="http://www.w3.org/2000/svg" result="specular-lighting-0" in="turbulence-0" lighting-color="#ffffff" specularConstant="2" specularExponent="29" surfaceScale="4">
          <feDistantLight xmlns="http://www.w3.org/2000/svg" azimuth="0" elevation="45">
            <animate attributeName="azimuth" from="0" to="360" dur=".8s" repeatCount="indefinite" />
          </feDistantLight>
        </feSpecularLighting>
        <feComposite result="composite-2" in="specular-lighting-0" in2="morphology-1" operator="in" />
        <feMerge result="merge-0">
          <feMergeNode in="composite-0" />
          <feMergeNode in="composite-2" />
        </feMerge>
        <feDisplacementMap result="displacement-map-0" in="composite-1" in2="merge-0" scale="42" xChannelSelector="R" yChannelSelector="G" />
        <feComposite result="composite-3" in="none" in2="merge-0" operator="arithmetic" k2="1" />
      </filter>
    </defs>
  </svg>
</body>

</html>
编辑器加载中