css动画--使用图标进行顺时针与逆时针转圈

css动画–使用图标进行顺时针与逆时针转圈
说明：上面顺时针，下面图逆时针

代码如下：

<template>

    <div style="width:1300px;height: 600px;border: 1px solid red;margin:0 auto">
        <div class="circel">
        </div>
        <div class="unCircel">
        </div>
    </div>

</template>

<script>
    export default {
        name: "CirCelAnimation"
    }
</script>

<style scoped lang="stylus">
    .circel{
        width 100px;
        height 100px;
        background url(../../assets/images/circel.png) no-repeat
        background-size cover
        animation goCircel 2s linear infinite
       /* position absolute*/

    }
    .unCircel{
        width 100px;
        height 100px;
        background url(../../assets/images/circel.png) no-repeat
        background-size cover
        animation unCircel 2s linear infinite
        /*position absolute*/
    }

    @keyframes goCircel{
        0%{
            transform rotate(0deg)
        }
        100%{
            transform rotate(360deg)
        }
    }

    @keyframes unCircel{
        0%{
            transform rotate(360deg)
        }
        100%{
            transform rotate(0deg)
        }
    }

</style>