<div class="target-top" style="overflow: hidden"> <div class="target-img"> <div v-for="item in targetFors" :key="item.id"> ...//内容不重要 </div> </div> <div class="target-img img-right"> <div v-for="item in targetFors" :key="item.id"> ...//内容不重要 </div> </div> </div>
.target-top { position: relative; overflow: hidden; display: inline-flex; } .img-right { position: relative; left: 10px; // 这里的间距可以根据你想要的宽度自行调整 } .target-img { width: 100%; height: 400px; // display: flex; display: inline-flex; justify-content: space-between; animation: marquee 30s linear infinite; //这里做了一个鼠标移入盒子放大的效果 > div:hover { transition: all 0.6s; transform: scale(1.1); } > div { width: 527px; height: 310px; /*background: #ffffff; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.2); border-radius: 12px 12px 12px 12px; opacity: 1; margin-right: 100px; margin-top: 40px;*/ //无关的属性 flex-shrink: 0;// 禁止缩放盒子 } } //定义动画效果开始的位置以及消失的位置 @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } //实现鼠标移入放大的效果 .target-top:hover .target-img { animation-play-state: paused; }
代码照抄上去就能实现效果
标签:flex,12px,img,动画,100%,跑马灯,0px,css,target From: https://www.cnblogs.com/majiayin/p/18143121