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>