1、html
<ul class="right_panelUp">
<li v-for="item in gtData">
<span>{{item}}</span>
<p class="line_one"></p>
<p class="line_two"></p>
</li>
</ul>
2、css样式
.right_panelUp{
width:100%;
height:28%;
box-sizing: border-box;
border-radius: 5px;
background: #576465;
display: flex;
flex-direction: row;
justify-content: flex-start;
overflow: hidden;
&:hover li{
animation-play-state: paused !important;
}
>li{
width:32%;
height:100%;
background: url(../../../assets/images/tower_jc.png) no-repeat;
background-size: 119px 150px;
background-position: 0 55%;
position: relative;
flex-shrink: 0;
-webkit-animation: move 40s infinite ease ;
-webkit-transform-origin: move center;
-ms-transform-origin: move center;
transform-origin: move center;
.line_one{
width: 297px;
height: 37px;
background: url(../../../assets/images/line_one.png);
position: absolute;
background-repeat: no-repeat;
background-size: 100% 100%;
left: 10px;
bottom: 60px;
}
.line_two{
width: 297px;
height: 37px;
background: url(../../../assets/images/line_two.png);
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
left: 116px;
top: 60px;
}
span{
color:#fff;
font-size: 14px;
position: absolute;
bottom:10px;
left:45px;
}
}
}