css卷轴打开特效

记录一下卷轴打开特效的代码实现

过程示例图片

html:

<!-- 卷轴 -->
	<div class="ScrollBox">
		<div class="listBox">
			<div>
				<h5><text>2022</text>国考申论大纲改革核心知识</h5>
			</div>
			<div>
				<h5>国考申论<tex>--</tex>大作文积累</h5>
			</div>
			<div>
				<h5><text>2022</text>国考公安基础知识精华</h5>
			</div>
			<div>
				<h5><text>2022</text>国考常识判断 <text>3000题</text></h5>
			</div>
			<div>
				<h5>常识知识点汇总</h5>
			</div>
			<div>
				<h5><text>2022</text>国考行测考点一点通</h5>
			</div>
		</div>
	</div>

scss:

	body {
	  width: 100vw;
	  height: 100vh;
	  display: flex;
	  align-items: center;
	  padding: 40px;
	}
	
	//卷轴
	.ScrollBox {
	  width: 90vw;
	  height: 55vh;
	  // background: green;
	  background-image: url(../../static/makeAnAppointment/redbdg.png);
	  background-size: 100% 100%;
	  position: relative;
	  top: 480rpx;
	  left: 2.5vw;
	  max-width: 40px;
	  animation: ani 3s linear both;
	  
	  //前后卷轴
	  &::before,
	  &::after {
	    content: '';
	    position: absolute;
	    width: 20px;
	    height: 60vh;
	    // background: orange;
	    top: 50%;
	    left: 0;
	    transform: translateY(-50%);
		background-image: url(../../static/makeAnAppointment/zhuzi.png);
		background-size: 100% 100%;
	  }
	  //后卷轴
	  &::after {
	    // background: #f36;
	    transform: translate(20px, -50%);
	    animation: ani2 3s linear both;
	  }
	}
	
	//div动画
	@keyframes ani {
	  to {
	    max-width: 90vw;
	  }
	}
	//后卷轴动画
	@keyframes ani2 {
	  to {
	    transform: translate(90vw, -50%);
	  }
	}
	
	//卷轴内内容区域
	.listBox {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 20px;
		box-sizing: border-box;
		opacity: 0;
		animation: ani3 3s ease-in both;
	}
	.listBox div {
			width: 10vw;
			height: 50vh;
			background: url(../../static/makeAnAppointment/list.png);
			background-size: 100% 100%;
			margin-left: 20px;
			padding-top: 100rpx;
			box-sizing: border-box;
			
		}
	.listBox div h5 {
		width: 14px;
		margin: 0 auto;
		line-height: 13px;  
		font-size: 12px;
		font-weight: 500;
		//文字换行
		word-wrap: break-word;
		letter-spacing: 0;
	}
	.listBox div h5 text {
		//数字纵向排列
		writing-mode: vertical-rl;
	}
	
	//内容区域渐显动画
	@keyframes ani3 {
	  0% {
	    opacity: 0;
	  }
	  70% {
	    opacity: 0;
	  }
	  100% {
	    opacity: 1;
	  }
	}