其他分享
首页 > 其他分享> > 网页图片转动动画模板，可以用于上传动画效果，LOGO动态效果

网页图片转动动画模板，可以用于上传动画效果，LOGO动态效果

作者：互联网

网页图片转动动画模板，可以用于上传动画效果，LOGO动态效果

效果图

代码如下：

<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta name ="viewport" content ="width = device-width" />
    <title>gxg</title>
</head>
<style lang="css">
	.logo1 {
  		/* position: absolute; */
  		width: 100px;
  		height: 100px;
 		 /* background-image: url(/static/shijian/upload1.png); */
 		 background-size: 100px 100px;
  		z-index: 2;
	}

	.logo2 {
 	 	position: absolute;
  		left:0px;
 	 	width: 100px;
 		 height: 100px;
 		 /* background-image: url(/static/shijian/upload2.png); */
  		background-size: 100px 100px;
 		 z-index: 3;
  		animation: haha1 2s linear infinite;
  		-webkit-animation: haha1 2s linear infinite;
 		 -moz-animation: haha1 2s linear infinite;
  		-ms-animation: haha1 2s linear infinite;
 		 -o-animation: haha1 2s linear infinite;
	}

@keyframes haha1 {
  0% {
      transform: rotate(0deg);
  }
  25% {
      transform: rotate(90deg);
  }
  50% {
      transform: rotate(180deg);
  }
  75% {
      transform: rotate(270deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

@-webkit-keyframes haha1 {
  0% {
      transform: rotate(0deg);
  }
  25% {
      transform: rotate(90deg);
  }
  50% {
      transform: rotate(180deg);
  }
  75% {
      transform: rotate(270deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

@-moz-keyframes haha1 {
  0% {
      transform: rotate(0deg);
  }
  25% {
      transform: rotate(90deg);
  }
  50% {
      transform: rotate(180deg);
  }
  75% {
      transform: rotate(270deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

@-ms-keyframes haha1 {
  0% {
      transform: rotate(0deg);
  }
  25% {
      transform: rotate(90deg);
  }
  50% {
      transform: rotate(180deg);
  }
  75% {
      transform: rotate(270deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

@-o-keyframes haha1 {
  0% {
      transform: rotate(0deg);
  }
  25% {
      transform: rotate(90deg);
  }
  50% {
      transform: rotate(180deg);
  }
  75% {
      transform: rotate(270deg);
  }
  100% {
      transform: rotate(360deg);
  }
}
</style>
<body>
	<div  style="position: relative;">
		<img src="https://s3.bmp.ovh/imgs/2021/09/6313b4c9d96b9eef.png" alt="上传" class="logo1">
		<img src="https://s3.bmp.ovh/imgs/2021/09/9f9e9bd627e9179e.png" alt="上传" class="logo2">
        	</div>
</body>
</html>

标签：动画,rotate,0deg,100px,haha1,transform,动态效果,75%,LOGO
来源： https://www.cnblogs.com/wsgxg/p/15240160.html