原理を説明するためにいくつかの方法の虫眼鏡効果の模倣で[css3]css3
なぜ、記事のタイトルが「偽物の虫眼鏡」なのですか?
なぜなら、私が今日言おうとしていることは、一般的にそうであるように、大きな部分画像のポップアップの隣にマウスが移動したとき、それは書きやすく、あまり技術がない(親要素(または言う:元の画像)の相対位置決めと、大きな部分画像(目的:それは元の画像の隣の位置にあるように)の絶対位置決めと、CSSコントロールスタイルとマウスイベントリスナーの横に、もちろん、あなたはまた直接jQueryインターフェースを使用できます - $( 'classname' ). jqzoom({zoomwidth:xx; zoomheight: xx; zoomType:'reverse ';}) 最後のTypeは拡大鏡の種類を定義しています)
さて、話を戻しますが、今日の話は
マウスオーバーで元の位置の画像を拡大表示する
アニメーション
そう、アニメーションなんです。(ここにあります: ウェブサイトからのキー入力)
当初は、css3の
keyframes プロパティ
の方が使用頻度が高いからです。
例えば
から...まで
でスタイルを指定します - 入口のアニメーションと出口のアニメーション
また、例えば:トランジションで実現することもできます( 本日のフォーカス )
プロフェット CSS3 プロパティ transform - (rotate:rotate,scale:scale,skew:skew,move:translate)
例
通常時の幅は100pxで、マウスオーバーで200pxになる要素です。
widthの値のみを設定した場合、以下のような効果があります。
硬い感じがしませんか。トランジションを加えた効果をもう一度見てみましょう。
2つの効果の違いを見れば、transitionプロパティが何をするものなのか、おわかりいただけるのではないでしょうか。この例の目的は、幅の変更と似ていますが、最終的な効果は異なります。詳細なコードに進んでください。
> a = c(1, 2, 5, 3, 6, -2, 4)
> b = c("one", "two", "three")
> c = c(TRUE, TRUE, TRUE, FALSE, TRUE, FALSE)
> x = matrix(1:20, nrow=5, ncol=4, byrow=TRUE) #generate 1~20, 5 rows, 4 columns, by row
> x
[,1] [,2] [,3] [,4]
[1,] 1 2 3 4
[2,] 5 6 7 8
[3,] 9 10 11 12
[4,] 13 14 15 16
[5,] 17 18 19 20
> y = matrix(1:20, nrow=5, ncol=4, byrow=FALSE)# generate 1~20, 5 rows, 4 columns, by column
> y
[,1] [,2] [,3] [,4]
[1,] 1 6 11 16
[2,] 2 7 12 17
[3,] 3 8 13 18
[4,] 4 9 14 19
[5,] 5 10 15 20
> x[2,]# return row 2
[1] 5 6 7 8
> x[,2]#returns column 2
[1] 2 6 10 14 18
> x[1,4]#returns a specified number, row 1, column 4
[1] 4
> x[2,c(2,4)]#returns the specified number, row 2, columns 2 and 4
[1] 6 8
> x[3:5, 2]#returns the specified number, the number of columns 2 of rows 3 through 5
[1] 10 14 18
# name the matrix rows and columns, pay attention to the number of rows and columns to correspond otherwise it will report an error
> rnames=c("apple","banana","orange","melon","corn")
> cnames=c("cat","dog","bird","pig")
> x = matrix(1:20, nrow=5, ncol=4, byrow=TRUE)
> rownames(x)=rnames
> colnames(x)=cnames
> x
cat dog bird pig
apple 1 2 3 4
banana 5 6 7 8
orange 9 10 11 12
melon 13 14 15 16
corn 17 18 19 20
パースしています。
(1) コンテナホバー擬似クラスを追加し、transformプロパティでコンテナズーム効果を設定します。
(2) コンテナのtransitionプロパティに値transformとそのアニメーションの時間を設定します。
今回はcss3で虫眼鏡効果を模倣するいくつかの方法の原理について紹介しましたが、より関連するcss3模倣虫眼鏡の内容は、スクリプトハウスの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください、今後ともスクリプトハウスをよろしくお願いします!。
関連
-
[CSSチュートリアル】QQtabBarからCSS命名規則BEMの詳細を見る
-
[CSSチュートリアル]CSSは、2列のレイアウト、固定幅の左側、適応するためのさまざまな方法の右側を達成するために
-
[css3]ピュアCSS3でdivのinとoutの効果を順番に実現する
-
[CSSチュートリアル】CSSで実現するTikTokのテキストジッター効果例
-
[CSSチュートリアル】擬似要素で実現する中空三角矢印とXアイコンの例
-
[CSSチュートリアル]CSSのボーダーの半分または部分的に見えるコードは、ボーダーを達成するために
-
[CSSチュートリアル]適応的な幅と高さの矩形の16:9の例を達成するためのCSS
-
[CSSチュートリアル]cssに0.5pxの行を実装してモバイル互換の問題を解決する(推奨)
-
[CSSチュートリアル]マウスをスライドさせてカードを浮かせるCSSの例
-
[CSSチュートリアル】Chromeのフォント最小12px制限の最終解決策
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】 css border add four corners コード
-
[css3]css3におけるtransformプロパティの4つの機能
-
[CSSチュートリアル】CSSの新機能には、ページの再描画や並び替えの問題をコントロールする機能が含まれています。
-
[CSSチュートリアル]モバイルにおけるviewportの具体的な使い方
-
[CSSチュートリアル]実装ステップの吸引上部と下部のH5レイアウトのための純粋なCSSソリューション
-
[CSSチュートリアル]overflow:autoの使い方解説
-
[css3] css3の擬似クラスについて、共通使用前と共通使用後で説明する。
-
[CSSチュートリアル]スクロールバーを非表示にし、サンプルコードの内容をスクロールすることができますするCSS
-
[CSSチュートリアル】CSSのラインハイトとハイトを詳しく解説
-
[CSSチュートリアル】css3 背景画像 半透明 コンテンツ 不透明 方法例