123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180 |
- .wrap {
- display: flex;
- justify-content: center;
- align-items: center;
- position: relative;
- /* 背景渐变色 */
- text-align: center;
- text-decoration: none;
- text-transform: uppercase;
- background-image: linear-gradient(to right, #134392, #132FBB, #5F38C1, #134392);
- /* 背景渐变色大小 */
- background-size: 300%;
- box-shadow: none;
- animation: light 10s infinite;
- animation-direction: alternate;
- }
- /* 下面设计 发光效果 */
- .wrap::before {
- content: '';
- position: absolute;
- top: -6px;
- bottom: -6px;
- left: -6px;
- right: -6px;
- border-radius: 60px;
- /* 背景渐变色 */
- background-image: linear-gradient(to right, rgba(48,114,229,0.15), rgba(48,114,229,0.15));
- /* 背景渐变色大小 */
- background-size: 300%;
- /* 元素的位置 底层或者顶层 -值表示底层 + 值表示顶层 */
- z-index: -1;
- /* 设置模糊度 显示发光效果 */
- filter: blur(20px);
- }
- @keyframes light {
- 100% {
- background-position: -100% 0;
- }
- }
- .section {
- height: 100%;
- z-index: 11;
- text-align: left;
- position: absolute;
- background: rgba(34, 34, 34, 0.6);
- border-radius: 36px 36px 36px 36px;
- backdrop-filter: blur(20px);
- -webkit-backdrop-filter: blur(20px);
- }
- .logo {
- width: 186px;
- height: 70px;
- margin-bottom: 20px;
- transition: all 0.3s;
- cursor: pointer;
- }
- .logo:hover {
- transform: scale(1.1);
- }
- .bottom {
- color: #5A487D;
- width: 110px;
- height: 32px;
- background: #FFFFFF;
- border-radius: 137px 137px 137px 137px;
- font-size: 14px;
- line-height: 32px;
- margin: 0 auto;
- margin-top: 20px;
- cursor: pointer;
- text-align: center;
- /*font-size: 400px;*/
- transition: all 0.3s;
- }
- .bottom:hover {
- box-shadow: 0 2px 25px rgba(0, 234, 250, 0.5);
- }
- .bottom .btn {
- display: block;
- width: 100%;
- height: 100%;
- font-weight: 600;
- }
- .more-text {
- background: linear-gradient(to right, #134392 0%, #363A8A 100%);
- -webkit-background-clip: text;
- color: transparent;
- }
- .agreement {
- height: 21px;
- margin: 6px 0 10px 0;
- }
- .agreements {
- color: #A8CDE7;
- }
- .solgen {
- position: absolute;
- width: 364px;
- height: 16px;
- bottom: 45px;
- left: 218px;
- }
- .radio-box {
- border: 1px solid #fff;
- border-radius: 50%;
- width: 14px;
- height: 14px;
- position: relative;
- margin-right: 10px;
- font-size: 14px;
- }
- .is-shock {
- animation: shock 0.5s infinite;
- }
- .agreement span {
- line-height: 14px;
- }
- .radio-box img {
- position: absolute;
- left: -1px;
- top: -1px;
- width: 16px;
- height: 16px;
- animation: show 0.3s;
- }
- @keyframes show {
- 0% {
- transform: scale(0);
- -moz-transform: scale(0);
- -webkit-transform: scale(0);
- }
- 100% {
- transform: scale(1);
- -moz-transform: scale(1);
- -webkit-transform: scale(1);
- }
- }
- @keyframes shock {
- 0% {
- margin-top: 0px;
- }
- 20% {
- margin-bottom: 10px;
- }
- 40% {
- margin-bottom: 0px;
- }
- 60% {
- margin-bottom: 8px;
- }
- 70% {
- margin-bottom: 0px;
- }
- 90% {
- margin-bottom: 4px;
- }
- 100% {
- margin-bottom: 0px;
- }
- }
|