/*底部下方波浪*/ .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(../../images/wave_05.svg); mask: url(../../images/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(../../images/wave_04.svg); mask: url(../../images/wave_04.svg); animation-delay: -2s; animation-duration: 5s; } #waveHorizontal3 { -webkit-mask: url(../../images/wave_05.svg); mask: url(../../images/wave_05.svg); animation-delay: -1s; animation-duration: 3s; }