高大上網站-CSS3總結1-圖片2D處理以及BUG修復

時間 2019-11-21

標籤高大網站 css3 css 總結圖片 2d 處理以及 bug 修復欄目網站開發简体版

原文原文鏈接

高大上網站-CSS3總結1-圖片2D處理以及BUG修復css

一，前言：html

如今的前端UI相對JS來講，重視並不夠。前端

可是CSS3提供的新特性，將如今的網站赤裸裸的劃分爲兩類：一類還在寫着老舊樣式，或者經過bootstrap來蹭點CSS3動畫。另外一類，是用CSS3寫着各類特效的網站。git

也許國內還感受不是很明顯。可是在國外的網站真的很明顯能看出來這些。也許不少時候，國內大部分公司都不肯意將時間和精力放在這上面。另外，願意這樣寫的前端工程師也偏少。（你能期望一個實習生寫這個？）github

可是，這裏我要說可是了。bootstrap

一個好的CSS3樣式徹底值得公司去花費這樣的時間和精力。由於公司網站是公司的臉面，尤爲是IT公司。一個酷炫的頁面能讓你的用戶和合做方立馬感覺到你公司那種狀態，那種光靠文字很難表達的狀態。瀏覽器

我這裏給一些國外的網站，你能夠試着去看一看：前端工程師

https://trampolinepark.com/動畫

http://xmas.evs.com/2018/網站

趁着這兩天有時間，我也須要將本身的CSS3從理論轉化爲實際的應用。

二，代碼：

1.文件目錄：

2.HTML代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test2</title>
    <link rel="stylesheet" href="./css/main.css">

</head>
<body>
    <!--title-->
    <!--<header></header>-->
    <div class="imagearea">
        <figure class="style1">
            <img src="./images/22.jpg" alt="" width="800px" height="400px">
            <figcaption>
                <p>圖片標題22</p>
                <p>圖片註解1</p>
                <p>圖片註解2</p>
                <p>圖片註解3</p>
            </figcaption>
        </figure>
        <figure class="style1">
            <img src="./images/31.jpg" alt="" width="800px" height="400px">
            <figcaption>
                <p>圖片標題31</p>
                <p>圖片註解1</p>
                <p>圖片註解2</p>
                <p>圖片註解3</p>
            </figcaption>
        </figure>
        <figure class="style1">
            <img src="./images/26.jpg" alt="" width="800px" height="400px">
            <figcaption>
                <p>圖片標題26</p>
                <p>圖片註解1</p>
                <p>圖片註解2</p>
                <p>圖片註解3</p>
            </figcaption>
        </figure>
        <figure class="style2">
            <img src="./images/27.jpg" alt="" width="700px" height="400px">
            <figcaption>
                <h2>圖片標題45</h2>
                <p>圖片註解1</p>
                <p>圖片註解2</p>
                <div></div>
            </figcaption>
        </figure>
        <figure class="style2">
            <img src="./images/34.jpg" alt="" width="700px" height="400px">
            <figcaption>
                <h2>圖片標題45</h2>
                <p>圖片註解1</p>
                <p>圖片註解2</p>
                <div></div>
            </figcaption>
        </figure>
        <figure class="style2">
            <img src="./images/45.jpg" alt="" width="700px" height="400px">
            <figcaption>
                <h2>圖片標題45</h2>
                <p>圖片註解1</p>
                <p>圖片註解2</p>
                <div></div>
            </figcaption>
        </figure>

    </div>
</body>
</html>

3.CSS3代碼：

/*總體樣式區*/ *{ margin : 0; padding : 0;
}


/*圖片展覽區域—-公共樣式*/ div.imagearea figure{ position : relative; overflow : hidden; float : left;
} div.imagearea figure figcaption{ position : absolute; top : 0; left : 0; padding : 20px; color : white;
}


/*圖片展覽區--公共動畫屬性*/ div.imagearea figure img{ transition : all .35s;
} div.imagearea figure figcaption p, div, h1, h2, h3, h4, strong, content{ transition : all 0.35s;
}


/*圖片展覽區--自適應樣式更改*/ @media screen and (max-width : 600px){ div.imagearea figure{ width : 100%; } } @media screen and (min-width : 601px) and (max-width : 1000px){ div.imagearea figure{ width : 50%; } } @media screen and (min-width : 1001px){ div.imagearea figure{ width : 33.333%; } } /*圖片展覽區--自定義樣式動畫1*/ div.imagearea figure.style1 figcaption p:nth-of-type(1){ transition-delay : 0.05s; } div.imagearea figure.style1 figcaption p:nth-of-type(2){ transition-delay : 0.1s; } div.imagearea figure.style1 figcaption p:nth-of-type(3){ transition-delay : 0.15s; } div.imagearea figure.style1 figcaption p:nth-of-type(4){ transition-delay : 0.2s; } div.imagearea figure.style1{ background : #2F0000;
} div.imagearea figure.style1 img{ opacity : 0.8; transform : translate(-150px, 0);
} div.imagearea figure.style1 figcaption p{ margin : 5px; text-align : center; color : gray; background : lavender; transform : translate(-150px, 0);
} div.imagearea figure.style1:hover img{ transform : translate(-50px, 0); opacity : 0.5;
} div.imagearea figure.style1:hover figcaption p{ transform : translate(0, 0);
}


/*圖片展覽區--自定義動畫2*/ div.imagearea figure.style2{ background : #001700;
} div.imagearea figure.style2 figcaption{ width : 100%; height : 100%;
} div.imagearea figure.style2 figcaption h2{ margin-top:20%; margin-left:25%; transform:skew(90deg);
} div.imagearea figure.style2 figcaption p{ margin-top:2%; margin-left:25%; transform:translate(0,50px); opacity: 0;
} div.imagearea figure.style2 figcaption div{ border : 2px solid white; height : 60%; width : 60%; position: absolute; top:20%; left:20%; transform:translate(0,-400px) rotate(-180deg);
} div.imagearea figure.style2:hover figcaption div{ transform: translate(0,0) rotate(0);
} div.imagearea figure.style2:hover img{ opacity: 0.5; transform: scale(1.1);
} div.imagearea figure.style2:hover figcaption p{ transform:translate(0,0); opacity: 1;
} div.imagearea figure.style2:hover figcaption h2{ transform:skew(0);
}