css实现元素环形旋转

元素中心旋转效果记录

---

先上代码

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

//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);
  	} 
} 

---

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

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

---

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