HTML 笔记
marquee:跑马灯元素

<div class="page-plate-group page-plate-group-case">
<MARQUEE scrollAmount="3" scrollDelay="50" direction="right" width="100%" height="100" behavior="alternate">
<div class="page-plate-group-case-item-box" v-for="item in 31" :key="item">
<img class="page-plate-group-case-item" :src="`/img/case/group5_case_${item + 1}.jpg`" alt="" />
</div>
</MARQUEE>
<MARQUEE scrollAmount="3" scrollDelay="50" direction="left" width="100%" height="100" behavior="alternate">
<div class="page-plate-group-case-item-box" v-for="item in 31" :key="item">
<img class="page-plate-group-case-item" :src="`/img/case/group5_case_${item + 33}.jpg`" alt="" />
</div>
</MARQUEE>
<div class="page-plate-group-case-left"></div>
<div class="page-plate-group-case-right"></div>
</div>
CSS 遮罩层
.page-plate-group-case-left {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 230px;
height: 260px;
background: -webkit-gradient(
linear,
right top,
left top,
from(rgba(255, 255, 255, 0.3)),
color-stop(55%, #ffffff)
);
background: linear-gradient(270deg, rgba(255, 255, 255, 0.3) 0%, #ffffff 55%);
}
.page-plate-group-case-right {
position: absolute;
right: 0;
top: 0;
z-index: 2;
width: 230px;
height: 260px;
background: -webkit-gradient(
linear,
left top,
right top,
from(rgba(255, 255, 255, 0.3)),
color-stop(55%, #ffffff)
);
background: linear-gradient(-270deg, rgba(255, 255, 255, 0.3) 0%, #ffffff 55%);
border-radius: 0px 0px 0px 0px;
}