css3动效之画卷拉开

			<view class="cont_box">
				<image src="https://img.doutuimao.net/dtmimg/bd1987344d081c2acb8c08e2f810dcf5" mode="widthFix"></image>
			</view>
			<view class="box_cons">
				<image  src="https://img.doutuimao.net/dtmimg/4e24acfe18e3ccb02e1371c01ff3844b" mode="widthFix"></image>
			</view>
                        .cont_box{
				width: 100%;
				height: 411rpx;
				margin-top: -60rpx;
				image{
					display: block;
					width: 100%;
				}
			}
                        .red_bar{
				display: block;
				width: 100%;
				position: absolute;
				top: 616rpx;
				left: 0;
				z-index: 3;
				animation: 2s moveBar linear forwards;
				animation-delay: .25s;
			}
			.box_cons{
				width: 100%;
				height: 574rpx;
				margin: 0 auto;
				animation: 2s showBox linear forwards;
				animation-delay: .25s;
				overflow: hidden;
				image{
					display: block;
					width: 100%;
				}
			}
                        	@keyframes moveBar {
			0% {
				transform: translateY(0);
			}
			80%{
				transform: translateY(638rpx);
			}
			85%{
				transform: translateY(570rpx);
			}
			95%{
				transform: translateY(638rpx);
			}
			97%{
				transform: translateY(600rpx);
			}

			100% {
				transform: translateY(638rpx);

			}
		}

		@keyframes showBox {
			0% {
				height: 0;
			}
			82%{
				height: 574rpx;
				
			}
			
			100% {
				height: 574rpx;
			}
		}