纯CSS3实现漂亮的input输入框动画样式库(Text input love)

分享一个用纯 CSS3 实现的，漂亮的 input 输入框动画样式库-Text input love。

点击每个输入框都用不同的动画效果，始终显示标签label，并显示 placeholder（占位符）文本。

演示地址：https://codepen.io/MichaelArestad/full/ohLIa

HTML 代码：

1. <div class="row">
2. <p>Click every input.</p>
3. </div>
4. <div class="row">
5. <span>
6. <input class="basic-slide" id="name" type="text" placeholder="Your best name" /><labelfor="name">Name</label>
7. </span>
8. <span>
9. <input class="basic-slide" id="email" type="text" placeholder="Your favorite email" /><labelfor="email">Email</label>
10. </span>
11. <span>
12. <input class="basic-slide" id="phone" type="text" placeholder="You can trust us" /><labelfor="phone">Phone</label>
13. </span>
14. </div>
15. <div class="row">
16. <span>
17. <input class="clean-slide" id="age" type="text" placeholder="Go for the high score!" /><labelfor="age">Age</label>
18. </span>
19. <span>
20. <input class="clean-slide" id="height" type="text" placeholder="Heels count" /><labelfor="height">Height</label>
21. </span>
22. <span>
23. <input class="clean-slide" id="weight" type="text" placeholder="Go ahead and lie" /><labelfor="weight">Weight</label>
24. </span>
25. </div>
26. <div class="row">
27. <span>
28. <input class="gate" id="class" type="text" placeholder="Wizard!" /><labelfor="class">Class</label>
29. </span>
30. <span>
31. <input class="gate" id="element" type="text" placeholder="Five to choose from" /><labelfor="element">Element</label>
32. </span>
33. <span>
34. <input class="gate" id="move" type="text" placeholder="Secret book attack!" /><labelfor="move">Move</label>
35. </span>
36. </div>
37. <div class="row">
38. <span>
39. <input class="skinny" id="english" type="text" placeholder="Do you speak it?" /><labelfor="english">English</label>
40. </span>
41. <span>
42. <input class="skinny" id="burger" type="text" placeholder="A Royale with cheese?" /><labelfor="burger">Burger</label>
43. </span>
44. <span>
45. <input class="skinny" id="wallet" type="text" placeholder="Bad Mother****er" /><labelfor="wallet">Wallet</label>
46. </span>
47. </div>
48. <div class="row">
49. <span>
50. <input class="slide-up" id="card" type="text" placeholder="Fund me!" /><labelfor="card">Credit Card</label>
51. </span>
52. <span>
53. <input class="slide-up" id="expires" type="text" placeholder="Month Day, Year" /><labelfor="expires">Expires</label>
54. </span>
55. <span>
56. <input class="slide-up" id="security" type="text" placeholder="Public" /><labelfor="security">Security Code</label>
57. </span>
58. </div>
59. <div class="row">
60. <span>
61. <input class="card-slide" id="knock" type="text" placeholder="Who's there?" /><labelfor="knock">Knock knock</label>
62. </span>
63. <span>
64. <input class="card-slide" id="max" type="text" placeholder="Max who?" /><labelfor="max">Max</label>
65. </span>
66. <span>
67. <input class="card-slide" id="out" type="text" placeholder="Sunuva..." /><labelfor="out">Maxed out card ;)</label>
68. </span>
69. </div>
70. <div class="row">
71. <span>
72. <input class="swing" id="artist" type="text" placeholder="BO$$" /><labelfor="artist">Artist</label>
73. </span>
74. <span>
75. <input class="swing" id="song" type="text" placeholder="I don't give a ****" /><labelfor="song">Song</label>
76. </span>
77. <span>
78. <input class="swing" id="eyes" type="text" placeholder="Crazy" /><labelfor="eyes">Eyes</label>
79. </span>
80. </div>
81. <div class="row">
82. <span>
83. <input class="balloon" id="state" type="text" placeholder="Liquid, solid, gaseous..." /><labelfor="state">State</label>
84. </span>
85. <span>
86. <input class="balloon" id="planet" type="text" placeholder="Probably Earth" /><labelfor="planet">Planet</label>
87. </span>
88. <span>
89. <input class="balloon" id="galaxy" type="text" placeholder="Milky Way?" /><labelfor="galaxy">Galaxy</label>
90. </span>
91. </div>

SCSS 代码：

Sass 代码:

1. @import "compass/css3";
2.  
3. @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300,800);
4.  
5. * {
6. box-sizing: border-box;
7. }
8. html,
9. body {
10. overflow-x: hidden;
11. font-family: "Open Sans", sans-serif;
12. font-weight: 300;
13. color: #fff;
14. background: #efefef;
15. }
16. @mixin epic-sides() { // https://codepen.io/MichaelArestad/pen/qltuk
17. position: relative;
18. z-index: 1;
19.  
20. &:before {
21. position: absolute;
22. content: "";
23. display: block;
24. top: 0;
25. left: -5000px;
26. height: 100%;
27. width: 15000px;
28. z-index: -1;
29. @content;
30. }
31. }
32. .row {
33. max-width: 800px;
34. margin: 0 auto;
35. padding: 60px 30px;
36. background: #032429;
37. @include epic-sides() {background: inherit;}
38. text-align: center;
39.  
40. &:first-child {
41. padding: 40px 30px;
42. }
43. &:nth-child(2),
44. &:nth-child(8),
45. &:nth-child(10){
46. background: #134A46;
47. }
48. &:nth-child(3),
49. &:nth-child(7) {
50. background: #377D6A;
51. }
52. &:nth-child(4),
53. &:nth-child(6) {
54. background: #7AB893;
55. }
56. &:nth-child(5) {
57. background: #B2E3AF;
58. }
59.  
60. span {
61. position: relative;
62. display: inline-block;
63. margin: 30px 10px;
64. }
65. }
66. .basic-slide {
67. display: inline-block;
68. width: 215px;
69. padding: 10px 0 10px 15px;
70. font-family: "Open Sans", sans;
71. font-weight: 400;
72. color: #377D6A;
73. background: #efefef;
74. border: 0;
75. border-radius: 3px;
76. outline: 0;
77. text-indent: 70px; // Arbitrary.
78. transition: all .3s ease-in-out;
79.  
80. &::-webkit-input-placeholder {
81. color: #efefef;
82. text-indent: 0;
83. font-weight: 300;
84. }
85.  
86. + label {
87. display: inline-block;
88. position: absolute;
89. top: 0;
90. left: 0;
91. padding: 10px 15px;
92. text-shadow: 0 1px 0 rgba(19,74,70,.4);
93. background: #7AB893;
94. transition: all .3s ease-in-out;
95. border-top-left-radius: 3px;
96. border-bottom-left-radius: 3px;
97. }
98. }
99. .basic-slide:focus,
100. .basic-slide:active {
101. color: #377D6A;
102. text-indent: 0;
103. background: #fff;
104. border-top-left-radius: 0;
105. border-bottom-left-radius: 0;
106.  
107. &::-webkit-input-placeholder {
108. color: #aaa;
109. }
110. + label {
111. transform: translateX(-100%);
112. }
113. }
114. .clean-slide {
115. position: relative;
116. display: inline-block;
117. width: 215px;
118. padding: 10px 0 10px 15px;
119. font-family: "Open Sans", sans;
120. font-weight: 400;
121. color: #377D6A;
122. background: #efefef;
123. border: 0;
124. border-radius: 3px;
125. outline: 0;
126. text-indent: 60px; // Arbitrary.
127. transition: all .3s ease-in-out;
128.  
129. &::-webkit-input-placeholder {
130. color: #efefef;
131. text-indent: 0;
132. font-weight: 300;
133. }
134.  
135. + label {
136. display: inline-block;
137. position: absolute;
138. transform: translateX(0);
139. top: 0;
140. left: 0;
141. bottom: 0;
142. padding: 13px 15px;
143. font-size: 11px;
144. font-weight: 700;
145. text-transform: uppercase;
146. color: #032429;
147. text-align: left;
148. text-shadow: 0 1px 0 rgba(255,255,255,.4);
149. transition: all .3s ease-in-out, color .3s ease-out;
150. border-top-left-radius: 3px;
151. border-bottom-left-radius: 3px;
152. overflow: hidden;
153.  
154. &:after {
155. content: "";
156. position: absolute;
157. top: 0;
158. right: 100%;
159. bottom: 0;
160. width: 100%;
161. background: #7AB893;
162. z-index: -1;
163. transform: translate(0);
164. transition: all .3s ease-in-out;
165. border-top-left-radius: 3px;
166. border-bottom-left-radius: 3px;
167. }
168. }
169. }
170. .clean-slide:focus,
171. .clean-slide:active {
172. color: #377D6A;
173. text-indent: 0;
174. background: #fff;
175. border-top-left-radius: 0;
176. border-bottom-left-radius: 0;
177.  
178. &::-webkit-input-placeholder {
179. color: #aaa;
180. }
181. + label {
182. color: #fff;
183. text-shadow: 0 1px 0 rgba(19,74,70,.4);
184. transform: translateX(-100%);
185.  
186. &:after {
187. transform: translate(100%);
188. }
189. }
190. }
191. .gate {
192. display: inline-block;
193. width: 215px;
194. padding: 10px 0 10px 15px;
195. font-family: "Open Sans", sans;
196. font-weight: 400;
197. color: #377D6A;
198. background: #efefef;
199. border: 0;
200. border-radius: 3px;
201. outline: 0;
202. text-indent: 65px; // Arbitrary.
203. transition: all .3s ease-in-out;
204.  
205. &::-webkit-input-placeholder {
206. color: #efefef;
207. text-indent: 0;
208. font-weight: 300;
209. }
210.  
211. + label {
212. display: inline-block;
213. position: absolute;
214. top: 0;
215. left: 0;
216. padding: 10px 15px;
217. text-shadow: 0 1px 0 rgba(19,74,70,.4);
218. background: #7AB893;
219. transition: all .4s ease-in-out;
220. border-top-left-radius: 3px;
221. border-bottom-left-radius: 3px;
222. transform-origin: left bottom;
223. z-index: 99;
224.  
225. &:before,
226. &:after {
227. content: "";
228. position: absolute;
229. top: 0;
230. right: 0;
231. bottom: 0;
232. left: 0;
233. border-radius: 3px;
234. background: #377D6A;
235. transform-origin: left bottom;
236. transition: all .4s ease-in-out;
237. pointer-events: none;
238. z-index: -1;
239. }
240. &:before {
241. background: rgba(3,36,41,.2);
242. z-index: -2;
243. right: 20%;
244. }
245. }
246. }
247. span:nth-child(2) .gate {
248. text-indent: 85px;
249. }
250. span:nth-child(2) .gate:focus,
251. span:nth-child(2) .gate:active{
252. text-indent: 0;
253. }
254. .gate:focus,
255. .gate:active {
256. color: #377D6A;
257. text-indent: 0;
258. background: #fff;
259. border-top-right-radius: 3px;
260. border-bottom-right-radius: 3px;
261.  
262. &::-webkit-input-placeholder {
263. color: #aaa;
264. }
265. + label {
266. transform: rotate(-66deg);
267. border-radius: 3px;
268.  
269. &:before {
270. transform: rotate(10deg);
271. }
272. }
273. }
274. .skinny {
275. display: inline-block;
276. width: 215px;
277. padding: 10px 0 10px 15px;
278. font-family: "Open Sans", sans;
279. font-weight: 400;
280. color: #377D6A;
281. background: #efefef;
282. border: 0;
283. border-radius: 3px;
284. outline: 0;
285. text-indent: 75px; // Arbitrary.
286. transition: all .3s ease-in-out;
287.  
288. &::-webkit-input-placeholder {
289. color: #efefef;
290. text-indent: 0;
291. font-weight: 300;
292. }
293.  
294. + label {
295. display: inline-block;
296. position: absolute;
297. transform: translateX(0);
298. top: 0;
299. left: 0;
300. padding: 10px 15px;
301. text-shadow: 0 1px 0 rgba(19,74,70,.4);
302. transition: all .3s ease-in-out;
303. border-top-left-radius: 3px;
304. border-bottom-left-radius: 3px;
305. overflow: hidden;
306.  
307. &:before,
308. &:after {
309. content: "";
310. position: absolute;
311. right: 0;
312. left: 0;
313. z-index: -1;
314. transition: all .3s ease-in-out;
315. }
316. &:before {
317. // Skinny bit here
318. top: 5px;
319. bottom: 5px;
320. background: #377D6A; // change this to #134A46
321. border-top-left-radius: 3px;
322. border-bottom-left-radius: 3px;
323. }
324. &:after {
325. top: 0;
326. bottom: 0;
327. background: #377D6A;
328. }
329. }
330. }
331. .skinny:focus,
332. .skinny:active {
333. color: #377D6A;
334. text-indent: 0;
335. background: #fff;
336.  
337. &::-webkit-input-placeholder {
338. color: #aaa;
339. }
340. + label {
341. transform: translateX(-100%);
342.  
343. &:after {
344. transform: translateX(100%);
345. }
346. }
347. }
348. .slide-up {
349. display: inline-block;
350. width: 215px;
351. padding: 10px 0 10px 15px;
352. font-family: "Open Sans", sans;
353. font-weight: 400;
354. color: #377D6A;
355. background: #efefef;
356. border: 0;
357. border-radius: 3px;
358. outline: 0;
359. text-indent: 80px; // Arbitrary.
360. transition: all .3s ease-in-out;
361.  
362. &::-webkit-input-placeholder {
363. color: #efefef;
364. text-indent: 0;
365. font-weight: 300;
366. }
367.  
368. + label {
369. display: inline-block;
370. position: absolute;
371. transform: translateX(0);
372. top: 0;
373. left: 0;
374. padding: 10px 15px;
375. text-shadow: 0 1px 0 rgba(19,74,70,.4);
376. transition: all .3s ease-in-out;
377. border-top-left-radius: 3px;
378. border-bottom-left-radius: 3px;
379. overflow: hidden;
380.  
381. &:before,
382. &:after {
383. content: "";
384. position: absolute;
385. right: 0;
386. left: 0;
387. z-index: -1;
388. transition: all .3s ease-in-out;
389. }
390. &:before {
391. // Skinny bit here
392. top: 6px;
393. left: 5px;
394. right: 5px;
395. bottom: 6px;
396. background: #377D6A; // change this to #134A46
397. }
398. &:after {
399. top: 0;
400. bottom: 0;
401. background: #377D6A;
402. }
403. }
404. }
405. span:nth-child(1) .slide-up {
406. text-indent: 105px;
407. }
408. span:nth-child(3) .slide-up {
409. text-indent: 125px;
410. }
411. span:nth-child(1) .slide-up:focus,
412. span:nth-child(1) .slide-up:active,
413. span:nth-child(3) .slide-up:focus,
414. span:nth-child(3) .slide-up:active {
415. text-indent: 0;
416. }
417. .slide-up:focus,
418. .slide-up:active {
419. color: #377D6A;
420. text-indent: 0;
421. background: #fff;
422.  
423. &::-webkit-input-placeholder {
424. color: #aaa;
425. }
426. + label {
427. transform: translateY(-100%);
428.  
429. &:before {
430. border-radius: 5px;
431. }
432. &:after {
433. transform: translateY(100%);
434. }
435. }
436. }
437. .card-slide {
438. display: inline-block;
439. width: 215px;
440. padding: 10px 0 10px 15px;
441. font-family: "Open Sans", sans;
442. font-weight: 400;
443. color: #377D6A;
444. background: #efefef;
445. border: 0;
446. border-radius: 3px;
447. outline: 0;
448. text-indent: 115px; // Arbitrary.
449. transition: all .3s ease-in-out;
450.  
451. &::-webkit-input-placeholder {
452. color: #efefef;
453. text-indent: 0;
454. font-weight: 300;
455. }
456.  
457. + label {
458. display: block;
459. position: absolute;
460. top: 0;
461. left: 0;
462. padding: 10px 15px;
463. text-shadow: 0 1px 0 rgba(19,74,70,.4);
464. background: #7AB893;
465. transition: all .3s ease-in-out;
466. border-top-left-radius: 3px;
467. border-bottom-left-radius: 3px;
468. transform-origin: right center;
469. transform: perspective(300px) scaleX(1) rotateY(0deg);
470. }
471. }
472. span:nth-child(2) .card-slide {
473. text-indent: 55px;
474. }
475. span:nth-child(3) .card-slide {
476. text-indent: 150px;
477. }
478. span:nth-child(2) .card-slide:focus,
479. span:nth-child(2) .card-slide:active,
480. span:nth-child(3) .card-slide:focus,
481. span:nth-child(3) .card-slide:active {
482. text-indent: 0;
483. }
484. .card-slide:focus,
485. .card-slide:active {
486. color: #377D6A;
487. text-indent: 0;
488. background: #fff;
489. border-top-left-radius: 0;
490. border-bottom-left-radius: 0;
491.  
492. &::-webkit-input-placeholder {
493. color: #aaa;
494. }
495. + label {
496. transform: perspective(600px) translateX(-100%) rotateY(80deg);
497. }
498. }
499. .swing {
500. display: inline-block;
501. width: 215px;
502. padding: 10px 0 10px 15px;
503. font-family: "Open Sans", sans;
504. font-weight: 400;
505. color: #377D6A;
506. background: #efefef;
507. border: 0;
508. border-radius: 3px;
509. outline: 0;
510. text-indent: 60px; // Arbitrary.
511. transition: all .3s ease-in-out;
512.  
513. &::-webkit-input-placeholder {
514. color: #efefef;
515. text-indent: 0;
516. font-weight: 300;
517. }
518.  
519. + label {
520. display: inline-block;
521. position: absolute;
522. top: 0;
523. left: 0;
524. padding: 10px 15px;
525. text-shadow: 0 1px 0 rgba(19,74,70,.4);
526. background: #7AB893;
527. border-top-left-radius: 3px;
528. border-bottom-left-radius: 3px;
529. transform-origin: 2px 2px;
530. transform: rotate(0);
531. // There should be a better way
532. animation: swing-back .4s 1 ease-in-out;
533. }
534. }
535. @keyframes swing {
536. 0% {
537. transform: rotate(0);
538. }
539. 20% {
540. transform: rotate(116deg);
541. }
542. 40% {
543. transform: rotate(60deg);
544. }
545. 60% {
546. transform: rotate(98deg);
547. }
548. 80% {
549. transform: rotate(76deg);
550. }
551. 100% {
552. transform: rotate(82deg);
553. }
554. }
555. @keyframes swing-back {
556. 0% {
557. transform: rotate(82deg);
558. }
559. 100% {
560. transform: rotate(0);
561. }
562. }
563. .swing:focus,
564. .swing:active {
565. color: #377D6A;
566. text-indent: 0;
567. background: #fff;
568. border-top-left-radius: 0;
569. border-bottom-left-radius: 0;
570.  
571. &::-webkit-input-placeholder {
572. color: #aaa;
573. }
574. + label {
575. animation: swing 1.4s 1 ease-in-out;
576. transform: rotate(82deg);
577. }
578. }
579. .balloon {
580. // As suggested by https://twitter.com/dbox/status/365888496486985728
581. display: inline-block;
582. width: 215px;
583. padding: 10px 0 10px 15px;
584. font-family: "Open Sans", sans;
585. font-weight: 400;
586. color: #377D6A;
587. background: #efefef;
588. border: 0;
589. border-radius: 3px;
590. outline: 0;
591. text-indent: 60px; // Arbitrary.
592. transition: all .3s ease-in-out;
593.  
594. &::-webkit-input-placeholder {
595. color: #efefef;
596. text-indent: 0;
597. font-weight: 300;
598. }
599.  
600. + label {
601. display: inline-block;
602. position: absolute;
603. top: 8px;
604. left: 0;
605. bottom: 8px;
606. padding: 5px 15px;
607. color: #032429;
608. font-size: 11px;
609. font-weight: 700;
610. text-transform: uppercase;
611. text-shadow: 0 1px 0 rgba(19,74,70,0);
612. transition: all .3s ease-in-out;
613. border-radius: 3px;
614. background: rgba(122,184,147,0);
615.  
616. &:after {
617. position: absolute;
618. content: "";
619. width: 0;
620. height: 0;
621. top: 100%;
622. left: 50%;
623. margin-left: -3px;
624. border-left: 3px solid transparent;
625. border-right: 3px solid transparent;
626. border-top: 3px solid rgba(122,184,147,0);
627. transition: all .3s ease-in-out;
628. }
629. }
630. }
631. .balloon:focus,
632. .balloon:active {
633. color: #377D6A;
634. text-indent: 0;
635. background: #fff;
636.  
637. &::-webkit-input-placeholder {
638. color: #aaa;
639. }
640. + label {
641. color: #fff;
642. text-shadow: 0 1px 0 rgba(19,74,70,.4);
643. background: rgba(122,184,147,1);
644. transform: translateY(-40px);
645.  
646. &:after {
647. border-top: 4px solid rgba(122,184,147,1);
648. }
649. }
650. }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们