定位的div环形圆形排列
要实现一个类似于下图的效果，十个标签从中间随机出现的动画效果，若没有十个则按定义位置出现
1.将十个标签都固定在中心位置，通过class,并且动态生成标签颜色
<div class="nodata-icon" v-if="figIsShow"> <div v-if="customerIcon[0]" class="divstart"><span :style="{background:returnColor(customerIcon[0])}">{{ customerIcon[0].name }}</span></div> <div v-if="customerIcon[1]" class="divstart"><span :style="{background:returnColor(customerIcon[1])}">{{ customerIcon[1].name }}</span></div> <div v-if="customerIcon[2]" class="divstart"><span :style="{background:returnColor(customerIcon[2])}" >{{ customerIcon[2].name }}</span></div> <div v-if="customerIcon[3]" class="divstart"><span :style="{background:returnColor(customerIcon[3])}">{{ customerIcon[3].name }}</span></div> <div v-if="customerIcon[4]" class="divstart"><span :style="{background:returnColor(customerIcon[4])}" >{{ customerIcon[4].name }}</span></div> <div v-if="customerIcon[5]" class="divstart"><span :style="{background:returnColor(customerIcon[5])}">{{ customerIcon[5].name }}</span></div> <div v-if="customerIcon[6]" class="divstart2"><span :style="{background:returnColor(customerIcon[6])}">{{ customerIcon[6].name }}</span></div> <div v-if="customerIcon[7]" class="divstart2"><span :style="{background:returnColor(customerIcon[7])}" >{{ customerIcon[7].name }}</span></div> <div v-if="customerIcon[8]" class="divstart2"><span :style="{background:returnColor(customerIcon[8])}">{{ customerIcon[8].name }}</span></div> <div v-if="customerIcon[9]" class="divstart2"><span :style="{background:returnColor(customerIcon[9])}">{{ customerIcon[9].name }}</span></div> </div>
<script>
returnColor (str){
return str=>{
if(str['key']==='custPolicyCnt'||str['key']==='custApdpremCur'||str['key']==='numChild'||str['key']==='lastJoinOfflineActiv'){
return '#1C8EFF'
}
else if(str['key']==='assetLevel'||str['key']==='investType'||str['key']==='preference'){
return '#025CEA'
}
else if(str['key']==='consumeLevel'||str['key']==='cusValue'||str['key']==='ifIns'){
return '#FA6400'
}else{
return '#1C8EFF'
}
}
},
</script>
<style>
.divstart{
opacity: 0;
width:0px;
height: 0px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.divstart2{
opacity: 0;
width:0px;
height: 0px;
top: 50%;
right: 50%;
transform: translate(-50%, -50%);
}
</style>
2.处理数据数组customerIcon，固定标签出现的位置，再动态绑定动画效果
<div class="nodata-icon" v-if="figIsShow"> <div v-if="customerIcon[0]" class="divstart" :style="returnAnimation(customerIcon[0].time,customerIcon[0].animate)"><span :style="{background:returnColor(customerIcon[0])}">{{ customerIcon[0].name }}</span></div> <div v-if="customerIcon[1]" class="divstart" :style="returnAnimation(customerIcon[1].time,customerIcon[1].animate)"><span :style="{background:returnColor(customerIcon[1])}">{{ customerIcon[1].name }}</span></div> <div v-if="customerIcon[2]" class="divstart" :style="returnAnimation(customerIcon[2].time,customerIcon[2].animate)"><span :style="{background:returnColor(customerIcon[2])}" >{{ customerIcon[2].name }}</span></div> <div v-if="customerIcon[3]" class="divstart" :style="returnAnimation(customerIcon[3].time,customerIcon[3].animate)"><span :style="{background:returnColor(customerIcon[3])}">{{ customerIcon[3].name }}</span></div> <div v-if="customerIcon[4]" class="divstart" :style="returnAnimation(customerIcon[4].time,customerIcon[4].animate)"><span :style="{background:returnColor(customerIcon[4])}" >{{ customerIcon[4].name }}</span></div> <div v-if="customerIcon[5]" class="divstart" :style="returnAnimation(customerIcon[5].time,customerIcon[5].animate)"><span :style="{background:returnColor(customerIcon[5])}">{{ customerIcon[5].name }}</span></div> <div v-if="customerIcon[6]" class="divstart2" :style="returnAnimation(customerIcon[6].time,customerIcon[6].animate)"><span :style="{background:returnColor(customerIcon[6])}">{{ customerIcon[6].name }}</span></div> <div v-if="customerIcon[7]" class="divstart2" :style="returnAnimation(customerIcon[7].time,customerIcon[7].animate)"><span :style="{background:returnColor(customerIcon[7])}" >{{ customerIcon[7].name }}</span></div> <div v-if="customerIcon[8]" class="divstart2" :style="returnAnimation(customerIcon[8].time,customerIcon[8].animate)"><span :style="{background:returnColor(customerIcon[8])}">{{ customerIcon[8].name }}</span></div> <div v-if="customerIcon[9]" class="divstart2" :style="returnAnimation(customerIcon[9].time,customerIcon[9].animate)"><span :style="{background:returnColor(customerIcon[9])}">{{ customerIcon[9].name }}</span></div> </div>
<script>
returnAnimation (time,animate){
return (time,animate)=>{
return `animation: fadenum${time} 1s 1 ;animation-delay: ${animate}s;animation-fill-mode:forwards`
}
},
//处理数组，固定位置
dealCustomerIcon (customerIcon){
const len = customerIcon.length
this.customerIcon = Array(10).fill(null)
if(len===1){
this.fillCustomerIcon(customerIcon,[0])
}
if(len===2){
this.fillCustomerIcon(customerIcon,[2,9])
}
if(len===3){
this.fillCustomerIcon(customerIcon,[3,8,9])
}
if(len===4){
this.fillCustomerIcon(customerIcon,[1,3,7,9])
}
if(len===5){
this.fillCustomerIcon(customerIcon,[0,1,3,7,9])
}
if(len===6){
this.fillCustomerIcon(customerIcon,[0,1,3,5,7,9])
}
if(len===7){
this.fillCustomerIcon(customerIcon,[0,1,3,5,7,8,9])
}
if(len===8){
this.fillCustomerIcon(customerIcon,[0,1,3,4,5,7,8,9])
}
if(len===9){
this.fillCustomerIcon(customerIcon,[0,1,2,3,4,5,7,8,9])
}
if(len===10){
this.fillCustomerIcon(customerIcon,[0,1,2,3,4,5,6,7,8,9])
}
},
fillCustomerIcon (target,arr){
arr.forEach((item,index)=>{
//随机出现位置
this.customerIcon[item] = target[index]
//每个位置出现的时间
this.customerIcon[item]['animate'] = index
})
this.customerIcon.forEach((item,index)=>{
if(!!item&&item.name!==''){
//位置动画
item['time'] = index
}
})
},
</script>
<style>
@keyframes fadenum0{
0%{
width: 0px;
height: 0px;
opacity: 0;
}
100%{
width: 32%;
height: 28px;
opacity: 0.9;
top: -120px;
}
}
@keyframes fadenum1{
0%{
max-width: 0px;
height: 0px;
opacity: 0;
}
100%{
width: 32%;
height: 28px;
opacity: 0.9;
top: -80px;
left: 275px;
}
}
@keyframes fadenum2{
0%{
max-width: 0px;
height: 0px;
opacity: 0;
}
100%{
width: 32%;
height: 28px;
opacity: 0.9;
top: -40px;
left: 285px;
}
}
@keyframes fadenum3{
0%{
max-width: 0px;
height: 0px;
opacity: 0;
}
100%{
width: 32%;
height: 28px;
opacity: 0.9;
top: 0;
left: 285px;
}
}
@keyframes fadenum4{
0%{
max-width: 0px;
height: 0px;
opacity: 0;
}
100%{
width: 32%;
height: 28px;
opacity: 0.9;
top: 40px;
left: 275px;
}
}
@keyframes fadenum5{
0%{
max-width: 0px;
height: 0px;
opacity: 0;
}
100%{
width: 32%;
height: 28px;
opacity: 0.9;
top: 80px;
}
}
@keyframes fadenum6{
0%{
width: 0px;
height: 0px;
opacity: 0;
}
100%{
width: 32%;
height: 28px;
opacity: 0.9;
top: 40px;
right: 160px;
}
}
@keyframes fadenum7{
0%{
width: 0px;
height: 0px;
opacity: 0;
}
100%{
width: 32%;
height: 28px;
opacity: 0.9;
top: 0;
right: 170px;
}
}
@keyframes fadenum8{
0%{
max-width: 0px;
height: 0px;
opacity: 0;
}
100%{
width: 32%;
height: 28px;
opacity: 0.9;
top: -40px;
right: 170px;
}
}
@keyframes fadenum9{
0%{
max-width: 0px;
height: 0px;
opacity: 0;
}
100%{
width: 32%;
height: 28px;
opacity: 0.9;
top: -80px;
right: 160px;
}
}
</style>
期间还有许多可以优化的，欢迎找我讨论
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」