用CSS来实现一些动画在vue中使用之地球旋转（2）

一个地球元素的旋转效果

具体代码：

// 在template中添加
<div class="dynamicPic"></div>

//在style中添加
.dynamicPic {
  /*调节此处来调节圆的高宽，具体怎么布局自己调节*/
  width:6.6rem ;
  height: 5.6rem;
  background-image: url("../../assets/d.png");
  background-size: 100% 100%;
  padding: 0.4rem 0;
  float: right;
  margin-right: 2%;
  position: relative;
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
.dynamicPic {
  -webkit-transform: rotate(360deg);
  animation: rotation 15s linear infinite;
  -moz-animation: rotation 15s linear infinite;
  -webkit-animation: rotation 15s linear infinite;
  -o-animation: rotation 15s linear infinite;
}

图片素材：