简单的输入框焦点动画效果

核心属性

::placeholder 改变输入框中占位文字的样式

:focus + width + color + text-align 鼠标点击输入框后改变它和占位文字的样式

text-indent: -9999px 隐藏按钮中的文字

:focus + display + background-size 鼠标点击输入框后出现右边的图标按钮

1. <div class="wrapper">

2. <div class="middle">

3. <input type="email" value="" name="EMAIL" class="email-field" id="email-field" placeholder="输入文字">

4. <input type="submit" value="Subscribe" name="subscribe" id="subscribe-button" class="">

5. </div>

6. </div>

1. body {

2. color: #efaa9d;

3. background-color: #f05133;

4. text-align: center;

5. }

6. ::placeholder {

7. color: #f4f2ca;

8. opacity: .8;

9. }

10. .email-field {

11. display: inline-block;

12. width: 80px;

13. padding: .9em 1.8em;

14. color: #f4f2ca;

15. background-color: #d8492e;

16. border: none;

17. border-radius: 4px;

18. outline: none;

19. cursor: pointer;

20. text-align: center;

21. transition: all .1s linear;

22. }

23. .email-field:hover {

24. background-color: #d0432a;

25. }

26. .email-field:focus {

27. width: 200px;

28. color: #efaa9d;

29. outline: none;

30. text-align: left;

31. cursor: inherit;

32. }

33. #subscribe-button {

34. display: none;

35. width: 35px;

36. height: 35px;

37. border: none;

38. background: url(https://pics.codecolor.cn/morphing-input/arrow-circle-on-right.svg) no-repeat;

39. background-size: 13px;

40. background-position: 0 1px;

41. text-indent: -9999px;

42. opacity: .25;

43. cursor: pointer;

44. transition: all .2s linear;

45. }

46. #subscribe-button:hover {

47. opacity: .33;

48. }

49. .email-field:focus + #subscribe-button {

50. display: inline-block;

51. background-size: 33px;

52. }