高大上网站-CSS3总结1-图片2D处理以及BUG修复

news/2024/5/16 4:45:37/文章来源:https://blog.csdn.net/weixin_34239169/article/details/93811656

高大上网站-CSS3总结1-图片2D处理以及BUG修复

一，前言：

现在的前端UI相对JS来说，重视并不够。

但是CSS3提供的新特性，将现在的网站赤裸裸的划分为两类：一类还在写着老旧样式，或者通过bootstrap来蹭点CSS3动画。另一类，是用CSS3写着各种特效的网站。

也许国内还感觉不是很明显。但是在国外的网站真的很明显能看出来这些。也许很多时候，国内大部分公司都不愿意将时间和精力放在这上面。另外，愿意这样写的前端工程师也偏少。（你能指望一个实习生写这个？）

但是，这里我要说但是了。

一个好的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);
}