画像の純粋な CSS3 実装wall_html/css_WEB-ITnose-htmlチュートリアル-php.cn

画像の純粋な CSS3 実装wall_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:43:24

オリジナル

1120 人が閲覧しました

予備知識

DIV+CSS の基礎

CSS3 の変形と遷移の使い方

主にtransformのrotate/scaleの使い方

アニメーション遷移のいくつかのパラメータ(transition-property/transition-duration/transition-timing-function)

CSS3 box-shadow..ここでは外側の影のみが使用されています

言及する価値があります: 属性パラメーターの詳細については、CSS マニュアルを参照してください。ここには使用されるもののみが表示されます。マテリアルの取得

Baidu Self Search画像素材の場合は、以下のコード内の画像パスを置き換えます。

例の画像は 400 ピクセルより大きく、600 ピクセルより小さく、ほとんどが 480X270 です
効果の説明

乱雑な画像の並べ替えを初期化します (CSS コントロール) 、マウスをホバーすると画像がトップレベル表示になり、画像は横表示 + 1.5 倍に戻ります

コードの実装

コードにはコメントが含まれています

index.html

<!DOCTYPE html><html lang="zh"><head>  <meta charset="UTF-8">  <title>CSS3实现照片墙</title>  <link rel="stylesheet" href="css/style.css"></head><body>    <h1>纯CSS3实现照片墙</h1>    <div id="container">      <img class="position_pic1" src="img/1.jpg" alt="这是一个美眉的图片">      <img class="position_pic2" src="img/2.jpg" alt="这是一个美眉的图片">      <img class="position_pic3" src="img/3.jpg" alt="这是一个美眉的图片">      <img class="position_pic4" src="img/4.jpg" alt="这是一个美眉的图片">      <img class="position_pic5" src="img/5.jpg" alt="这是一个美眉的图片">      <img class="position_pic6" src="img/6.jpg" alt="这是一个美眉的图片">      <img class="position_pic7" src="img/7.jpg" alt="这是一个美眉的图片">      <img class="position_pic8" src="img/8.jpg" alt="这是一个美眉的图片">    </div></body></html>

ログイン後にコピー

style.css その他

CSS 修正が補完される前にすべてはプラグイン「autoprefix」で解決されます

CSS 組版はプラグイン「css comb」で解決されます

テストブラウザ Firefox 38 /クロム42