本文将带你了解WEBAPP开发之基于WebApp的Vue.js项目实战实例（二），希望本文对大家学WEBAPP有所帮助。

自定义动画





图为顶部循环动画

ps:图为几张图片合成为gif的，所以顺畅度不高，实际效果很顺畅(´・ω・)ﾉ

1.创建自定义组件Cloud.vue


2.编写css样式

#cloud{
/*margin-left:50px;*/
width:100%;
height:150px;
position:relative;
margin-left:100px;
-webkit-animation:'cloud'20slinearinfinite;
}

#cloud*{
position:absolute;
background:rgba(255,255,255,1);
border-radius:50%;
}

#cloud.zer{
left:-180px;
top:-100px;
width:140px;
height:128px;
}

#cloud.one{
left:0px;
top:-110px;
width:140px;
height:128px;
}

#cloud.two{
left:-60px;
top:-46px;
width:100px;
height:82px;
}

#cloud.thr{
left:100px;
top:-84px;
width:120px;
height:120px;
}

#cloud.fou{
left:256px;
top:-70px;
width:130px;
height:110px;
}

#cloud.fiv{
left:130px;
top:-130px;
width:180px;
height:180px;
}

#cloud.six{
left:400px;
top:-140px;
width:200px;
height:180px;
}

#cloud.sev{
left:360px;
top:-40px;
width:70px;
height:70px;
/*}*/

@-webkit-keyframescloud{
0%{
margin-left:0px;
}
50%{
margin-left:100px;
}
100%{
margin-left:0px;
}
}



3.引用
importcloudfrom"component/fragment/Cloud"

components:{
'cloud':cloud,
}





总结：
自定义组件非常简单。效果呈现主要还是CSS起作用。   

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！