/*底部下方波浪*/ .wavehorizontals { width: 100%; height: 20px; position: relative; overflow: hidden; z-index: 1; background-color: #fff } .dark-open .wavehorizontals { width: 100%; height: 20px; position: relative; overflow: hidden; z-index: 1; background-color: #293042 !important } #wavehorizontal1 { -webkit-mask: url(/uploads/image/wwtvaimages/wave_05.svg); mask: url(/uploads/image/wwtvaimages/wave_05.svg); animation-delay: -2s; animation-duration: 12s; } .dark-open #wavehorizontal1 { background-color: #f1f1f1!important; } .dark-open #wavehorizontal2 { background-color: #f1f1f1!important; } .dark-open #wavehorizontal3 { background-color: #f1f1f1!important; } .wavehorizontal { width: 200%; height: 100%; display: block; position: absolute; left: 0; bottom: 0; background-repeat: repeat-x; background-position: left bottom; background-size: 350px 100%; transform-origin: 0 100% 0; animation-name: move; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes move { 0% { transform: translate(-175px, 0px) scale(1, 1) } 50% { transform: translate(-87px, 0px) scale(1, 0.5) } 100% { transform: translate(0px, 0px) scale(1, 1) } } #wavehorizontal2 { -webkit-mask: url(/uploads/image/wwtvaimages/wave_04.svg); mask: url(/uploads/image/wwtvaimages/wave_04.svg); animation-delay: -2s; animation-duration: 5s; } #wavehorizontal3 { -webkit-mask: url(/uploads/image/wwtvaimages/wave_05.svg); mask: url(/uploads/image/wwtvaimages/wave_05.svg); animation-delay: -1s; animation-duration: 3s; }