ピカピカ

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

目次

オノマトペ

Clickしてみてね

ピカピカするよ

ソースコード

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

ピカピカHTML

<span>ピカピカするよ</span>
<div class="pika-block"></div>

パカパカCSS

span {
	margin:0 auto;
	padding:.5em 1em;
	border-radius:6px;
	box-sizing:border-box;
	display:block;
	width:100%;
	text-align:center;
	background-color:#FFDC73;
	font-weight:700;
}
.pika-block {
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	background-color:rgba(255,255,230,1);
	display:none;
	z-index:99;
}
.pika-block.pikapika {
	display:block; 
	animation: pika2 .3s linear 0s infinite forwards;
}
@keyframes pika2 {
	  0% { opacity:0; }
	 20% { opacity:1; }
	 40% { opacity:0; }
	 60% { opacity:1; }
	 80% { opacity:0; }
	100% { opacity:1; }
}

パカパカJS

$(function(){
	$('.sample span').on('click', function() {
　		$('.pika-block').addClass("pikapika");
  		setTimeout(function(){
    		$('.pika-block').removeClass("pikapika");
		},1000);
	});
});

使い方

  • このボタン押したら「ピカピカ」光って欲しいな！
  • 入力エラーが発生したら、「ピカピカ」と光らせたい