<template>
<div>
<i :class="{'rotate360':showAnimate}" @animationend="reset"
class="icon-iconfontshuaxin"></i>
</div>
</template>
<script>
export default {
data() {
return {
showAnimate: false
}
},
mounted() {
this.play()
},
methods: {
play() {
this.showAnimate = true
},
reset() {
this.showAnimate = false
}
}
}
</script>
<style scoped>
.rotate360 {
animation: rotate360 7s linear 0.2s infinite;
}
@keyframes rotate360 {
100% {
transform: rotate(360deg);
}
}
.icon-iconfontshuaxin {
width: 200px;
height: 200px;
border-radius: 50%;
border: 2px dashed #ff0000;
display: block;
font-size: 30px;
opacity: .6;
}
</style>
