startup_pages.scss 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. .top {
  2. position: absolute;
  3. top:200rpx;
  4. left:50rpx;
  5. display: flex;
  6. flex-direction: column;
  7. }
  8. .YS-title {
  9. line-height: 80rpx;
  10. font-size: 70rpx;
  11. z-index: 99;
  12. }
  13. .YS-subtitle {
  14. line-height: 70rpx;
  15. font-size: 50rpx;
  16. z-index: 99;
  17. }
  18. .btn {
  19. line-height: 100rpx;
  20. border-radius: 100rpx;
  21. height: 100rpx;
  22. width: 90%;
  23. top: 1000rpx;
  24. left:5%;
  25. font-weight: bold;
  26. font-size: 36rpx;
  27. color: #FFFFFF !important;
  28. position: absolute;
  29. border: none !important;
  30. background: $gradient-color;
  31. box-shadow: $box-shadow;
  32. z-index: 99;
  33. }
  34. .ocean {
  35. margin-top: -600rpx;
  36. height: 2200rpx;
  37. background-color: $color-blue;
  38. &::before,
  39. &::after {
  40. content: "";
  41. position: absolute;
  42. width: 1600rpx;
  43. height: 1600rpx;
  44. top: 850rpx;
  45. left: 50%;
  46. border-radius: 43%;
  47. background-color: #FFFFFF;
  48. transform: translate(-50%, -70%) rotate(0);
  49. animation: rotate 6s linear infinite;
  50. z-index: 2;
  51. }
  52. &::after {
  53. border-radius: 40%;
  54. background-color: #FFFFFF;
  55. opacity: 0.5;
  56. transform: translate(-50%, -70%) rotate(0);
  57. animation: rotate 10s linear -5s infinite;
  58. z-index: 3;
  59. }
  60. }
  61. @keyframes rotate {
  62. 50% {
  63. transform: translate(-50%, -73%) rotate(180deg);
  64. }
  65. 100% {
  66. transform: translate(-50%, -70%) rotate(360deg);
  67. }
  68. }