ぼよよん

タイプマイクロインタラクション系 ボタン・リンク系 類似の音

目次

オノマトペ

常時ぼよよん

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;
	animation: boyo2 .7s linear 0s infinite forwards;
	transform-origin: 50% 100%;
}

@keyframes boyo2 {
	  0% { transform: scale(1,1); }
	 30% { transform: scale(1.3,.8); }
	 40% { transform: scale(1.3,.8); }
	 50% { transform: scale(.95,1.08); }
	 60% { transform: scale(1.15,.9); }
	 70% { transform: scale(.98,1.02); }
	100% { transform: scale(1,1); }
}

使い方

  • ちょっとこのキャラクター「ぼよよん」させてくれぃ!
  • エラー通知を気づかせたいから「ぼよよん」させておきたいなー