cssで風車を回すアニメーション

背景を透過した風車のPNG画像

画像の色相を変えるCSS

filter: hue-rotate(80deg);

風車を自由な位置に配置させるCSS

position: absolute;
top: 150px;
left: 40%;
width:240px;

風車を回転させるアニメーション

.fusya img{
	animation:3s linear infinite rotation1;
	width:100%;
  }

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

風車が回るスピードを速くする。

.f1 img{
animation:1s linear infinite rotation1;
}

ソースコード

<div>
<style>
	*{
		padding:0;
		margin:0;
	}
	.base{
position:relative;
background: linear-gradient(rgb(24, 176, 218), rgb(255, 255, 255));
height:500px;
width:100%;
	}

  .triangle img{
	animation:3s linear infinite rotation1;
	width:100%;
  }

  .f1{
	position: absolute;
	top: 50px; /* #contents内の上から何pxか */
	left: 20%; /* #contents内の左から何pxか */
	width:80px;
  }
  .f1 img{
	  filter: hue-rotate(80deg);
  }

  .f2{
	position: absolute;
	top: 150px; /* #contents内の上から何pxか */
	left: 40%; /* #contents内の左から何pxか */
	width:240px;
  }

  @keyframes rotation1{
	0%{ transform:rotate(0);}
	100%{ transform:rotate(360deg); }
  }
</style>
<div class="base">
<div class="triangle f1"><img src="https://nonbiri3.com/wp-content/uploads/2022/07/fusya.png"></div>
<div class="triangle f2"><img src="https://nonbiri3.com/wp-content/uploads/2022/07/fusya.png"></div>
</div>
</div>