ぷるぷる

タイプマイクロインタラクション系 その他 類似の音

目次

オノマトペ

常時ぷるぷる

hoverでぷるぷる

ソースコード

あくまでも一例なので参考程度に使ってください。

ぷるぷるHTML

<img src="画像のパス.png" class="puru2">

ぷるぷるCSS

/* 例は常時ぷるぷる */
img.puru2 {
	animation: puru2 .3s linear 0s infinite forwards;
}

@keyframes puru2 {
	    0% { transform: translateX(0); }
	  25% { transform: translateX(1px); }
	  50% { transform: translateX(-1px); }
	  75% { transform: translateX(1px); }
	  100% { transform: translateX(-1px); }
}

使い方

  • ちょっとこのキャンペーンバナー「ぷるぷる」させておいて！
  • このボタンオンマウスで「ぷるぷる」させられますか？