step1.css 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. .wrap {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. position: relative;
  6. /* 背景渐变色 */
  7. text-align: center;
  8. text-decoration: none;
  9. text-transform: uppercase;
  10. background-image: linear-gradient(to right, #134392, #132FBB, #5F38C1, #134392);
  11. /* 背景渐变色大小 */
  12. background-size: 300%;
  13. box-shadow: none;
  14. animation: light 10s infinite;
  15. animation-direction: alternate;
  16. }
  17. /* 下面设计 发光效果 */
  18. .wrap::before {
  19. content: '';
  20. position: absolute;
  21. top: -6px;
  22. bottom: -6px;
  23. left: -6px;
  24. right: -6px;
  25. border-radius: 60px;
  26. /* 背景渐变色 */
  27. background-image: linear-gradient(to right, rgba(48,114,229,0.15), rgba(48,114,229,0.15));
  28. /* 背景渐变色大小 */
  29. background-size: 300%;
  30. /* 元素的位置 底层或者顶层 -值表示底层 + 值表示顶层 */
  31. z-index: -1;
  32. /* 设置模糊度 显示发光效果 */
  33. filter: blur(20px);
  34. }
  35. @keyframes light {
  36. 100% {
  37. background-position: -100% 0;
  38. }
  39. }
  40. .section {
  41. height: 100%;
  42. z-index: 11;
  43. text-align: left;
  44. position: absolute;
  45. background: rgba(34, 34, 34, 0.6);
  46. border-radius: 36px 36px 36px 36px;
  47. backdrop-filter: blur(20px);
  48. -webkit-backdrop-filter: blur(20px);
  49. }
  50. .logo {
  51. width: 186px;
  52. height: 70px;
  53. margin-bottom: 20px;
  54. transition: all 0.3s;
  55. cursor: pointer;
  56. }
  57. .logo:hover {
  58. transform: scale(1.1);
  59. }
  60. .bottom {
  61. color: #5A487D;
  62. width: 110px;
  63. height: 32px;
  64. background: #FFFFFF;
  65. border-radius: 137px 137px 137px 137px;
  66. font-size: 14px;
  67. line-height: 32px;
  68. margin: 0 auto;
  69. margin-top: 20px;
  70. cursor: pointer;
  71. text-align: center;
  72. /*font-size: 400px;*/
  73. transition: all 0.3s;
  74. }
  75. .bottom:hover {
  76. box-shadow: 0 2px 25px rgba(0, 234, 250, 0.5);
  77. }
  78. .bottom .btn {
  79. display: block;
  80. width: 100%;
  81. height: 100%;
  82. font-weight: 600;
  83. }
  84. .more-text {
  85. background: linear-gradient(to right, #134392 0%, #363A8A 100%);
  86. -webkit-background-clip: text;
  87. color: transparent;
  88. }
  89. .agreement {
  90. height: 21px;
  91. margin: 6px 0 10px 0;
  92. }
  93. .agreements {
  94. color: #A8CDE7;
  95. }
  96. .solgen {
  97. position: absolute;
  98. width: 364px;
  99. height: 16px;
  100. bottom: 45px;
  101. left: 218px;
  102. }
  103. .radio-box {
  104. border: 1px solid #fff;
  105. border-radius: 50%;
  106. width: 14px;
  107. height: 14px;
  108. position: relative;
  109. margin-right: 10px;
  110. font-size: 14px;
  111. }
  112. .is-shock {
  113. animation: shock 0.5s infinite;
  114. }
  115. .agreement span {
  116. line-height: 14px;
  117. }
  118. .radio-box img {
  119. position: absolute;
  120. left: -1px;
  121. top: -1px;
  122. width: 16px;
  123. height: 16px;
  124. animation: show 0.3s;
  125. }
  126. @keyframes show {
  127. 0% {
  128. transform: scale(0);
  129. -moz-transform: scale(0);
  130. -webkit-transform: scale(0);
  131. }
  132. 100% {
  133. transform: scale(1);
  134. -moz-transform: scale(1);
  135. -webkit-transform: scale(1);
  136. }
  137. }
  138. @keyframes shock {
  139. 0% {
  140. margin-top: 0px;
  141. }
  142. 20% {
  143. margin-bottom: 10px;
  144. }
  145. 40% {
  146. margin-bottom: 0px;
  147. }
  148. 60% {
  149. margin-bottom: 8px;
  150. }
  151. 70% {
  152. margin-bottom: 0px;
  153. }
  154. 90% {
  155. margin-bottom: 4px;
  156. }
  157. 100% {
  158. margin-bottom: 0px;
  159. }
  160. }