DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS3基礎 >> 9.8 訓練題(1)CSS3實現個性圖片牆
9.8 訓練題(1)CSS3實現個性圖片牆
編輯:CSS3基礎     

在很多個人網站,我們經常可以看到帶有個性的圖片牆效果。在這一節我們就先來給大家講解一下如何使用之前學習到的CSS3知識來實現個性圖片牆效果。

實現代碼如下:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3實現個性圖片牆</title>
    <style type="text/css">
        #container
        {
            position:relative;
            width:800px;
            height:600px;
            margin:0 auto;
            background-image:url("../App_images/lesson/run_css3/bg.jpg");
        }
        img
        {
            position:absolute;
            padding:10px;
            background-color:White;
        }
        img:Hover
        {
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        #container img:first-child
        {
            left:80px; top:60px; -webkit-transform:rotate(30deg);
        }
        #container img:nth-child(2)
        {
            left:240px; top:60px; -webkit-transform:rotate(-30deg);
        }
        #container img:nth-child(3)
        {
            left:420px; top:60px; -webkit-transform:rotate(30deg);
        }
        #container img:nth-child(4)
        {
            left:100px; top:240px; -webkit-transform:rotate(-30deg);
        }
        #container img:nth-child(5)
        {
            left:270px; top:240px; -webkit-transform:rotate(0);
        }
        #container img:last-child
        {
            left:420px; top:240px;-webkit-transform:rotate(30deg);
        }
    </style>
</head>
<body>
    <div id="container">
        <img src="../App_images/lesson/run_css3/haizei1.png" alt=""/>
        <img src="../App_images/lesson/run_css3/haizei2.png" alt=""/>
        <img src="../App_images/lesson/run_css3/haizei3.png" alt=""/>
        <img src="../App_images/lesson/run_css3/haizei4.png" alt=""/>
        <img src="../App_images/lesson/run_css3/haizei5.png" alt=""/>
        <img src="../App_images/lesson/run_css3/haizei6.png" alt=""/>
    </div>
</body>
</html>

在浏覽器預覽效果如下:

分析:

這裡主要用到了CSS3旋轉來實現圖片擺放,然後使用box-shadow屬性來設置鼠標移到圖片上時的陰影效果。並且這裡還用到了CSS3結構偽類選擇器。

上面做的效果可能有點不敢恭維,不過方法已經教給大家了。大家可以自行設計,打造屬於自己的“個性圖片牆”。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved