基于WebApp的Vue.js项目实战实例（二）

自定义动画

                      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起作用。