高大上网站-CSS3总结1-图片2D处理以及BUG修复
高大上网站-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 :;
padding :;
} /*图片展览区域—-公共样式*/
div.imagearea figure{
position : relative;
overflow : hidden;
float : left;
}
div.imagearea figure figcaption{
position : absolute;
top :;
left :;
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:;
}
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:;
}
div.imagearea figure.style2:hover figcaption h2{
transform:skew(0);
}
三，效果：
四，Github:
源码地址：https://github.com/cureking/CSS3_learning
五，BUG：
我操作的电脑分辨率是1920*1080，HTML文件中我图片的宽度设置原先是700px.
在谷歌浏览器上会出现第四个图片移至第一个图片时，可能出现卡住的情况，页面刷新无效，必须重新打开。但是在IE浏览器上没有这样的问题。
一开始，我也一脸懵逼。
直到我想起我电脑分辨率后，计算了图片在偏移后的剩余量，才发现是图片宽度不足的问题。这是十分巧合的。
另外，由于是我自己弄，所以图片没有标准话，只能自己简单地加工一下。
(由于时间关系，不再赘述。只提一下。）
高大上网站-CSS3总结1-图片2D处理以及BUG修复的更多相关文章
- CSS3鼠标悬停图片上浮显示描述代码
效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
- 网页特效：用CSS3制作3D图片立方体旋转特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 使用 CSS3 实现 3D 图片滑块效果【附源码下载】
使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...
- 使用CSS3滤镜让图片反转颜色
CSS提供的滤镜也是一大亮点,我一直痴迷其中,有些滤镜的效果很有用,可是有些的滤镜效果可能只是为了玩玩儿,CSS常见的滤镜有这些:grayscale, blur, sepia,所有常见的过滤器.但是如 ...
- 基于CSS3和HTML5图片加工前后对比代码
分享一款CSS3和HTML5图片加工前后对比代码.这是一款通过CSS3和HTML5将图像转换为自动响应的元素:图像缩放和裁剪以适应容器.效果图如下: 在线预览 源码下载 实现的代码. html代码 ...
- css3制作六边形图片
效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden; 超出隐藏 3.>v ...
- 一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id= ...
- CSS3之边框图片border-image
CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...
随机推荐
- php数据结构之二叉树
树是一种比较重要的数据结构, 尤其是二叉树.二叉树是一种特殊的树,在二叉树中每个节点最多有两个子节点,一般称为左子节点和右子节点(或左孩子和右孩子),并且二叉树的子树有左右之 分,其次序不能任意颠倒. ...
- VRS外部文件
igs08_1708.atx:IGS卫星和接收机段天线PCO改正 Configure:配置文件
- Servlet 启动顺序
在servlet的配置当中,<load-on-startup>1</load-on-startup>的含义是: 标记容器是否在启动的时候就加载这个servlet. 当值为0或者 ...
- bootstrap datetimepicker 在 angular 项目中的运用
datetimepocker 是一个日期时间选择器,bootstrap datetimepicker 是 bootstrap 日期时间表单组件.访问 bootstrap-datetimepicker ...
- vue 校验插件 veeValidate使用
1.内置的校验规则 after{target} - 比target要大的一个合法日期,格式(DD/MM/YYYY) alpha - 只包含英文字符 alpha_dash - 可以包含英文.数字.下 ...
- arcgis 10.1 导入数据到oracle 发布地图服务
机器配置说明 数据库服务器 系统:linux 软件:oracle 11G 64位 Arcgis server服务器 系统:win7 专业版 软件:arcgis server 10.1.win64_11 ...
- 函数的类型：函数也是类型 (*)->*
函数的类型:函数也是类型 (*)->* 函数类型作为类型可以定义变量,使得函数变量具有可替代性,这个是高阶函数的编程基础. 使用函数的类型可以定义函数的变量,并用函数给这个变量赋值: 每一个函数 ...
- 二进制包 vs. 源代码包
在ROS中, 我们可能经常会遇到缺少相关的ROS依赖的问题. 有些时候你编译或者运行一些ROS程序, 系统会提示找不到XXX功能包. 如果是缺少ROS的依赖, 通常可以用以下命令来安装: $ sudo ...
- ubuntu下boot分区空间不足问题的解决方案
https://blog.csdn.net/along_oneday/article/details/75148240 先查看当前内核版本号(防止误删) uname –r 查看已经安装过的内核 dpk ...
- Spring源码分析（十二）FactoryBean的使用
摘要:本文结合<Spring源码深度解析>来分析Spring 5.0.6版本的源代码.若有描述错误之处,欢迎指正. 一般情况下,Spring通过反射机制利用bean的class属性指定实现 ...