/mtane0412/右下にたねのぶを出す

generated at 2/17/2025, 5:10:46 AM
右下にたねのぶを出す

#UserScript #UserCSS
script.jsconst elementApp = document.querySelector('.app');
document.addEventListener('keydown', ()=> {
	if (Math.floor(Math.random() * 100) < 95) {
		elementApp.classList.add('mtane0412-speak');
	} else {
		elementApp.classList.add('mtane0412-speak-blink');
	}
});
document.addEventListener('keyup', ()=> {
	elementApp.classList.remove('mtane0412-speak');
	elementApp.classList.remove('mtane0412-speak-blink');
});

style.css:root {
	--eyeOpen-mouthClose: url("https://i.gyazo.com/73649ff9a82e26aed789b1c11d75a7b5.png");
	--eyeClose-mouthClose: url("https://i.gyazo.com/b6a5bd4b467ea15ddb2bf1252eec7849.png");
	--eyeOpen-mouthOpen: url("https://i.gyazo.com/ca51325ed076412336ed8d35569bfdd7.png");
	--eyeClose-mouthOpen: url("https://i.gyazo.com/2f0f1e0afc3d7893155e719acb7b4a65.png");
	--surprise: url("https://i.gyazo.com/b3378040e505b23dac74c1a2de33fd5d.png");
}

/* 画像プリロード */
body::after{
   position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
   content:var(--eyeOpen-mouthClose) var(--eyeOpen-mouthOpen) var(--eyeClose-mouthClose) var(--eyeClose-mouthOpen) var(--surprise);
}

@keyframes mtane0412-blink {
   0%     { background-image: var(--eyeOpen-mouthClose); }
   69%     { background-image: var(--eyeOpen-mouthClose); }
   70%     { background-image: var(--eyeClose-mouthClose); }
   80%     { background-image: var(--eyeClose-mouthClose); }
   81%   { background-image: var(--eyeOpen-mouthClose); }
   100%   { background-image: var(--eyeOpen-mouthClose); }
 }
 
@media only screen and (min-width: 480px) {
 .app::after {
  	content: "";
  	background-image: var(--eyeOpen-mouthClose);
  	background-size: 256px 256px;
  	display: block;
  	width: 256px;
  	height: 256px;
  	position: fixed;
  	right: -70px;
  	bottom: -120px;
  	animation: 5s mtane0412-blink linear infinite;
	}
}
.app:active::after {
	background-image: var(--surprise);
	bottom: -100px;
	animation: none;
}

.app.mtane0412-speak::after {
	/* ぴょこぴょこ用 */
	background-image: var(--eyeOpen-mouthOpen);
	animation: none;
}

.app.mtane0412-speak-blink::after {
 	/* ぴょこぴょこ用 */
 	background-image: var(--eyeClose-mouthOpen);
 	animation: none;
 }