03前端学习之CSS3(2)

最新推荐文章于 2023-07-13 16:48:24 发布

浅弋、璃鱼

最新推荐文章于 2023-07-13 16:48:24 发布

阅读量1.4k

点赞数

分类专栏：前端学习文章标签：前端 CSS

本文链接：https://blog.csdn.net/qq_35709559/article/details/104241625

版权

前端学习专栏收录该内容

35 篇文章 4 订阅

订阅专栏

文章目录

十四、用户界面样式：
- 1. 鼠标样式(cursor):
- 2. 轮廓(outline)
- 3. 防止拖拽文本域(resize):
- 4. 垂直对齐(vertical-align):
- - 4.1 取出图片底侧空白缝隙:
十五、溢出的文字隐藏:
- 1. 自动换行
十七、精灵技术(sprite):
- 1. 精灵技术产生的背景:
- 2. 精灵技术本质:
- 3. 精灵技术的使用:
- 4. 制作精灵图:
十八、字体图标:
- 1. 字体图标优点
- 2. 字体图标使用流程:
- 3. 追加新图标到原来库里面:
十九、滑动门:
- 1. 滑动门:
- 2. 核心技术:
二十、 before和after伪元素:
二十一、过渡(CSS3):
二十二、transform:2D变形(css)
- 1. translate(x, y) 移动:
- 2. scale(x, y) 缩放:
- 3. rotate(deg) 旋转:
- 4.transform-origin 调整元素转换变形的原点:
- 5. skew(deg, deg) 倾斜:
二十三、transform 3D变形(CSS3)
- 1. 左手坐标系
- 2. rotateX(xdeg):
- 3. rotateY():
- 4. 沿着z轴进行旋转
- 5. 透视(perspective):
- 6. translate3d(x,y,z)
- 7. 案例:
- - 7.1 开门效果:
- 8. backface-visibility
二十四、 animation 动画(CSS3):
- 2. 多个动画节点:
- 3. 案例:
- - 3.1 小汽车
  - 3.2 无缝滚动
二十五、伸缩布局(CSS3):
- 2. 常用属性详解:
- 3. justify-content 调整主轴对齐(水平对齐):
- 4、align-items调整侧轴对齐(垂直对齐):
- 5、flex-wrap控制是否换行
- 6. flex-flow是flex-direction、flex-wrap的简写形式
- 7.align-content堆栈(由flex-wrap产生的独立行) 多行垂直对齐:
- 8. order控制子项目的排序顺序:
二十六、BFC(Block formatting context: 块级格式化上下文):
- 1. 元素额显示模式:
- 2. 那些元素会具有BFC的条件:
- 3. 什么情况下可以让元素产生BFC:
- 4. BFC元素所具有的特性:
- 5. BFC的主要用途:
- 6. BFC 总结:
二十七、优雅降级和渐进增强:
- 1. 什么是"优雅降级和渐进增强":
- - 1.1 渐进增强 progressive enhancement：
  - 1.2 优雅降级 graceful degradation：
- 2. 区别
- 3. 浏览器前缀:
二十八、背景渐变与3D效果:
- 1. 背景渐变:
- 2. 3D变换:
- 二十九、 CSS工具:
- 1. CSS W3C 统一验证工具
- 2. CSS 压缩

十四、用户界面样式：

所谓用户界面样式, 就是改变一些用户操作样式, 比如更改用户的鼠标样式，表单轮廓等.

1. 鼠标样式(cursor):

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

cursor: default(小白) | pointer(小手) | move(移动) | text(文本)

参数	描述
auto	标准光标
default	标准箭头
pointer, hand	手形光标
wait	等待光标
text	I形光标
vertical-text	水平I形光标
no-drop	不可拖动光标
not-allowed	无效光标
help	帮助光标
all-scroll	三角方向标
move	移动标
crosshair	十字标

鼠标效果演示:

<ul>
	<li style="cursor:default">我是小白</li>
 	<li style="cursor:pointer">我是小手</li>
  	<li style="cursor:move">我是移动</li>
	<li style="cursor:text">我是文本</li>
</ul>

详尽去参考文档:
尽量不要用hand 因为火狐不支持 pointer ie6以上都支持的尽量用

2. 轮廓(outline)

轮廓是绘制于元素周围的一条线, 位于边框边缘的外围, 可起到突出元素的作用.

outline: outline-color || outline-style || outline-width

但是平时不关心可以设置多少，都是去掉的。
最直接的写法是： outline: 0; 或者 outline: none;

 <input  type="text"  style="outline: 0;"/>

3. 防止拖拽文本域(resize):

resize：none 这个单词可以防止火狐谷歌等浏览器随意的拖动文本域。

右下角可以拖拽：

右下角不可以拖拽：

<textarea  style="resize: none;"></textarea>

4. 垂直对齐(vertical-align):

让带有宽度的块级元素居中对齐，是margin: 0 auto;
让文字居中对齐，是 text-align: center;
vertical-align 垂直对齐

在这里插入图片描述

vertical-align : baseline |top |middle |bottom

设置或检索对象内容的垂直对其方式。

vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素，通常用来控制图片/表单与文字的对齐
在这里插入图片描述

4.1 取出图片底侧空白缝隙:

有个很重要特性:

图片或者表单等行内块元素, 他的底线会和父级盒子的基线对齐. 这样会造成一个问题, 就是图片底侧会有一个空白缝隙.

解决的方法就是：

给img vertical-align:middle | top等等. 让图片不要和基线对齐;
给img 添加 display：block; 转换为块级元素就不会存在问题了;

十五、溢出的文字隐藏:

1. 自动换行

1.1 word-break:

主要处理英文单词

参数	描述
word-break:normal	使用浏览器默认的换行规则
word-break:break-all	允许在单词内换行
word-break:keep-all	只能在半角空格或连字符处换行

1.2 hite-space:

可以处理中文
white-space设置或检索对象内文本显示方式. 通常我们使用于强制一行显示内容

参数	描述
white-space:normal	默认处理方式
white-space:nowrap	强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行

1.3 text-overflow 文字溢出:

text-overflow : clip | ellipsis

设置或检索是否使用一个省略标记（…）标示对象内文本的溢出

属性	参数
text-overflow: clip	不显示省略标记(…)，而是简单的裁切
text-overflow : ellipsis	当对象内文本溢出时显示省略标记(…)

注意一定要首先强制一行内显示，再次和overflow属性搭配使用

<head>
    <meta charset="UTF-8">
    <title>文字溢出</title>
    <style>
        div {
            width: 120px;
            height: 20px;
            border: 1px solid #f00;
            margin: 100px 100px;
        }
        div:nth-child(2) {
            white-space: nowrap;    /* 首先需要添加  强制一行 */
            overflow: hidden;   /* 超出隐藏 */
            text-overflow: clip; /* 直接截取 */
        }
        div:last-child {
            white-space: nowrap;    /* 首先需要添加  强制一行 */
            overflow: hidden;   /* 超出隐藏 */
            text-overflow: ellipsis; /* 超出显示省略号 */
        }
    </style>
</head>
<body>
    <div>注意一定要首先强制一行内显示，再次和overflow属性 搭配使用</div>
    <div title="注意一定要首先强制一行内显示，再次和overflow属性 搭配使用">注意一定要首先强制一行内显示，再次和overflow属性 搭配使用</div>
    <div title="注意一定要首先强制一行内显示，再次和overflow属性 搭配使用">注意一定要首先强制一行内显示，再次和overflow属性 搭配使用</div>

</body>

在这里插入图片描述

十七、精灵技术(sprite):

小妖精雪碧

1. 精灵技术产生的背景:

在这里插入图片描述
如图所示, 网页的请求原理图, 当用户访问一个网站时, 需要向服务器发送请求, 网页上的每张图片都要经过一次请求才能展现给用户.
然而, 一个网页中往往会应用很多小图的背景图作为修饰, 当网页中的图像过多时, 服务器就会频繁地接收和发送请求, 这将大大降低页面的加载速度. 为了有效的减少服务器接收和发送请求的次数, 提高页面的加载速度, 出现了CSS精灵技术(也称CSS Sprites、CSS雪碧).

2. 精灵技术本质:

简单来说, CSS精灵是一种处理网页背景图像的方式. 它将一个页面涉及到的所有零星背景图像集中到一种大图中去, 然后将大图应用于网页, 这样, 当用户访问页面时, 只需向服务器发送一次请求, 网页中的背景图像即可全部展示出来. 通常情况下,这是有很多小的背景图像合成的大图被称为精灵图(雪碧图).
如下是京东的一张精灵图:

在这里插入图片描述

3. 精灵技术的使用:

CSS精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图)，然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图，就需要使用CSS的background-image、background-repeat和background-position属性进行背景定位，其中最关键的是使用background-position属性精确地定位.

<head>
    <meta charset="UTF-8">
    <title>精灵图</title>
    <style>
        div {
            margin-top: 20px
        }
        .mobile {
            width: 15px;
            height: 20px;
            background: url(images/jds.png) no-repeat 0 -100px;
        }
        .many {
            width: 220px;
            height: 52px;
            background: url(images/jds.png) no-repeat 0 -130px;
        }
    </style>
</head>
<body>
    <div class="mobile"></div>
    <div class="many"></div>
</body>

在这里插入图片描述

4. 制作精灵图:

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图)，那我们要做的，就是把小图拼合成一张大图

大部分情况下，精灵图都是网页美工做

精灵图上放的都是小的装饰性质的背景图片. 插入图片不能往上放;
精灵图的宽度取决于最宽的那个背景;
可以横向摆放也可以纵向摆放，但是每个图片之间，间隔至少隔开偶数像素合适;
在我们精灵图的最低端，留一片空隙，方便我们以后添加其他精灵图;

结束语：小公司，背景图片很少的情况，没有必要使用精灵技术，维护成本太高. 如果是背景图片比较多，可以建议使用精灵技术.

十八、字体图标:

图片是有诸多优点的,但是缺点很明显, 比如图片不但增加了总文件的大小, 还增加了很多额外的http请求, 这会大大降低网页的性能. 更重要的是图片不能很好的支持"缩放", 因为图片放大和缩小会失真. 此时一个重要的技术出现, 这就是"字体图标(iconfont)"

1. 字体图标优点

 可以做出跟图片一样可以做的事情,改变透明度、旋转度，等..
但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等...
本身体积更小，但携带的信息并没有削减
几乎支持所有的浏览器
移动端设备必备良药...

2. 字体图标使用流程:

总体来说，字体图标按照如下流程:
在这里插入图片描述

2.1 设计字体图标

假如图标是我们公司单独设计，那就需要第一步了，这个属于UI设计人员的工作，他们在 illustrator 或 Sketch 这类矢量图形软件里创建 icon图标，比如下图:

在这里插入图片描述
之后保存为svg格式，然后给我们前端人员就好了

其实第一步，不需要关心，只需要有人提供这些图标就可以了，如果图标是大众的，网上本来就有的，可以直接跳过第一步，进入第三步.

2.2 上传生成字体包

当UI设计人员给svg文件的时候，需要转换成我们页面能使用的字体文件，而且需要生成的是兼容性的适合各个浏览器的.

icomoon字库:
http://icomoon.io
IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型. 内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢

阿里icon font字库
http://www.iconfont.cn/
这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。一个字，免费，免费！！

fontello
http://fontello.com/
在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。

Font-Awesome
http://fortawesome.github.io/Font-Awesome/
更新比较快。目前已经有369个图标了。

Glyphicon Halflings
http://glyphicons.com/
这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。

Icons8

https://icons8.com/
提供PNG免费下载，像素大能到500PX

2.3 下载兼容字体包:

在这里插入图片描述

2.4 字体引入到HTML:

得到压缩包之后，最后一步，是最重要的一步了，就是字体文件已经有了，我们需要引入到我们页面中。

首先把以下4个文件放入到 fonts文件夹里面。通俗的做法:

第一步：在样式里面声明字体:

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?7kkyc2');
  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
    url('fonts/icomoon.woff?7kkyc2') format('woff'),
    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

第二步：给盒子使用字体:

span {
	font-family: "icomoon";
}

第三步：盒子里面添加结构:

span::before {
		 content: "\e900";
	}
或者  
<span></span>

3. 追加新图标到原来库里面:

原来的字体图标不够用了，需要添加新的字体图标，但是原来的不能删除，继续使用，此时需要这样做:

把压缩包里面的selection.json 从新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可

在这里插入图片描述

十九、滑动门:

1. 滑动门:

为了使各种特殊形状的背景能够自适应元素文本内容的多少, 出现了CSS滑动门技术. 它从新的角度构建页面, 使各种特殊形状北京能够自由拉伸滑动, 易使用元素内部的文本内容, 可用性强. 常见于各种导航栏的滑动门.

2. 核心技术:

核心技术就是利用CSS精灵(主要是背景位置)和盒子padding撑开宽度, 以便能适应不同字数的导航栏.

一般的经典布局都是这样的：

<li>
  <a href="#">
    <span>导航栏内容</span>
  </a>
</li>

总结：

a 设置背景左侧，padding撑开合适宽度;
span 设置背景右侧， padding撑开合适宽度剩下由文字继续撑开宽度;
之所以a包含span就是因为整个导航都是可以点击的;

模仿微信首页导航栏:
获取的精灵图片:
在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>滑动门</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a {
            margin: 100px 50px;
            display: inline-block;
            height: 33px;   /* 千万不能给宽度 */
            background: url(images/lTcb_ve.png) no-repeat;
            padding-left: 15px;

            color: #fff;
            font-size: 16px;
            line-height: 33px;
            text-align: center;
        }
        a span {
            display: inline-block;
            height: 33px;   /* 千万不能给宽度 */
            background: url(images/lTcb_ve.png) no-repeat right; /* 右对齐 */
            padding-right: 15px;
        }
    </style>
</head>
<body>
    <a href="#">
        <span>
            首页
        </span>
    </a>
    <a href="#">
        <span>
            帮助与反馈
        </span>
    </a>

在这里插入图片描述

二十、 before和after伪元素:

之所以被称为伪元素, 是因为它们不是真正的页面元素, html没有对应的元素, 但是其所有用法和表现行为与真正的页面元素一样, 可以对其使用诸如页面元素一样的css样式 ,表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素. 是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查.

注意:

伪元素:before和:after添加额内容默认是inline元素; 这两个伪元素的content属性, 表示伪元素的内容, 设置:before和:after时必须设置其content属性, 否则伪元素就不起作用.
伪元素不占位置;

二十一、过渡(CSS3):

过渡(transition)是css3中具有颠覆性的特征之一, 可以在不适用flask动画或js的情况下, 当元素从一种样式变换为另一种样式时为元素添加效果.

帧动画: 通过一帧一帧的画面按照固定顺序和速度播放;

在CSS3里使用transition可以实现补间动画(过渡效果), 并且当前元素只要有"属性"发生变化时, 即存在两种状态, 就可以实现平滑的过渡.

语法格式:

transition: 要过渡的属性    花费时间    运动曲线    合适开始
如果要多组属性变化, 用逗号","隔开;

属性	描述	备注
transition	简写属性, 用于在一个属性中设置四个过渡属性
transition-property	规定应用过渡的css属性名称	所有属性都过渡, 写"all"
transition-duration	定义过渡效果花费的时间, 默认是0.	必须写单位(秒: s; 毫秒:ms)
transition-timing-function	规定过渡效果的时间曲线. 默认是"ease"	linear:匀速; ease:逐渐慢下来; ease-in: 加速; ease-out: 减速; ease-in-out: 先加速后减速
transition-delay	规定过渡效果合适开始. 默认是"0"	写单位(秒: s; 毫秒:ms)

在这里插入图片描述

div {
		width: 200px;
		height: 100px;
		background-color: pink;
		/* transition: 要过渡的属性  花费时间  运动曲线  何时开始; */
		transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
		/* transtion 过渡的意思  这句话写到div里面而不是 hover里面 */
  
			
}
div:hover {  /* 鼠标经过盒子，我们的宽度变为400 */

		width: 600px;
		height: 300px
}

transition: all 0.6s;  /* 所有属性都变化用all 就可以了  后面俩个属性可以省略 */

二十二、transform:2D变形(css)

transform是CSS3中具有颠覆性的特征之一, 可以实现元素的位移, 旋转, 倾斜, 缩放, 甚至支持矩阵方式.

1. translate(x, y) 移动:

translate: 移动平移的意思:

在这里插入图片描述

translate(50px, 50px)
/* 使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素 */

可以改变元素的位置, x、y可为负值

参数	描述
translate(x,y)	水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)	仅水平方向移动（X轴移动）
translateY(Y)	仅垂直方向移动（Y轴移动）

让盒子水平/垂直居中

<head>
    <meta charset="UTF-8">
    <title>translate-盒子居中</title>

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: #f00;

            /* 盒子居中 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            /* 文字居中 */
            text-align: center;
            line-height: 200px
        }
    </style>
</head>
<body>
    <div>盒子</div>
</body>

2. scale(x, y) 缩放:

在这里插入图片描述

transf: scale(0.8, 1)

可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放.

参数	描述
scale(x, y)	是元素水平方向和垂直方向同时缩放(也就是x轴和y轴同时缩放)
scaleX(x)	元素仅水平方向缩放(X轴缩放)
scaleY(y)	元素仅垂直方向缩放(Y轴缩放)

注意:
scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小; 而任何大于或等于1.01的值，作用是让元素放大

3. rotate(deg) 旋转:

可以对元素进行旋转, 正值为顺时针, 负值为逆时针;
在这里插入图片描述

transform: rotate(45deg);
/* 注意单位是deg(度) */

<head>
    <meta charset="UTF-8">
    <title>translate-旋转</title>

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #f00;
            margin: 50px;
        }
        .rotate {
            transform: rotate(45deg);
        }

    </style>
</head>
<body>
    <div class="rotate">旋转</div>
</body>

在这里插入图片描述

4.transform-origin 调整元素转换变形的原点:

在这里插入图片描述

div {
	transform-origin:left top;
	transform: rotate(45deg);
	/* 改变元素原点到左上角，然后进行顺时旋转45度 */
}

如果是4个角，可以用 left top这些，如果想要精确的位置，可以用 px 像素

div {
	transform-origin: 10px 10px;
	transform: rotate(45deg);
	/* 如果是4个角，可以用 left top这些，如果想要精确的位置， 可以用 px 像素 */

}

5. skew(deg, deg) 倾斜:

在这里插入图片描述

transform: skew(30deg, 0deg);

通过skew方法把元素水平方向上倾斜30度，处置方向保持不变’;

可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为

<head>
    <meta charset="UTF-8">
    <title>translate-倾斜</title>

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #f00;
            margin: 50px;
            transition: all 0.5s;
        }
        .skew{
            transform: skew(30deg, 0deg);
        }

    </style>
</head>
<body>

    <div class="skew">倾斜</div>
</body>

在这里插入图片描述

二十三、transform 3D变形(CSS3)

1. 左手坐标系

伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方. 这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向. 如下图:

在这里插入图片描述

CSS3中的3D坐标系与上述的3D坐标系是有一定区别的，相当于其绕着X轴旋转了180度，如下图

在这里插入图片描述

简单记住他们的坐标：

x左边是负的, 右边是正的
y 上面是负的, 下面是正的
z 里面是负的, 外面是正的

2. rotateX(xdeg):

就是沿着 x 立体旋转.
在这里插入图片描述

img {
  transition:all 0.5s ease 0s;
}
img:hove {

  transform:rotateX(180deg);
}

3. rotateY():

在这里插入图片描述
沿着y轴进行旋转

img {
  transition:all 0.5s ease 0s;
}
img:hove {

  transform:rotateX(180deg);
}

4. 沿着z轴进行旋转

img {
  transition:all .25s ease-in 0s;
}
img:hover {
  /* transform:rotateX(180deg); */
  /* transform:rotateY(180deg); */
  /* transform:rotateZ(180deg); */
  /* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}

练习:

<head>
    <meta charset="UTF-8">
    <title>3D旋转</title>
    <style>
        img {
            width: 200px;
            margin: 50px;
            transition: all 1s;
        }
        .x:hover{
            transform: rotateX(180deg);
        }
        .y:hover{
            transform: rotateY(180deg);
        }
        .z:hover{
            transform: rotateZ(180deg);
        }
    </style>
</head>
<body>
    <div>
        <img src="images/x.png" class="x">
        <img src="images/y.png" class="y">
        <img src="images/y.png" class="z">
    </div>
</body>

5. 透视(perspective):

电脑显示屏是一个2D平面, 图像之所以具有立体感(3D效果), 其实只是一种视觉呈现, 通过透视可以实现.

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

透视原理：近大远小 ;
浏览器透视：把近大远小的所有图像，透视在屏幕上;
perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置

注：并非任何情况下需要透视效果，根据开发需要进行设置

perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素, 视距越小,效果越明显.

理解透视距离原理:
在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>3D旋转</title>
    <style>
        div {
            perspective: 500px; /*视距, 眼睛到屏幕的距离*/
        }
        img {
            width: 200px;
            margin: 50px;
            transition: all 1s;
        }
        .y:hover{
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div>
        <img src="images/y.png" class="y">
    </div>
</body>

在这里插入图片描述

6. translate3d(x,y,z)

注意:
其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值;

7. 案例:

7.1 开门效果:

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>开门大吉</title>
    <style>
        section {
            width: 450px;
            height: 300px;
            margin: 100px auto;
            background: url(images/nier.jpg) no-repeat;
            background-size: auto 100% ;
            position: relative;
            border: 1px solid #000;

            perspective: 1000px;
        }

        .door-l,
        .door-r {
            top:0;
            width: 50%;
            height: 100%;
            position: absolute;
            background: pink no-repeat;
            transition: all 1s;
            
        }
        .door-r {
            right: 0;
            border-left: 1px solid #000;
            transform-origin:right;
        }
        .door-l {
            left: 0;
            border-right: 1px solid #000;
            transform-origin:left;
        }
        .door-l::before,
        .door-r::before {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            border: 2px solid #000;
            border-radius: 50%;
            top: 50%;;
            transform: translateY(-50%);
        }
        .door-r::before {
            left: 10px;
        }
        .door-l::before {
            right: 10px;
        }

        /* 添加开门动画 */
        section:hover .door-l {
            transform: rotateY(-120deg);
            
        }

        section:hover .door-r {
            transform: rotateY(120deg);
           
        }
    
    </style>
</head>
<body>
    <section>
        <div class="door-l"></div>
        <div class="door-r"></div>
    </section>
    
</body>

8. backface-visibility

backface-visibility 属性定义当元素不面向屏幕时是否可见.

<head>
    <meta charset="UTF-8">
    <title>盒子翻转</title>

    <style>
        div {
            width: 224px;
            height: 24px;
            margin: 100px auto;

            position: relative;
        }
        
        div img {
            position: absolute;
            top: 0;
            left: 0;
            transition: all 2s;
        }
        div img:nth-child(1) {
            z-index: 1; /* qian优先显示 */
            backface-visibility: hidden;
        }
        div:hover img {
            transform: rotateY(180deg);
        }

    </style>
</head>
<body>
    <div>
        <img src="images/qian.svg" alt="">
        <img src="images/hou.svg" alt="">
    </div>
    
</body>

二十四、 animation 动画(CSS3):

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果.

语法格式：

animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写, 除了animation-play-state属性
animation-name	规定@keyframes动画的名称
animation-duration	规定动画完成一个周期所花费的秒或毫秒. 默认是0
animation-timing-function	规定动画的速度曲线. 默认是"ease"
animation-delay	规定动画合适开始. 默认是0
animation-iteration-count	规定动画被播放的次数. 默认是1
animation-direction	规定动画是否在下一周期你想播放, 默认是"normal"
animation-play-state	规定动画是否正在运行或暂停. 默认是"running"
animation-fill-mode	规定动画时间之外的状态

关于几个值, 除了名字,动画时间,延时有严格顺序要求, 其他参数随意.

@keyframes 动画名称 {
  from{ 开始位置 }  0%
  to{  结束  }  100%
}

animation-iteration-count:infinite;  无限循环播放
animation-play-state:paused;   暂停动画"

2. 多个动画节点:

body {
  background: white;
}
img {
  width: 200px;
}
.animation {
  animation-name: goback;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}
@keyframes goback {
  0%{}	/* 开始节点 */
  49%{
    transform: translateX(1000px);
  }
  55%{
    transform: translateX(1000px) rotateY(180deg);
  }
  95%{
    transform: translateX(0) rotateY(180deg);
  }
  100%{
    transform: translateX(0) rotateY(0deg);
  }
}

3. 案例:

3.1 小汽车

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>小汽车变换</title>

    <style>
        img {
                animation: car 5s infinite;
        }

        @keyframes car {
            0% {
                transform: translate3d(0,0,0)
            }
            48% {
                transform: translate3d(1000px, 0, 0);
            }
            53% {
                transform: translate3d(1000px, 0,0) rotateY(180deg);
            }
            100% {
                transform: translate3d(0,0,0) rotateY(180deg);
            }
        }

    </style>
</head>
<body>
    <div><img src="images/car.jpg" width="100px"></div>
</body>

3.2 无缝滚动

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        img {
            width: 120px;
            height: 70px;
        }
        nav {
            width: 720px;
            height: 70px;
            border: 1px solid pink;
            margin: 100px auto;
            overflow: hidden;
        }
        nav li{
            float: left;
        } 

        nav ul {
            width: 200%; /* 扩大ul */
            animation: moveing 5s linear infinite; /* 引用动画 */
        }
        /* 定义动画 */
        @keyframes moveing {
            from {
                transform: translateX(0);
            } to {
                transform: translateX(-720px);
            }
        }
        nav:hover ul {
            animation-play-state:paused;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>
            <li><img src="images/5.jpg" alt=""></li>
            <li><img src="images/6.jpg" alt=""></li>
            <!-- 将图片在复制一套 -->
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>
            <li><img src="images/5.jpg" alt=""></li>
            <li><img src="images/6.jpg" alt=""></li>
        </ul>
    </nav>
</body>

二十五、伸缩布局(CSS3):

CSS3在布局方面做了非常大的改进, 使得对块级元素的布局排列变得十分灵活, 适应性非常强, 其强大的伸缩性, 在响应式开发中可以发昏极大的作用.

主轴: Flex容器的主轴主要用来配置Flex项目, 默认水平方向.
侧轴: 与主轴垂直的轴称为侧轴, 默认是垂直方向的.
方向: 默认主轴从左向右, 侧轴从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以互换

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>Flex布局</title>
    <style>
        section {
            width: 80%;
            height: 200px;
            border: 1px solid pink;
            display: flex;
            margin: 0 auto;
        }
        section div {
            height: 100%;
        }
        section div:nth-child(1) {
            background-color: pink;
            flex: 1;
        }
        section div:nth-child(2) {
            background-color: purple;
            flex: 2;
        }
        section div:nth-child(3) {
            background-color: pink;
            flex: 3;
        }
    </style>
</head>
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
</body>

在这里插入图片描述

Flex布局的语法规范经过几年发生了很大的变化, 也给Flexbox的使用带来一定的局限性, 因为语法规范版本众多, 浏览器支持不一致, 致使Flexbox布局使用的不多;

2. 常用属性详解:

flex子项目在主轴的缩放比例, 不指定flex属性, 则不参与伸缩分配;
min-width 最小值 min-width: 280px;最小宽度不能小于280px;
max-width 最大值 max-width: 1280px最大宽度不能大于1280px;
flex-direction调整主轴方向(默认水平方向)
- flex-direction: column; 垂直排列;
- flex-direction: row; 水平排列;

3. justify-content 调整主轴对齐(水平对齐):

子盒子如何在父盒子里面水平对齐

值	描述	说明
flex-start	默认值。项目位于容器的开头	让子元素从父容器的开头开始排序但是盒子顺序不变
flex-end	项目位于容器的结尾	让子元素从父容器的后面开始排序但是盒子顺序不变
center	项目位于容器的中心	让子元素在父容器中间显示
space-between	项目位于各行之间留有空白的容器内	左右的盒子贴近父盒子，中间的平均分布空白间距
space-around	项目位于各行之前、之间、之后都留有空白的容器内	相当于给每个盒子添加了左右margin外边距

4、align-items调整侧轴对齐(垂直对齐):

子盒子如何在父盒子里面垂直对齐（单行）

值	描述	说明
stretch	默认值. 项目被拉伸以适应容器。	让子元素的高度拉伸适用父容器(子元素不给高度的前提下)
center	项目位于容器的中心	垂直居中
flex-start	项目位于容器的开头	垂直对齐开始位置上对齐
flex-end	项目位于容器的结尾	垂直对齐结束位置底对齐

5、flex-wrap控制是否换行

当子盒子内容宽度多于父盒子的时候如何处理

值	描述
nowrap	默认值.规定灵活的项目不拆行或不拆列. 不换行, 则收缩(压缩) 显示强制一行内显示
wrap	规定灵活的项目在必要的时候拆行或拆列
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序

6. flex-flow是flex-direction、flex-wrap的简写形式

flex-flow: flex-direction  flex-wrap;

白话记： flex-flow: 排列方向换不换行;

两个中间用空格

例如:

display: flex;
/* flex-direction: row;
flex-wrap: wrap;   这两句话等价于下面的这句话*/
flex-flow: column wrap;  /* 两者的综合 */

7.align-content堆栈(由flex-wrap产生的独立行) 多行垂直对齐:

align-content是针对flex容器里面多轴(多行)的情况, align-items是针对一行的情况进行排列.

必须对父元素设置自由盒属性display:flex;, 设置排列方式为横向排列flex-direction: row; 并且设置换行 flex-wrap: wrap; , 这样这个属性的设置才会起作用.

值	描述
stretch	默认值。项目被拉伸以适应容器
center	项目位于容器的中心
flex-start	项目位于容器的开头
flex-end	项目位于容器的结尾
space-between	项目位于各行之间留有空白的容器内
space-around	项目位于各行之前、之间、之后都留有空白的容器内

8. order控制子项目的排序顺序:

正序方式排序，从小到大

用css 来控制盒子的前后顺序. 用order 就可以

用整数值来定义排列顺序，数值小的排在前面。可以为负值。默认值是 0

order: 1;

二十六、BFC(Block formatting context: 块级格式化上下文):

1. 元素额显示模式:

元素的显示模式 displsy分为块级元素, 行内元素和行内块元素, 其实它还有很多其他的显示模式:

在这里插入图片描述

2. 那些元素会具有BFC的条件:

不是所有的元素模式都具有BFC
W3C规范:

display属性为 block, list-item, table的元素,或产生BFC;

同时可以发现这三个属性都是用来布局最为合理的元素, 因为它们就是用来可视化布局的;

注意其他的，display属性，比如 line 等等，它们创建的是 IFC;

BFC有着具体的布局特性:
在这里插入图片描述

有宽度和高度，有外边距margin 有内边距padding 有边框 border.

3. 什么情况下可以让元素产生BFC:

元素符合如下属性的可以出发BFC:

float属性部位none;
position为absolure或fixed;
display为inline-block, table-cell, table-caption, flex, inline-fex;
overflow不为viaible;

4. BFC元素所具有的特性:

BFC布局规则的特性:

在BFC中, 盒子从顶端开始垂直地一个接一个地排列
盒子垂直方向的距离有margin决定. 属于同一个BFC的两个相邻盒子的margin会发生重叠;
在BFC中, 每个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说，则触碰到右边缘);
BFC的区域不会与浮动盒子产生交集, 二十紧贴浮动边缘;
计算BFC的高度时, 自然也会检测浮动或定位的盒子高度;

它是一个独立的渲染区域, 只有block-level box参与, 它规定了内部的block-level box如何布局, 并且与这个区域外部毫不相干.

5. BFC的主要用途:

BFC能用来做什么?

(1) 清除元素内部浮动

只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了在这里插入图片描述

主要用到

计算BFC的高度时，自然也会检测浮动或者定位的盒子高度

(2) 解决外边距合并问题:

外边距合并的问题。

主要用到

盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了
在这里插入图片描述

(3) 制作右侧自适应的盒子问题:

主要用到:

普通流体元素BFC后, 为了和浮动元素不产生任何交集, 顺着浮动边缘形成自己的封闭上下文

在这里插入图片描述

6. BFC 总结:

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动，和外边距合并等等，因此，有了这个特性，我们布局的时候就不会出现意外情况了

二十七、优雅降级和渐进增强:

1. 什么是"优雅降级和渐进增强":

1.1 渐进增强 progressive enhancement：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

1.2 优雅降级 graceful degradation：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容.

2. 区别

渐进增强是向上兼容，优雅降级是向下兼容.

建议:
现在互联网发展很快，连微软公司都抛弃了ie浏览器，转而支持 edge这样的高版本浏览器，在很多情况下没有必要再时刻想着低版本浏览器了，而是一开始就构建完整的效果，根据实际情况，修补低版本浏览器问题.

3. 浏览器前缀:

浏览器前缀	浏览器
-webkit-	Google Chrome, Safari, Android Browser
-moz-	Firefox
-o-	Opera
-ms-	Internet Explorer, Edge
-khtml-	Konqueror

二十八、背景渐变与3D效果:

1. 背景渐变:

在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴. 比如说Photoshop.

兼容性问题很严重

语法格式：

background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；
background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....)；

2. 3D变换:

这个效果需要用到 透视、过渡、子元素
语法：

transf-style: preserve-3d;

transf-style属性是3D空间一个重要的属性, 指定嵌套元素如何在3D空间中呈现. 它的主要属性值有两个: flat和preserve-3d. 其中flat值为默认值, 表示所有子元素在2D平面呈现. preserve-3d表示所有子元素在3D空间中呈现.

<head>
    <meta charset="UTF-8">
    <title>3D旋转轮播图</title>
    <style>
        body {
            perspective: 1000px;
        }
        div {
            width: 180px;
            height: 240px;
            border: 1px solid #f00;
            margin: 100px auto;

            /* 旋转 */
            transform: rotateY(30deg);
            transform-style: preserve-3d;  /*让父盒子中子盒子以3D效果显示*/
        }
        div img {
            transform: rotateY(30deg);
            border: 1px solid #0f0;
        }

    </style>
</head>
<body>
    <div>
        <img src="images/y.png" width="180px" height="240px" alt="">
    </div> 
    
</body>

在这里插入图片描述

案例:旋转轮播图
在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>3D旋转轮播图</title>
    <style>
        body {
            perspective: 1000px;
        }

        section {
            width: 300px;
            height: 200px;
            margin: 100px auto;
            background: url(images/3.jpg) no-repeat;
            background-size: cover; /* 自动调整缩放比例 */
            position: relative;

            transform-style: preserve-3d;  /*让父盒子中子盒子以3D效果显示*/
            transition: all 5s linear;
        }
        section div {
            width: 100%;
            height: 100%;
            background: url(images/dd.jpeg) no-repeat;
            background-size: cover;
            position: absolute;
            top: 0;
            left: 0;
        }
        section:hover {
            transform: rotateY(360deg);
        }
        section div:nth-child(1) {
            transform: rotateY(0deg) translateZ(400px);
        }
        section div:nth-child(2) {
            transform: rotateY(60deg) translateZ(400px);
        }
        section div:nth-child(3) {
            transform: rotateY(120deg) translateZ(400px);
        }
        section div:nth-child(4) {
            transform: rotateY(180deg) translateZ(400px);
        }
        section div:nth-child(5) {
            transform: rotateY(240deg) translateZ(400px);
        }
        section div:nth-child(6) {
            transform: rotateY(300deg) translateZ(400px);
        }
    </style>


</head>
<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>

</body>

二十九、 CSS工具:

1. CSS W3C 统一验证工具

CssStats 是一个在线的 CSS 代码分析工具

网址是： http://www.cssstats.com/

更全面的：

W3C 统一验证工具： http://validator.w3.org/unicorn/
因为它可以检测本地文件

2. CSS 压缩

通过上面的检测没有错误，为了提高加载速度和节约空间（相对来说，css量很少的情况下，几乎没啥区别），可以通过css压缩工具把css进行压缩。

w3c css压缩 http://tool.chinaz.com/Tools/CssFormat.aspx 网速比较慢

还可以去站长之家进行快速压缩:
http://tool.chinaz.com/Tools/CssFormat.aspx

浅弋、璃鱼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
03前端学习之CSS3(2)

文章目录十四、用户界面样式：1. 鼠标样式(cursor):2. 轮廓(outline)3. 防止拖拽文本域(resize):4. 垂直对齐(vertical-align):4.1 取出图片底侧空白缝隙:十五、溢出的文字隐藏:1. 自动换行1.1 word-break:1.2 hite-space:1.3 text-overflow 文字溢出:十四、用户界面样式：所谓用户界面样式, 就是改变一...
复制链接

扫一扫