page { height: 100%; background: #fff; -webkit-overflow-scrolling: touch; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } .poster { background: #fffbec; padding-top: 90rpx; height: 946rpx; position: relative; width: 100%; overflow: hidden; } .posterimg { height: 855rpx; display: block; position: relative; float: left; } .full .posterimg { overflow: auto; } .poster .check { width: 150rpx; height: 150rpx; position: absolute; left: 50%; margin-left: -75rpx; top: 50%; margin-top: -75rpx; } .posterimg image { width: 480rpx; height: 100%; display: block; margin: auto; } .posterimg .image { border-radius: 10rpx; box-shadow: 0 0 10px rgba(0,0,0,0.3); background: #fff; } .loading { background: #fff; width: 484rpx; height: 100%; border-radius: 10rpx; box-shadow: 0 0 10px rgba(0,0,0,0.3); display: block; margin: auto; } .savepic { width: 306rpx; height: 86rpx; line-height: 86rpx; background: #ff5555; border-radius: 40rpx; text-align: center; color: #fff; position: absolute; top: -113rpx; left: 50%; margin-left: -153rpx; margin-bottom: -43rpx; font-size: 30rpx; } .tips { margin-top: 70rpx; font-size: 26rpx; color: #999; text-align: center; position: relative; } .poster_box { transition: margin-left 1s; } .poster.full { height: 100%; overflow-y: scroll; padding-top: 0; } .pre,.next { position: absolute; top: 50%; } .pre text,.next text { font-size: 60rpx; color: #fff; text-shadow: 2px 3px 3px rgba(0,0,0,0.2); } .pre { left: 0; position: absolute; z-index: 999; animation: pre 1.5s infinite ease-in-out; } .next { right: 0; position: absolute; z-index: 999; animation: next 1.5s infinite ease-in-out; } @-webkit-keyframes next { 0%,30% { opacity: 0.8; transform: translate(-8px,0px); } 60% { opacity: 0.8; transform: translate(0px,0); } 100% { opacity: 0.8; transform: translate(-8px,0px); } } @keyframes next { 0%,30% { opacity: 0.8; transform: translate(-8px,0px); } 60% { opacity: 0.8; transform: translate(0px,0); } 100% { opacity: 0.8; transform: translate(-8px,0px); } } @-webkit-keyframes pre { 0%,30% { opacity: 0.8; transform: translate(8px,0px); } 60% { opacity: 0.8; transform: translate(0px,0); } 100% { opacity: 0.8; transform: translate(8px,0px); } } @keyframes pre { 0%,30% { opacity: 0.8; transform: translate(8px,0px); } 60% { opacity: 0.8; transform: translate(0px,0); } 100% { opacity: 0.8; transform: translate(8px,0px); } } .ani { position: absolute; } .txt { position: absolute; } .pos_bot { position: fixed; height: 100rpx; width: 100%; background: rgba(255,255,255,0.8); bottom: 0; left: 0; line-height: 100rpx; padding: 0 0 0 15rpx; font-size: 26rpx; color: #999; } .pos_bot .icox { margin-right: 10rpx; } .pos_bot .btn-danger-o { border-radius: 50rpx; color: #ff5555; border: 1px solid #ff5555; height: 52rpx; float: right; margin-top: 24rpx; } .pos_bot .btn-danger { border-radius: 50rpx; background-color: #ff5555; border-color: #ff5555; height: 52rpx; float: right; margin: 24rpx 25rpx 0 12rpx; } .loading { width: 484rpx; height: 100%; border-radius: 10rpx; box-shadow: 0 0 10px rgba(0,0,0,0.4); position: relative; } .full .loading { box-shadow: none; background: #fffbec; } .sk-three-bounce { position: absolute; top: 50%; left: 50%; width: 160rpx; margin-left: -80rpx; text-align: center; } .sk-three-bounce .sk-child { width: 20px; height: 20px; background-color: #333; border-radius: 100%; display: inline-block; animation: sk-three-bounce 1.1s ease-in-out 0s infinite both; } .sk-three-bounce .sk-bounce1 { background: rgba(68,171,247,0.2); animation-delay: -0.32s; } .sk-three-bounce .sk-bounce2 { background: rgba(68,171,247,0.2); animation-delay: -0.16s; } .sk-three-bounce .sk-bounce3 { background: rgba(68,171,247,0.2); } @-webkit-keyframes sk-three-bounce { 0%,80%,100% { transform: scale(0); background: rgba(68,171,247,0.2); } 40% { transform: scale(1); background: rgba(68,171,247,1); } } @keyframes sk-three-bounce { 0%,80%,100% { transform: scale(0); background: rgba(68,171,247,0.2); } 40% { transform: scale(1); background: rgba(68,171,247,1); } }