HTMLとCSSだけで配置画像を点滅させます。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSで画像点滅</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: palegoldenrod;
}
/* 点滅アニメーションの定義 */
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
/* 点滅させる画像のスタイル */
.blink-image {
animation: blink 2s infinite;
/* 2秒で1回のアニメーションを無限に繰り返す */
}
</style>
</head>
<body>
<img src="pic/image.png"
alt="点滅する画像" class="blink-image">
</body>
</html>
<!-- index.html -->再生結果です。画像をマウスで押しっぱなしにします。離すと動作は止まります。
