自定义动画
图为顶部循环动画
ps:图为几张图片合成为gif的，所以顺畅度不高，实际效果很顺畅 (´・ω・)ﾉ
1.创建自定义组件 Cloud.vue
<template> <div id="cloud"> <div class="zer"></div> <div class="one"></div> <div class="two"></div> <div class="thr"></div> <div class="fou"></div> <div class="fiv"></div> <div class="six"></div> <div class="sev"></div> </div> </template>
2.编写css样式
<style lang="scss" scoped> #cloud { /*margin-left: 50px;*/ width: 100%; height: 150px; position: relative; margin-left: 100px; -webkit-animation: 'cloud' 20s linear infinite; } #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-keyframes cloud { 0% { margin-left: 0px; } 50% { margin-left: 100px; } 100% { margin-left: 0px; } } </style>3.引用
import cloud from "component/fragment/Cloud" components: { 'cloud': cloud, } <div style="position: absolute;top: 0;left: 0;width: 100%;height: 50px;overflow: hidden;" id="cloudContainer"> <cloud></cloud> </div>总结：
自定义组件非常简单。效果呈现主要还是CSS起作用。
作者：橘子不太好吃
链接：https://www.jianshu.com/p/fbf9979b28c0
随时随地看视频
