ホームページ > 記事 > ウェブフロントエンド > 画像の純粋な CSS3 実装wall_html/css_WEB-ITnose
画像の純粋な CSS3 実装wall_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:43:241049ブラウズ
予備知識
言及する価値があります: 属性パラメーターの詳細については、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」で解決されます声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。