You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. /**
  2. * 按钮的点击动画效果,2018年1月12日09:36:48
  3. **/
  4. .click {
  5. -webkit-transition: -webkit-box-shadow .8s;
  6. transition: box-shadow .8s;
  7. }
  8. .click {
  9. -webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
  10. transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
  11. -webkit-animation: gelatine 0.5s;
  12. animation: gelatine 1s;
  13. animation-iteration-count: infinite;
  14. /* -webkit-box-shadow: 0 0 0 2px #cff09e, 0 0 0 4px #ff0364;
  15. box-shadow: 0 0 0 2px #cff09e, 0 0 0 4px #ff0364;
  16. -webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
  17. transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
  18. -webkit-animation: gelatine 0.5s 1;
  19. animation: gelatine 0.5s 1; */
  20. }
  21. .click {
  22. -webkit-transition-duration: 0;
  23. transition-duration: 0;
  24. }
  25. /**
  26. * $keyframes \ gelatine
  27. **/
  28. @keyframes gelatine {
  29. from,
  30. to {
  31. -webkit-transform: scale(1);
  32. transform: scale(1);
  33. }
  34. 25% {
  35. -webkit-transform: scale(0.5);
  36. transform: scale(0.8);
  37. }
  38. 50% {
  39. -webkit-transform: scale(1.5);
  40. transform: scale(1.2);
  41. }
  42. 75% {
  43. -webkit-transform: scale(0.95);
  44. transform: scale(0.95);
  45. }
  46. from,
  47. to {
  48. -webkit-transform: scale(1);
  49. transform: scale(1);
  50. }
  51. 25% {
  52. -webkit-transform: scale(0.8);
  53. transform: scale(0.8);
  54. }
  55. 50% {
  56. -webkit-transform: scale(1);
  57. transform: scale(1);
  58. }
  59. 75% {
  60. -webkit-transform: scale(0.8);
  61. transform: scale(0.8);
  62. }
  63. }
  64. @-webkit-keyframes gelatine {
  65. from,
  66. to {
  67. -webkit-transform: scale(1);
  68. transform: scale(1);
  69. }
  70. 25% {
  71. -webkit-transform: scale(0.5);
  72. transform: scale(0.8);
  73. }
  74. 50% {
  75. -webkit-transform: scale(1.5);
  76. transform: scale(1.2);
  77. }
  78. 75% {
  79. -webkit-transform: scale(0.95);
  80. transform: scale(0.95);
  81. }
  82. from,
  83. to {
  84. -webkit-transform: scale(1);
  85. transform: scale(1);
  86. }
  87. 25% {
  88. -webkit-transform: scale(0.8);
  89. transform: scale(0.8);
  90. }
  91. 50% {
  92. -webkit-transform: scale(1);
  93. transform: scale(1);
  94. }
  95. 75% {
  96. -webkit-transform: scale(0.8);
  97. transform: scale(0.8);
  98. }
  99. }