css实现元素环形旋转

元素中心旋转效果记录

---

先上代码

//css代码
.header{
  	-webkit-animation:rotateImg 1s linear infinite;
  /*rotateImg对应下方@中字段，可自定义*/
 	width: 80px ;
 	height: 80px;
  	border: 1px solid #ccc;
 	vertical-align: middle; } 

@keyframes rotateImg {
  	0% {
 	   transform : rotate(0deg);
	  }
  	100% {
 	   transform : rotate(360deg);
 	 }
} 

@-webkit-keyframes rotateImg {
  	0%{
  	  -webkit-transform : rotate(0deg);
	  }
 	 100%{
  	  -webkit-transform : rotate(360deg);
  	}
} 

//html代码
<img class="header" src="me.png">

---

说明：这个效果我是用来实现科技环旋转效果的，使用的是背景透明的那种，应用场景还有很多，可以慢慢去尝试。

欢迎各路大神路过指点、补充~

---

该文原记录时间为2020-10-29，时代在进步，技术在更新，但记录永不过时。