cs-skin-elastic.css 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. div.cs-skin-elastic {
  2. background: transparent;
  3. font-size: 16px;
  4. font-weight: 700;
  5. color: #fff;
  6. }
  7. .cs-skin-elastic > span {
  8. background-color: #E9585B;
  9. border: 3px solid #E9585B;
  10. z-index: 100;
  11. }
  12. .cs-skin-elastic > span::after {
  13. font-family: 'FontAwesome';
  14. content: '\f078';
  15. -webkit-backface-visibility: hidden;
  16. backface-visibility: hidden;
  17. }
  18. .cs-skin-elastic .cs-options {
  19. overflow: visible;
  20. background: transparent;
  21. opacity: 1;
  22. visibility: visible;
  23. padding-bottom: 1.25em;
  24. pointer-events: none;
  25. }
  26. .cs-skin-elastic.cs-active .cs-options {
  27. pointer-events: auto;
  28. }
  29. .cs-skin-elastic .cs-options > ul::before {
  30. content: '';
  31. position: absolute;
  32. width: 100%;
  33. height: 100%;
  34. left: 0;
  35. top: 0;
  36. -webkit-transform: scale3d(1,0,1);
  37. transform: scale3d(1,0,1);
  38. background: #fff;
  39. -webkit-transform-origin: 50% 0%;
  40. transform-origin: 50% 0%;
  41. -webkit-transition: -webkit-transform 0.3s;
  42. transition: transform 0.3s;
  43. }
  44. .cs-skin-elastic.cs-active .cs-options > ul::before {
  45. -webkit-transform: scale3d(1,1,1);
  46. transform: scale3d(1,1,1);
  47. -webkit-transition: none;
  48. transition: none;
  49. -webkit-animation: expand 0.6s ease-out;
  50. animation: expand 0.6s ease-out;
  51. }
  52. .cs-skin-elastic .cs-options ul li {
  53. opacity: 0;
  54. -webkit-transform: translate3d(0,-25px,0);
  55. transform: translate3d(0,-25px,0);
  56. -webkit-transition: opacity 0.15s, -webkit-transform 0.15s;
  57. transition: opacity 0.15s, transform 0.15s;
  58. }
  59. .cs-skin-elastic.cs-active .cs-options ul li {
  60. -webkit-transform: translate3d(0,0,0);
  61. transform: translate3d(0,0,0);
  62. opacity: 1;
  63. -webkit-transition: none;
  64. transition: none;
  65. -webkit-animation: bounce 0.6s ease-out;
  66. animation: bounce 0.6s ease-out;
  67. }
  68. .cs-skin-elastic .cs-options span {
  69. padding: 0.8em 1em;
  70. text-align: center;
  71. color: #424242;
  72. }
  73. .cs-skin-elastic .cs-options span:hover,
  74. .cs-skin-elastic .cs-options li.cs-focus span,
  75. .cs-skin-elastic .cs-options .cs-selected span {
  76. color: #E9585B;
  77. }
  78. @-webkit-keyframes expand {
  79. 0% { -webkit-transform: scale3d(1,0,1); }
  80. 25% { -webkit-transform: scale3d(1,1.2,1); }
  81. 50% { -webkit-transform: scale3d(1,0.85,1); }
  82. 75% { -webkit-transform: scale3d(1,1.05,1) }
  83. 100% { -webkit-transform: scale3d(1,1,1); }
  84. }
  85. @keyframes expand {
  86. 0% { -webkit-transform: scale3d(1,0,1); transform: scale3d(1,0,1); }
  87. 25% { -webkit-transform: scale3d(1,1.2,1); transform: scale3d(1,1.2,1); }
  88. 50% { -webkit-transform: scale3d(1,0.85,1); transform: scale3d(1,0.85,1); }
  89. 75% { -webkit-transform: scale3d(1,1.05,1); transform: scale3d(1,1.05,1); }
  90. 100% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
  91. }
  92. @-webkit-keyframes bounce {
  93. 0% { -webkit-transform: translate3d(0,-25px,0); opacity:0; }
  94. 25% { -webkit-transform: translate3d(0,10px,0); }
  95. 50% { -webkit-transform: translate3d(0,-6px,0); }
  96. 75% { -webkit-transform: translate3d(0,2px,0); }
  97. 100% { -webkit-transform: translate3d(0,0,0); opacity: 1; }
  98. }
  99. @keyframes bounce {
  100. 0% { -webkit-transform: translate3d(0,-25px,0); transform: translate3d(0,-25px,0); opacity:0; }
  101. 25% { -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); }
  102. 50% { -webkit-transform: translate3d(0,-6px,0); transform: translate3d(0,-6px,0); }
  103. 75% { -webkit-transform: translate3d(0,2px,0); transform: translate3d(0,2px,0); }
  104. 100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; }
  105. }