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

背景
投稿者投稿者ueshin0620いいね1お気に入り登録
プレイ回数478難易度(4.9) 456打 長文
html,cssカーソルを合わせると動く画像
カーソルを合わせるとアニメーションでズームしたり、回転したりする画像のhtmlとCSSです。個人練習用ですが少し解説を入れています。

関連タイピング

問題文

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

(<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のタイピング

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

タイピング練習講座 ローマ字入力表 アプリケーションの使い方 よくある質問

人気ランキング

注目キーワード