123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- .top {
- position: absolute;
- top:200rpx;
- left:50rpx;
- display: flex;
- flex-direction: column;
- }
- .YS-title {
- line-height: 80rpx;
- font-size: 70rpx;
- z-index: 99;
- }
- .YS-subtitle {
- line-height: 70rpx;
- font-size: 50rpx;
- z-index: 99;
- }
- .btn {
- line-height: 100rpx;
- border-radius: 100rpx;
- height: 100rpx;
- width: 90%;
- top: 1000rpx;
- left:5%;
- font-weight: bold;
- font-size: 36rpx;
- color: #FFFFFF !important;
- position: absolute;
- border: none !important;
- background: $gradient-color;
- box-shadow: $box-shadow;
- z-index: 99;
- }
- .ocean {
- margin-top: -600rpx;
- height: 2200rpx;
- background-color: $color-blue;
- &::before,
- &::after {
- content: "";
- position: absolute;
- width: 1600rpx;
- height: 1600rpx;
- top: 850rpx;
- left: 50%;
- border-radius: 43%;
- background-color: #FFFFFF;
- transform: translate(-50%, -70%) rotate(0);
- animation: rotate 6s linear infinite;
- z-index: 2;
- }
- &::after {
- border-radius: 40%;
- background-color: #FFFFFF;
- opacity: 0.5;
- transform: translate(-50%, -70%) rotate(0);
- animation: rotate 10s linear -5s infinite;
- z-index: 3;
- }
- }
- @keyframes rotate {
- 50% {
- transform: translate(-50%, -73%) rotate(180deg);
- }
- 100% {
- transform: translate(-50%, -70%) rotate(360deg);
- }
- }
|