记录一下卷轴打开特效的代码实现
过程示例图片
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;
}
}