style.css 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. .mint-palette-button{
  2. display:inline-block;
  3. position:relative;
  4. border-radius:50%;
  5. width: 56px;
  6. height:56px;
  7. line-height:56px;
  8. text-align:center;
  9. -webkit-transition:-webkit-transform .1s ease-in-out;
  10. transition:-webkit-transform .1s ease-in-out;
  11. transition:transform .1s ease-in-out;
  12. transition:transform .1s ease-in-out, -webkit-transform .1s ease-in-out;
  13. }
  14. .mint-main-button{
  15. position:absolute;
  16. top:0;
  17. left:0;
  18. width:100%;
  19. height:100%;
  20. border-radius:50%;
  21. background-color:blue;
  22. font-size:2em;
  23. }
  24. .mint-palette-button-active{
  25. -webkit-animation: mint-zoom 0.5s ease-in-out;
  26. animation: mint-zoom 0.5s ease-in-out;
  27. }
  28. .mint-sub-button-container>*{
  29. position:absolute;
  30. top:15px;
  31. left:15px;
  32. width:25px;
  33. height:25px;
  34. -webkit-transition:-webkit-transform .3s ease-in-out;
  35. transition:-webkit-transform .3s ease-in-out;
  36. transition:transform .3s ease-in-out;
  37. transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
  38. }
  39. @-webkit-keyframes mint-zoom{
  40. 0% {-webkit-transform:scale(1);transform:scale(1)
  41. }
  42. 10% {-webkit-transform:scale(1.1);transform:scale(1.1)
  43. }
  44. 30% {-webkit-transform:scale(0.9);transform:scale(0.9)
  45. }
  46. 50% {-webkit-transform:scale(1.05);transform:scale(1.05)
  47. }
  48. 70% {-webkit-transform:scale(0.95);transform:scale(0.95)
  49. }
  50. 90% {-webkit-transform:scale(1.01);transform:scale(1.01)
  51. }
  52. 100% {-webkit-transform:scale(1);transform:scale(1)
  53. }
  54. }
  55. @keyframes mint-zoom{
  56. 0% {-webkit-transform:scale(1);transform:scale(1)
  57. }
  58. 10% {-webkit-transform:scale(1.1);transform:scale(1.1)
  59. }
  60. 30% {-webkit-transform:scale(0.9);transform:scale(0.9)
  61. }
  62. 50% {-webkit-transform:scale(1.05);transform:scale(1.05)
  63. }
  64. 70% {-webkit-transform:scale(0.95);transform:scale(0.95)
  65. }
  66. 90% {-webkit-transform:scale(1.01);transform:scale(1.01)
  67. }
  68. 100% {-webkit-transform:scale(1);transform:scale(1)
  69. }
  70. }