ぽよぽよ

目次

• オノマトペ
• ソースコード
• 使い方

オノマトペ

常時ぽよぽよ

:hoverでぽよぽよ

ソースコード

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

ぽよぽよHTML

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

ぽよぽよCSS

/* 例は常時ぽよぽよ */
img.poyo2 {
	width:100%;
	height:auto;
	animation: poyo2 2s linear .5s infinite forwards;
	transform-origin: 50% 50%;
}

@keyframes poyo2 {
	  0% { transform: scale(1); }
	 30% { transform: scale(1); }
	 40% { transform: scale(1.1); }
	 50% { transform: scale(1); }
	 60% { transform: scale(1.1); }
	 70% { transform: scale(1); }
	100% { transform: scale(1); }
}

使い方

• ちょっとこのボタン「ぽよぽよ」させておいて！
• ここにキャンペーン訴求いれたいから目立つように「ぽよぽよ」させておいて！
• マウスを乗せた時に「ぽよぽよ」させれるとユーザーが楽しくなるかも知れないし、「ぽよぽよ」させておいて！