choose_actions.scss 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. .actions_bg {
  2. z-index: 10000;
  3. position: fixed;
  4. left: 0;
  5. top: 0;
  6. width: 100vw;
  7. height: 100vh;
  8. background-color: rgba($color: #000, $alpha: 0.9);
  9. display: flex;
  10. flex-direction: column;
  11. align-items: center;
  12. justify-content: flex-end;
  13. }
  14. .action_btn {
  15. width: 698px;
  16. height: 128px;
  17. border-radius: 64px;
  18. background-color: #fff;
  19. color: #000;
  20. margin-top: 26px;
  21. display: flex;
  22. flex-direction: row;
  23. align-items: center;
  24. justify-content: center;
  25. position: relative;
  26. }
  27. .cardShowAni {
  28. animation: showAni 0.2s linear forwards;
  29. }
  30. .btnAni{
  31. opacity: 0;
  32. animation: showAni2 0.2s 0.5s linear forwards;
  33. }
  34. @keyframes showAni {
  35. 0% {
  36. opacity: 0;
  37. transform: translateY(300px);
  38. }
  39. 100% {
  40. opacity: 1;
  41. transform: translateY(0px);
  42. }
  43. }
  44. @keyframes showAni2 {
  45. 0% {
  46. opacity: 0;
  47. // transform: translateY(300px);
  48. }
  49. 100% {
  50. opacity: 1;
  51. // transform: translateY(0px);
  52. }
  53. }