返回组件库
按钮
组件库
AI Design
红蓝特效输入框
CSS
01.grid {
02 height: 800px;
03 width: 800px;
04 background-image: linear-gradient(to right, #0f0f10 1px, transparent 1px),
05 linear-gradient(to bottom, #0f0f10 1px, transparent 1px);
06 background-size: 1rem 1rem;
07 background-position: center center;
08 position: absolute;
09 z-index: -1;
10 filter: blur(1px);
11}
12.white,
13.border,
14.darkBorderBg,
15.glow {
16 max-height: 70px;
17 max-width: 314px;
18 height: 100%;
19 width: 100%;
20 position: absolute;
21 overflow: hidden;
22 z-index: -1;
23 /* Border Radius */
24 border-radius: 12px;
25 filter: blur(3px);
26}
27.input {
28 background-color: #010201;
29 border: none;
30 /* padding:7px; */
31 width: 301px;
32 height: 56px;
33 border-radius: 10px;
34 color: white;
35 padding-inline: 59px;
36 font-size: 18px;
37}
38#poda {
39 display: flex;
40 align-items: center;
41 justify-content: center;
42}
43.input::placeholder {
44 color: #c0b9c0;
45}
46
47.input:focus {
48 outline: none;
49}
50
51#main:focus-within > #input-mask {
52 display: none;
53}
54
55#input-mask {
56 pointer-events: none;
57 width: 100px;
58 height: 20px;
59 position: absolute;
60 background: linear-gradient(90deg, transparent, black);
61 top: 18px;
62 left: 70px;
63}
64#pink-mask {
65 pointer-events: none;
66 width: 30px;
67 height: 20px;
68 position: absolute;
69 background: #cf30aa;
70 top: 10px;
71 left: 5px;
72 filter: blur(20px);
73 opacity: 0.8;
74 //animation:leftright 4s ease-in infinite;
75 transition: all 2s;
76}
77#main:hover > #pink-mask {
78 //animation: rotate 4s linear infinite;
79 opacity: 0;
80}
81
82.white {
83 max-height: 63px;
84 max-width: 307px;
85 border-radius: 10px;
86 filter: blur(2px);
87}
88
89.white::before {
90 content: "";
91 z-index: -2;
92 text-align: center;
93 top: 50%;
94 left: 50%;
95 transform: translate(-50%, -50%) rotate(83deg);
96 position: absolute;
97 width: 600px;
98 height: 600px;
99 background-repeat: no-repeat;
100 background-position: 0 0;
101 filter: brightness(1.4);
102 background-image: conic-gradient(
103 rgba(0, 0, 0, 0) 0%,
104 #a099d8,
105 rgba(0, 0, 0, 0) 8%,
106 rgba(0, 0, 0, 0) 50%,
107 #dfa2da,
108 rgba(0, 0, 0, 0) 58%
109 );
110 // animation: rotate 4s linear infinite;
111 transition: all 2s;
112}
113.border {
114 max-height: 59px;
115 max-width: 303px;
116 border-radius: 11px;
117 filter: blur(0.5px);
118}
119.border::before {
120 content: "";
121 z-index: -2;
122 text-align: center;
123 top: 50%;
124 left: 50%;
125 transform: translate(-50%, -50%) rotate(70deg);
126 position: absolute;
127 width: 600px;
128 height: 600px;
129 filter: brightness(1.3);
130 background-repeat: no-repeat;
131 background-position: 0 0;
132 background-image: conic-gradient(
133 #1c191c,
134 #402fb5 5%,
135 #1c191c 14%,
136 #1c191c 50%,
137 #cf30aa 60%,
138 #1c191c 64%
139 );
140 // animation: rotate 4s 0.1s linear infinite;
141 transition: all 2s;
142}
143.darkBorderBg {
144 max-height: 65px;
145 max-width: 312px;
146}
147.darkBorderBg::before {
148 content: "";
149 z-index: -2;
150 text-align: center;
151 top: 50%;
152 left: 50%;
153 transform: translate(-50%, -50%) rotate(82deg);
154 position: absolute;
155 width: 600px;
156 height: 600px;
157 background-repeat: no-repeat;
158 background-position: 0 0;
159 background-image: conic-gradient(
160 rgba(0, 0, 0, 0),
161 #18116a,
162 rgba(0, 0, 0, 0) 10%,
163 rgba(0, 0, 0, 0) 50%,
164 #6e1b60,
165 rgba(0, 0, 0, 0) 60%
166 );
167 transition: all 2s;
168}
169#poda:hover > .darkBorderBg::before {
170 transform: translate(-50%, -50%) rotate(262deg);
171}
172#poda:hover > .glow::before {
173 transform: translate(-50%, -50%) rotate(240deg);
174}
175#poda:hover > .white::before {
176 transform: translate(-50%, -50%) rotate(263deg);
177}
178#poda:hover > .border::before {
179 transform: translate(-50%, -50%) rotate(250deg);
180}
181
182#poda:hover > .darkBorderBg::before {
183 transform: translate(-50%, -50%) rotate(-98deg);
184}
185#poda:hover > .glow::before {
186 transform: translate(-50%, -50%) rotate(-120deg);
187}
188#poda:hover > .white::before {
189 transform: translate(-50%, -50%) rotate(-97deg);
190}
191#poda:hover > .border::before {
192 transform: translate(-50%, -50%) rotate(-110deg);
193}
194
195#poda:focus-within > .darkBorderBg::before {
196 transform: translate(-50%, -50%) rotate(442deg);
197 transition: all 4s;
198}
199#poda:focus-within > .glow::before {
200 transform: translate(-50%, -50%) rotate(420deg);
201 transition: all 4s;
202}
203#poda:focus-within > .white::before {
204 transform: translate(-50%, -50%) rotate(443deg);
205 transition: all 4s;
206}
207#poda:focus-within > .border::before {
208 transform: translate(-50%, -50%) rotate(430deg);
209 transition: all 4s;
210}
211
212.glow {
213 overflow: hidden;
214 filter: blur(30px);
215 opacity: 0.4;
216 max-height: 130px;
217 max-width: 354px;
218}
219.glow:before {
220 content: "";
221 z-index: -2;
222 text-align: center;
223 top: 50%;
224 left: 50%;
225 transform: translate(-50%, -50%) rotate(60deg);
226 position: absolute;
227 width: 999px;
228 height: 999px;
229 background-repeat: no-repeat;
230 background-position: 0 0;
231 /*border color, change middle color*/
232 background-image: conic-gradient(
233 #000,
234 #402fb5 5%,
235 #000 38%,
236 #000 50%,
237 #cf30aa 60%,
238 #000 87%
239 );
240 /* change speed here */
241 //animation: rotate 4s 0.3s linear infinite;
242 transition: all 2s;
243}
244
245@keyframes rotate {
246 100% {
247 transform: translate(-50%, -50%) rotate(450deg);
248 }
249}
250@keyframes leftright {
251 0% {
252 transform: translate(0px, 0px);
253 opacity: 1;
254 }
255
256 49% {
257 transform: translate(250px, 0px);
258 opacity: 0;
259 }
260 80% {
261 transform: translate(-40px, 0px);
262 opacity: 0;
263 }
264
265 100% {
266 transform: translate(0px, 0px);
267 opacity: 1;
268 }
269}
270
271#filter-icon {
272 position: absolute;
273 top: 8px;
274 right: 8px;
275 display: flex;
276 align-items: center;
277 justify-content: center;
278 z-index: 2;
279 max-height: 40px;
280 max-width: 38px;
281 height: 100%;
282 width: 100%;
283
284 isolation: isolate;
285 overflow: hidden;
286 /* Border Radius */
287 border-radius: 10px;
288 background: linear-gradient(180deg, #161329, black, #1d1b4b);
289 border: 1px solid transparent;
290}
291.filterBorder {
292 height: 42px;
293 width: 40px;
294 position: absolute;
295 overflow: hidden;
296 top: 7px;
297 right: 7px;
298 border-radius: 10px;
299}
300
301.filterBorder::before {
302 content: "";
303
304 text-align: center;
305 top: 50%;
306 left: 50%;
307 transform: translate(-50%, -50%) rotate(90deg);
308 position: absolute;
309 width: 600px;
310 height: 600px;
311 background-repeat: no-repeat;
312 background-position: 0 0;
313 filter: brightness(1.35);
314 background-image: conic-gradient(
315 rgba(0, 0, 0, 0),
316 #3d3a4f,
317 rgba(0, 0, 0, 0) 50%,
318 rgba(0, 0, 0, 0) 50%,
319 #3d3a4f,
320 rgba(0, 0, 0, 0) 100%
321 );
322 animation: rotate 4s linear infinite;
323}
324#main {
325 position: relative;
326}
327#search-icon {
328 position: absolute;
329 left: 20px;
330 top: 15px;
331}