YAS's VB.NET Tips
 
NetCommons Tips
NetCommons Tips >> 記事詳細

2018/05/25

マウスがのると,ユラユラしながら一回り大きくなる画像

Tweet ThisSend to Facebook | by:YAS
 transformでrotateとscaleの変形を同時に行います。半角スペースで区切って並べて記述します。写真上にマウスがのると,ユラユラ動きながら一回り大きくなります。
<style>
@keyframes zoom2 {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(3deg) scale(1.05);
  }
  100% {
    transform: rotate(-3deg) scale(1.1);
  }
}
img.zoom2:hover {
  animation-name:zoom2;
  animation-duration:0.2s;
  animation-timing-function:ease-out;
  animation-fill-mode: forwards;
}
</style>
<img class="zoom2" src="./?action=common_download_main&upload_id=102" alt="" title="" hspace="0" vspace="0" style="border:0px solid rgb(204, 204, 204);float:none;" />

20:36 | 投票する | 投票数(0) | コメント(0)