效果
<div class="box1980_outer cooperative_outer">
<div class="box1980 cooperative">
<h2 class="subhead">合作伙伴</h2>
<div class="cooperative_inside_ball">
<div class="cooperative_ul_outer cl cooperative_scroll" ref="cooperative_scroll">
<ul v-for="(i,index) in 2" :class="'cooperative_inside_ul'+i" :key="index">
<li class="partner_ball" @mouseover="partner_ball_mouseover($event)" @mouseout="partner_ball_mouseout($event)" v-for="(item,index) in partner_ball_data" :key="index" :style="'width:'+item.size+'px;height:'+item.size+'px;left:'+item.left+'px;top:'+item.top+'px;'"> <img class="img100" :src="item.img" alt="" /></li>
</ul>
</div>
</div>
</div>
</div>
partner_ball_data:[
{size:120,left:15,top:171,img:'https://images.36w.cn/officialWebImagse/icon_meituan1@3x.png'},
{size:120,left:215,top:126,img:'https://images.36w.cn/officialWebImagse/icon_pinduoduo2@3x.png'},
{size:95,left:486,top:142,img:'https://images.36w.cn/officialWebImagse/icon_alibaba5@3x.png'},
{size:67,left:751,top:136,img:'https://images.36w.cn/officialWebImagse/icon_ticai8@3x.png'},
{size:90,left:971,top:119,img:'https://images.36w.cn/officialWebImagse/icon_mengniu11@3x.png'},
{size:119,left:1231,top:136,img:'https://images.36w.cn/officialWebImagse/icon_tesila14@3x.png'},
{size:97,left:1471,top:108,img:'https://images.36w.cn/officialWebImagse/icon_boe17@3x.png'},
{size:119,left:1747,top:134,img:'https://images.36w.cn/officialWebImagse/icon_zhongxinshudian20@3x.png'},
{size:84,left:25,top:379,img:'https://images.36w.cn/officialWebImagse/icon_bank3@3x.png'},
{size:99,left:190,top:322,img:'https://images.36w.cn/officialWebImagse/icon_xinhuabaoxian4@3x.png'},
{size:89,left:385,top:245,img:'https://images.36w.cn/officialWebImagse/icon_baidu6@3x.png'},
{size:115,left:623,top:274,img:'https://images.36w.cn/officialWebImagse/icon_haier9@3x.png'},
{size:99,left:864,top:205,img:'https://images.36w.cn/officialWebImagse/icon_geli12@3x.png'},
{size:123,left:1073,top:291,img:'https://images.36w.cn/officialWebImagse/icon_jingdong15@3x.png'},
{size:90,left:1418,top:286,img:'https://images.36w.cn/officialWebImagse/icon_tantan18@3x.png'},
{size:101,left:1592,top:220,img:'https://images.36w.cn/officialWebImagse/icon_changba21@3x.png'},
{size:119,left:310,top:417,img:'https://images.36w.cn/officialWebImagse/icon_didi7@3x.png'},
{size:88,left:483,top:395,img:'https://images.36w.cn/officialWebImagse/icon_kuaishou10@3x.png'},
{size:98,left:753,top:439,img:'https://images.36w.cn/officialWebImagse/icon_shaoniandedao13@3x.png'},
{size:96,left:914,top:369,img:'https://images.36w.cn/officialWebImagse/icon_yixin16@3x.png'},
{size:119,left:1274,top:374,img:'https://images.36w.cn/officialWebImagse/icon_keep19@3x.png'},
{size:123,left:1574,top:370,img:'https://images.36w.cn/officialWebImagse/icon_ximalaya22@3x.png'},
{size:116,left:1736,top:353,img:'https://images.36w.cn/officialWebImagse/icon_haluochuxing23@3x.png'}, ]
methods:{
solutionMenuClick(a){
this.solutionCount = a
},
partner_ball_mouseover(){
this.$refs.cooperative_scroll.style.animationPlayState="paused"
},
partner_ball_mouseout(){
this.$refs.cooperative_scroll.style.animationPlayState="running"
}
}
.cooperative_outer{
background: url("https://images.36w.cn/officialWebImagse/pic_partner01@3x.png");
background-size: 100% 610px;
background-repeat: no-repeat;
background-position:bottom;
.cooperative{
height:767px;
.cooperative_inside_ball{
margin-top:17px;
width: 1920px;
padding-left:20px;
height: 609px;
overflow:hidden;
.cooperative_ul_outer{
height:100%;
width: 3840px;
transform:translateX(-1920px);
animation: cooperative_scroll 18s linear infinite;
}
ul{
width: 1920px;
height:100%;
position:relative;
float:left;
li{
overflow:hidden;
position:absolute;
width: 120px;
height: 120px;
border-radius:50%;
box-shadow: 0px 2px 4px 0px
#aeb9d5;
}
li:hover{
transform:scale(1.5,1.5);
transition:0.4s;
}
}
}
}
}
@keyframes cooperative_scroll {
// from {
// transform: translateX(0);
// }
0% {transform: translateX(0);}
//25% {transform: translate(0,-50px);}
// 50% {transform: translateY(-1);}
// 75% {transform: translateY(0);}
// 100% {transform: translate(0,50px);}
}