@charset "UTF-8"; /** * 下方引入的为uView UI的集成样式文件,为scss预处理器,其中包含了一些"u-"开头的自定义变量 * uView自定义的css类名和scss变量,均以"u-"开头,不会造成冲突,请放心使用 */ page { background-color: #f4f6f8; } .home { position: relative; } .home .userinfo { display: flex; flex-direction: column; align-items: center; padding: 30rpx 0; z-index: 100; } .home .userinfo .u-skeleton-fillet { color: #ffffff; width: 100vw; text-align: center; } .home .corrugated { bottom: -2rpx; left: 0; position: absolute; width: 100%; height: 50%; overflow: hidden; z-index: 0; } .home .corrugated .wave-item { position: absolute; width: 200%; left: 0; background-repeat: repeat no-repeat; background-position: 0 bottom; -webkit-transform-origin: center bottom; transform-origin: center bottom; } .home .corrugated .wave-top { opacity: 0.5; -webkit-animation: wave-animation 3s; animation: wave-animation 3s; -webkit-animation-delay: 1s; animation-delay: 1s; background-size: 50% 60rpx; z-index: 15; } .home .corrugated .wave-middle { opacity: 0.75; -webkit-animation: wavemove 10s linear infinite; animation: wavemove 10s linear infinite; background-size: 50% 80rpx; z-index: 10; } .home .corrugated .wave-bottom { -webkit-animation: wavemove 15s linear infinite; animation: wavemove 15s linear infinite; background-size: 50% 45rpx; z-index: 5; } @-webkit-keyframes wavemove { 0% { -webkit-transform: translateX(0) translateZ(0) scaleY(1); transform: translateX(0) translateZ(0) scaleY(1); } 50% { -webkit-transform: translateX(-25%) translateZ(0) scaleY(0.55); transform: translateX(-25%) translateZ(0) scaleY(0.55); } 100% { -webkit-transform: translateX(-50%) translateZ(0) scaleY(1); transform: translateX(-50%) translateZ(0) scaleY(1); } } @keyframes wavemove { 0% { -webkit-transform: translateX(0) translateZ(0) scaleY(1); transform: translateX(0) translateZ(0) scaleY(1); } 50% { -webkit-transform: translateX(-25%) translateZ(0) scaleY(0.55); transform: translateX(-25%) translateZ(0) scaleY(0.55); } 100% { -webkit-transform: translateX(-50%) translateZ(0) scaleY(1); transform: translateX(-50%) translateZ(0) scaleY(1); } }