ぷらんぷらん

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

目次

オノマトペ

常時ぷらんぷらん

hoverでぷらんぷらん

ソースコード

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

ぷらんぷらんHTML

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

ぷらんぷらんCSS

/* 例は常時ぷらんぷらん */
.sample {
	margin: 0 auto;
	padding: 30px 0;
	display: block;
	max-width:207px;
}
img.muni2 {
	margin:0 auto ;
	display:block;
	width:80%;
	height:auto;
	transform-origin: 60% 5%;
	animation: pura2 1.5s linear 0s infinite forwards;
}

@keyframes pura2 {
	  0% { transform: rotate(0); }
	 30% { transform: rotate(9deg); }
	 50% { transform: rotate(-8deg); }
	 70% { transform: rotate(3deg); }
	 90% { transform: rotate(-1deg); }
	100% { transform: rotate(0); }
}

使い方

  • ちょっとこのキャラクター「ぷらんぷらん」させてくれぃ！
  • キャンペンバナーを画鋲で止める感じで「ぷらんぷらん」させれる？