1. ホーム
  2. Web制作
  3. CSS

原理を説明するためにいくつかの方法の虫眼鏡効果の模倣で[css3]css3

2022-02-02 02:04:35

なぜ、記事のタイトルが「偽物の虫眼鏡」なのですか?
なぜなら、私が今日言おうとしていることは、一般的にそうであるように、大きな部分画像のポップアップの隣にマウスが移動したとき、それは書きやすく、あまり技術がない(親要素(または言う:元の画像)の相対位置決めと、大きな部分画像(目的:それは元の画像の隣の位置にあるように)の絶対位置決めと、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模倣虫眼鏡の内容は、スクリプトハウスの過去の記事を検索するか、以下の関連記事を引き続き閲覧してください、今後ともスクリプトハウスをよろしくお願いします!。