网页图片转动动画模板,可以用于上传动画效果,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>

上一篇:laravel5.8(二十四)生成二维码(qrcode)


下一篇:docker启动的nginx配置访问静态资源,访问失败的解决方法