VUE 旋转图片（封装组件使logo转起来）

最新推荐文章于 2026-06-24 09:12:39 发布

原创最新推荐文章于 2026-06-24 09:12:39 发布 · 2.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

vue 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何在Vue中创建一个旋转图片的组件，通过将图片拆分为四个部分并分别旋转，实现动态logo展示的效果。具体实现方法包括组件的封装及在页面中的使用。

今天做了个VUE的页面，需要将logo旋转起来，效果如下图所示：

思路是①将图片分成四个图片（图片必须为透明由内向外分别是inner-center.png、inner-circle.png、outer-circle.png、outer-circle-2.png），②将最内部保持不动，外部几个旋转起来

话不多说，直接上代码（封装组件名称为rotateImg）：

<template>
    <div :style="styleObj">
        <div class="compents-imgs">
              <img src="../../static/images/index-inner-center.png" :style="bjCenterObj" >
              <img src="../../static/images/index-inner-circle.png" class="circling" :style="innerCircleObj">
              <img src="../../static/images/index-outer-circle.png" class="circlingConverse" :style="outerCircleObj">
			  <img src="../../static/images/index-outer-circle-2.png" class="circling" :style="outer2CircleObj">
        </div >
    </div>
</template>

<script>
    export default {
        name: "rotateImgs",
        data () {
          return {
            styleObj:{
              'width': this.width,
              'height': this.height,
            },
            bjCenterObj:{
              'position': 'absolute',
              'width': parseInt(this.width) * 0.6 + 'px',
              'height': parseInt(this.height) * 0.6 + 'px',
              'margin-left': parseInt(this.width) * 0.2 + 'px',
              'margin-right': parseInt(this.width) * 0.2 + 'px',
              'margin-top': parseInt(this.height) * 0.2 + 'px',
              'margin-bottom': parseInt(this.height) * 0.2 + 'px',
            },
            innerCircleObj:{
              'position': 'absolute',
              'width': parseInt(this.width) * 0.7 + 'px',
              'height': parseInt(this.height) * 0.7 + 'px',
              'margin-left': parseInt(this.width) * 0.15 + 'px',
              'margin-right': parseInt(this.width) * 0.15 + 'px',
              'margin-top': parseInt(this.height) * 0.15 + 'px',
              'margin-bottom': parseInt(this.height) * 0.15 + 'px',
            },
            outerCircleObj:{
              'position': 'absolute',
              'width': parseInt(this.width) * 0.8 + 'px',
              'height': parseInt(this.height) * 0.8 + 'px',
              'margin-left': parseInt(this.width) * 0.1 + 'px',
              'margin-right': parseInt(this.width) * 0.1 + 'px',
              'margin-top': parseInt(this.height) * 0.1 + 'px',
              'margin-bottom': parseInt(this.height) * 0.1 + 'px',
            },
			outer2CircleObj:{
			  'position': 'absolute',
			  'width': parseInt(this.width) * 0.9 + 'px',
			  'height': parseInt(this.height) * 0.9 + 'px',
			  'margin-left': parseInt(this.width) * 0.05 + 'px',
			  'margin-right': parseInt(this.width) * 0.05 + 'px',
			  'margin-top': parseInt(this.height) * 0.05 + 'px',
			  'margin-bottom': parseInt(this.height) * 0.05 + 'px',
			}
          }
        },
        props:{
          width: {
             type: String,
             require: false,
             default: '100%'
          },
          height: {
             type: String,
             require: false,
             default: '100%'
          }, 
        },
        methods: {
            
        }
    }
</script>

<style>
.compents-imgs{
  margin: 0px;
  display: block;
  width: inherit;
  height: inherit;
  position: fixed;
}
.compents-imgs img{
  display: block;
  margin: 0px;
}
/* @keyframes imgrotate{
    0%{ transform: (0deg)}
    100%{transform:(360deg)}
} */
@-webkit-keyframes rotate /*Safari and Chrome*/
{
    0%{ transform: rotate(0deg)}
    100%{transform:rotate(360deg)}
}
@-webkit-keyframes rotateConverse /*Safari and Chrome*/
{
    0%{ transform: rotate(-0deg)}
    100%{transform:rotate(-360deg)}
}
.circling{
    /* animation:rotate 2s infinite; */
    -webkit-animation: rotate 2s linear infinite;
}
.circlingConverse{
    /* animation:rotate 2s infinite; */
    -webkit-animation: rotateConverse 2s linear infinite;
}
    
</style>

组件引用（在所需页面引入，根据实际路径引入）：