vue3 实现小风扇旋转效果实例。风扇素材收集。
实例代码
<template>
<div class="fengshan">
<img class="shanye" ref="shanye" src="./assets/shanye.png" alt="">
</div>
</template>
<script>
export default {
components: {},
data() {
return {}
},
watch: {},
mounted() {
},
methods: {
},
}
</script>
<style lang="scss" scoped>
.fengshan {
background: url("./assets/fengshan.png") no-repeat;
width: 54px;
height: 87px;
background-size: 100% 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.shanye {
width: 34px;
height: 34px;
position: absolute;
z-index: 1;
top: 14%;
//transform-origin:0% 0%;
animation: rotate 6s linear infinite;
}
}
@keyframes rotate {
0% {
transform: rotateZ(0deg); /*从0度开始*/
}
100% {
transform: rotateZ(360deg); /*360度结束*/
}
}
</style>