高大上網(wǎng)站-CSS3總結(jié)1-圖片2D處理以及BUG修復(fù)

番茄西紅柿發(fā)布于2019-04-23 13:35 / 2771人閱讀

摘要：高大上網(wǎng)站總結(jié)圖片處理以及修復(fù)一，前言現(xiàn)在的前端相對(duì)來(lái)說(shuō)，重視并不夠。因?yàn)楣揪W(wǎng)站是公司的臉面，尤其是公司。另外，由于是我自己弄，所以圖片沒(méi)有標(biāo)準(zhǔn)話，只能自己簡(jiǎn)單地加工一下。由于時(shí)間關(guān)系，不再贅述。

高大上網(wǎng)站-CSS3總結(jié)1-圖片2D處理以及BUG修復(fù)

一，前言：

現(xiàn)在的前端UI相對(duì)JS來(lái)說(shuō)，重視并不夠。

但是CSS3提供的新特性，將現(xiàn)在的網(wǎng)站赤裸裸的劃分為兩類：一類還在寫(xiě)著老舊樣式，或者通過(guò)bootstrap來(lái)蹭點(diǎn)CSS3動(dòng)畫(huà)。另一類，是用CSS3寫(xiě)著各種特效的網(wǎng)站。

也許國(guó)內(nèi)還感覺(jué)不是很明顯。但是在國(guó)外的網(wǎng)站真的很明顯能看出來(lái)這些。也許很多時(shí)候，國(guó)內(nèi)大部分公司都不愿意將時(shí)間和精力放在這上面。另外，愿意這樣寫(xiě)的前端工程師也偏少。（你能指望一個(gè)實(shí)習(xí)生寫(xiě)這個(gè)？）

但是，這里我要說(shuō)但是了。

一個(gè)好的CSS3樣式完全值得公司去花費(fèi)這樣的時(shí)間和精力。因?yàn)楣揪W(wǎng)站是公司的臉面，尤其是IT公司。一個(gè)酷炫的頁(yè)面能讓你的用戶和合作方立馬感受到你公司那種狀態(tài)，那種光靠文字很難表達(dá)的狀態(tài)。

我這里給一些國(guó)外的網(wǎng)站，你可以試著去看一看：

https://trampolinepark.com/

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

趁著這兩天有時(shí)間，我也需要將自己的CSS3從理論轉(zhuǎn)化為實(shí)際的應(yīng)用。

二，代碼：

1.文件目錄：

2.HTML代碼：

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

head>
<body>
    
    
    <div class="imagearea">
        <figure class="style1">
            <img src="./images/22.jpg" alt="" width="800px" height="400px">
            <figcaption>
                <p>圖片標(biāo)題22p>
                <p>圖片注解1p>
                <p>圖片注解2p>
                <p>圖片注解3p>
            figcaption>
        figure>
        <figure class="style1">
            <img src="./images/31.jpg" alt="" width="800px" height="400px">
            <figcaption>
                <p>圖片標(biāo)題31p>
                <p>圖片注解1p>
                <p>圖片注解2p>
                <p>圖片注解3p>
            figcaption>
        figure>
        <figure class="style1">
            <img src="./images/26.jpg" alt="" width="800px" height="400px">
            <figcaption>
                <p>圖片標(biāo)題26p>
                <p>圖片注解1p>
                <p>圖片注解2p>
                <p>圖片注解3p>
            figcaption>
        figure>
        <figure class="style2">
            <img src="./images/27.jpg" alt="" width="700px" height="400px">
            <figcaption>
                <h2>圖片標(biāo)題45h2>
                <p>圖片注解1p>
                <p>圖片注解2p>
                <div>div>
            figcaption>
        figure>
        <figure class="style2">
            <img src="./images/34.jpg" alt="" width="700px" height="400px">
            <figcaption>
                <h2>圖片標(biāo)題45h2>
                <p>圖片注解1p>
                <p>圖片注解2p>
                <div>div>
            figcaption>
        figure>
        <figure class="style2">
            <img src="./images/45.jpg" alt="" width="700px" height="400px">
            <figcaption>
                <h2>圖片標(biāo)題45h2>
                <p>圖片注解1p>
                <p>圖片注解2p>
                <div>div>
            figcaption>
        figure>

    div>
body>
html>

3.CSS3代碼：

/*整體樣式區(qū)*/
*{
    margin  : 0;
    padding : 0;
}


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


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


/*圖片展覽區(qū)--自適應(yīng)樣式更改*/
@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%; }
}


/*圖片展覽區(qū)--自定義樣式動(dòng)畫(huà)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);
}


/*圖片展覽區(qū)--自定義動(dòng)畫(huà)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);
}

三，效果：

四，Github:

源碼地址：https://github.com/cureking/CSS3_learning

五，BUG：

我操作的電腦分辨率是1920*1080，HTML文件中我圖片的寬度設(shè)置原先是700px.

在谷歌瀏覽器上會(huì)出現(xiàn)第四個(gè)圖片移至第一個(gè)圖片時(shí)，可能出現(xiàn)卡住的情況，頁(yè)面刷新無(wú)效，必須重新打開(kāi)。但是在IE瀏覽器上沒(méi)有這樣的問(wèn)題。

一開(kāi)始，我也一臉懵逼。

直到我想起我電腦分辨率后，計(jì)算了圖片在偏移后的剩余量，才發(fā)現(xiàn)是圖片寬度不足的問(wèn)題。這是十分巧合的。

另外，由于是我自己弄，所以圖片沒(méi)有標(biāo)準(zhǔn)話，只能自己簡(jiǎn)單地加工一下。

(由于時(shí)間關(guān)系，不再贅述。只提一下。）

云服務(wù)器 GPU云服務(wù)器 bug修復(fù) 修復(fù)php系統(tǒng)bug linux修復(fù)上網(wǎng) 服務(wù)器上網(wǎng)站建設(shè)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/2077.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 740·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 3986·2021-11-30 14:52
Hadoop 2.6.0 啟動(dòng)問(wèn)題 lib/native/libhadoop.so which mi

閱讀 3816·2021-11-30 14:52
VmShell：黑五美國(guó)VPS,免費(fèi)先開(kāi)通測(cè)試,滿意后付款!支持tiktok美區(qū)

閱讀 3873·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3809·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 3907·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3584·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過(guò)多的解決方法

閱讀 6197·2021-11-29 11:00

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

高大上網(wǎng)站-CSS3總結(jié)1-圖片2D處理以及BUG修復(fù)

相關(guān)文章

jQuery 圖片查看插件 Magnify 開(kāi)發(fā)簡(jiǎn)介（仿 Windows 照片查看器）

jQuery 圖片查看插件 Magnify 開(kāi)發(fā)簡(jiǎn)介（仿 Windows 照片查看器）

jQuery 圖片查看插件 Magnify 開(kāi)發(fā)簡(jiǎn)介（仿 Windows 照片查看器）

CSS 3D Panorama（全景） - 淘寶造物節(jié)技術(shù)剖析

發(fā)表評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

TA的文章

tensor

Windows 下安裝 XGBoost

Hadoop 2.6.0 啟動(dòng)問(wèn)題 lib/native/libhadoop.so which mi

VmShell：黑五美國(guó)VPS,免費(fèi)先開(kāi)通測(cè)試,滿意后付款!支持tiktok美區(qū)

百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

301重定向怎么做?301重定向設(shè)置方法有幾種

wordpress網(wǎng)站重定向次數(shù)過(guò)多的解決方法

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

高大上網(wǎng)站-CSS3總結(jié)1-圖片2D處理以及BUG修復(fù)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！