html,cssカーソルを合わせると動く画像

投稿者ueshin0620プレイ回数153
難易度(4.9) 456打 長文タグ個人練習用 html css
html,cssカーソルを合わせると動く画像
カーソルを合わせるとアニメーションでズームしたり、回転したりする画像のhtmlとCSSです。個人練習用ですが少し解説を入れています。
順位 名前 スコア 称号 打鍵/秒 正誤率 時間(秒) 打鍵数 ミス 問題 日付
1 むむむ 3171 E++ 3.7 86.6% 121.7 456 70 12 2021/11/24
2 ああああ! 3043 E++ 3.6 86.0% 125.5 456 74 12 2021/12/01
3 まーぼう 2911 E+ 3.3 88.3% 136.0 456 60 12 2021/10/18
4 らいおん 2677 E 3.2 84.1% 138.2 456 86 12 2021/11/14
5 まーらいおん 2591 E 3.2 82.6% 138.9 456 96 12 2021/11/08

関連タイピング

問題文

ふりがな非表示 ふりがな表示

(<div class=”zoomimg”><img src=”.jpg” /> </div>)

カーソルを合わせたら画像をズームするhtmlとcss

(.zoomimg { width: 240px; height: 150px;)

css横幅と縦のサイズ

(overflow: hidden; })

ズームした画像が縦横のサイズから、はみ出ないようにする

(.zoomimg img { transition: 0.5s;)

transitionでズームにかかる時間を設定(今回は0.5秒)

(width: 240px; display: block;  })

横幅とかも決める

(.zoomimg img:hover { transform: scale(1.1, 1.1); })

ズームの倍率を設定(縦1.1倍、横1.1倍)

(<div class=”zimg”><img src=”s.png” /></div>)

カーソルを合わせたらZ方向に回転する画像のhtmlとcss

(.zimg { width: 100%; height: 150px;)

横と縦のサイズを決める

(line-height: 100px; text-align: center; })

行間、文字が中央寄り

(.zimg img{ width: 240px; transition: 1.0s;)

横幅の設定とtransitionで回転にかかる時間を設定

(transform: rotatez( 0deg ); })

Z方向の角度の初期状態を設定(ZをXやYに変えると回転方向が変わります)

(.zimg:hover img { transform: rotatez( 360deg ); })

カーソルを合わせた後の角度を設定(ZをXやYに変えると回転方向が変わる)

◆コメントを投稿

※誹謗中傷、公序良俗に反するコメント、歌詞の投稿、宣伝行為は禁止です。

※このゲームにコメントするにはログインが必要です。

※コメントは日本語で投稿してください。

※歌詞のコメントは著作権侵害となります。投稿しないでください!

ueshin0620のタイピング

オススメの新着タイピング

タイピング練習講座 ローマ字入力表

人気ランキング

注目キーワード