hoverの処理について今まで何となく使っていたので、
使い方を改めて色々チャッピーに相談してみた
はい、マウスホバーによって閲覧者が驚いたり楽しんだりするような仕掛けを作ることは可能です！以下に、いくつかのアイデアと実装例を紹介します。
☟ホバーでぐにょぐにょ
ホバーしてみて！
☟ホバー内で追従する何か
☟ホバーでランダムメッセージ
ホバーしてみて！
☟パーティクル？エフェクト（分子構造みたいなのがふわふわしている感じの）
点々の密度を上げられたら砂遊びみたいで楽しいかも？
こんな感じも・・・(背景にもやもや）
☟エリアが震える
ホバーで振動！
cssとかjsとか
css
/*震える*/
.vibration-effect {
width: 60vw;
height: 50vh;
background-color: #000000;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 18px;
color: #000000;
border: 3px solid #000000;
transition: transform 0.3s ease;
background-image: url('/wp-content/uploads/2024/08/おえかきつね.png'); /* 背景画像を設定 */
background-size: cover; /* 画像を要素全体に拡大縮小 */
background-position: center; /* 画像を中央に配置 */
background-repeat: no-repeat; /* 画像を繰り返さない */
}
.vibration-effect:hover {
animation: vibrate 0.3s infinite;
}
@keyframes vibrate {
0% { transform: translate(1px, 1px) rotate(0deg); }
25% { transform: translate(-1px, -1px) rotate(-1deg); }
50% { transform: translate(-3px, 0px) rotate(1deg); }
75% { transform: translate(3px, 2px) rotate(0deg); }
100% { transform: translate(1px, -1px) rotate(-1deg); }
}☟ページ全体が光る（黄ばむ）
ホバーして背景を光らせる！
