1. CSS3动画

1.1 过渡的缺点

transition的优点在于简单易用，但是它有几个很大的局限。

  1. transition需要事件触发，所以没法在网页加载时自动发生。
  2. transition是一次性的，不能重复发生，除非一再触发。
  3. transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有一个开始状态和结束状态。
  4. 一条transition规则，只能定义一个属性的变化，不能控制多个属性。

CSS Animation就是为了解决这些问题而提出的。

  1. .box {
  2.   /* 分别设置多个属性 */
  3.   transition: height 1s ease, width 2s linear;
  4. }

1.2 动画animate

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

ie9不支持，ie10以上才支持

属性 描述 可取值
@keyframes 规定动画。 {}
animation 所有动画属性的简写属性，除了 animation-play-state 属性。 animation: name duration timing-function delay iteration-count direction;
animation-name 规定 @keyframes 动画的名称。 字符串
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 时间带单位，s秒，ms毫秒
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 ease、ease-in 加速、ease-out减速
animation-delay 规定动画何时开始。默认是 0。 延迟时间带单位
animation-iteration-count 规定动画被播放的次数。默认是 1。 动画执行次数，可以是数字或者infinite无限次
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 normal和reverse 正常播放动画顺序和反序播放。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 running：当前动画正在运行，paused:当前动画以被停止。
animation-fill-mode 规定对象动画时间之外的状态。 none：默认值，回到动画没开始时的状态。backwards：让动画回到第一帧的状态。both: 根据animation-direction（见后）轮流应用forwards和backwards规则。

如果动画合写的语法：animation: name duration timing-function delay iteration-count direction;

案例：

  1. /* 第一步：定义关键帧 */
  2. @keyframes myfirst
  3. {
  4.   0%   {background: red; left:0px; top:0px;}
  5.   25%  {background: yellow; left:200px; top:0px;}
  6.   50%  {background: blue; left:200px; top:200px;}
  7.   75%  {background: green; left:0px; top:200px;}
  8.   100% {background: red; left:0px; top:0px;}
  9. }
  11. /* 第二步：定义动画属性 */
  12. div
  13. {
  14.   animation-name: myfirst;
  15.   animation-duration: 5s;  /*必须设置,默认0，不然没有动画*/
  16.   animation-timing-function: linear;
  17.   animation-delay: 2s;
  18.   animation-iteration-count: infinite;
  19.   animation-direction: alternate;
  20.   animation-play-state: running;
  21. }
  23. /* 第三步：执行动画 */
  24. div:hover {
  25.   animation: myfirst 5s linear 2s infinite alternate;
  26. }

播放暂停案例

  1. .box {
  2.     animation: spin 1s linear infinite;
  3.     /* 动画暂停 */
  4.     animation-play-state: paused;
  5. }
  7. .box:hover {
  8.   /* 动画执行 */
  9.   animation-play-state: running;
  10. }

关键帧的自由定制案例：

  1. .box {
  2.   animate: rainbow 1s linear;
  3. }
  4. /* 0%可以用from代表，100%可以用to代表 */
  5. @keyframes rainbow {
  6.   from { background: #c00 }  /* from == 0%*/
  7.   50% { background: orange }
  8.   to { background: yellowgreen } /*to == 100%*/
  9. }
  11. /* 如果省略某个状态，浏览器会自动推算中间状态 */
  12. @keyframes rainbow {
  13.   50% { background: orange }
  14.   to { background: yellowgreen }
  15. }
  17. @keyframes rainbow {
  18.   to { background: yellowgreen }
  19. }
  21. @keyframes pound {
  22.   from，to { transform: none; }
  23.   50% { transform: scale(1.2); }
  24. }

执行多个动画案例：

  1. /* <h1>123456789012345678901234567890</h1> */
  2. @keyframes typing { from { width: 0; } }
  3. @keyframes blink-caret { 50% { border-color: transparent; }}
  5. h1 {
  6.   font: bold 200% Consolas, Monaco, monospace;
  7.   border-right: .1em solid;
  8.   width: 16.5em; /* fallback */
  9.   width: 30ch; /* # of chars */
  10.   margin: 2em 1em;
  11.   white-space: nowrap;
  12.   overflow: hidden;
  13.   animation: typing 20s steps(30, end), /* # of steps = # of chars */
  14.               blink-caret .5s step-end infinite alternate;
  15. }

案例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8.   <style>
  9.     .box {
  10.       color: rgba(44, 209, 100, .8);
  11.       font-size: 40px;
  12.       font-weight: bolder;
  13.       text-shadow: 3px 3px 10px rgba(44, 209, 100, .4);
  14.       margin: 100px auto;
  15.       width: 300px;
  16.       text-align: center;
  17.       animation: shake 1s ease 1 normal;
  18.     }
  20.     @keyframes shake {
  21.       form {
  22.         transform: translate3d(0, -15px, 0);
  23.       }
  24.       40%, 77%, 90% {
  25.         transform: translate3d(0, -4px, 0);
  26.       }
  27.       50%, 82%, 100% {
  28.         transform: translate3d(0, 0, 0);
  29.       }
  30.     }
  31.     .box2 {
  32.       background-color: aqua;
  33.       width: 200px;
  34.       height: 200px;
  35.     }
  36.   </style>
  37.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  38. </head>
  39. <body>
  40.   <div class="box">
  41.     动画文字
  42.   </div>
  43.   <div class="box2 animated flash infinite">
  44.   </div>
  45. </body>
  46. </html>

2. 伸缩布局

由于阮一峰老师已经写过两篇关于flex布局的文章，写的真的非常好，我在这也大部分引用了阮老师的文章。阮老师的文章都是通俗易懂，而且思路非常清晰是我们前端er的学习圣地，他那自由分享的精神的确令我敬佩和赞叹。阮老师博客地址

Flex 是 Flexible Box 的缩写，意为"弹性布局"。css的display属性增加的flex值，意为：让容器的显示模式为弹性盒子。

  1. .box {
  2.   display: flex;
  3. }

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

2.1 弹性盒子的轴

容器默认存在两根轴：水平的主轴（main axis）和垂直的侧轴（cross axis）。主轴的开始位置（与边框的侧点）叫做main start，结束位置叫做main end；侧轴的开始位置叫做cross start，结束位置叫做cross end。

 
flex盒子模型

2.2 设置父容器的主轴排版方向

flex-direction属性决定主轴的方向（即项目的排列方向）。可以设置四个值：flex-direction: row | row-reverse | column | column-reverse;

  • row 代表水平向右排列子元素。默认值。
  • row-reverse 跟row相反方向排列子元素。
  • column 从上到下垂直排列子元素
  • column-reverse 垂直从下向上排列子元素
 
flex-direction
  1. .box {
  2.   display: flex;
  3.   flex-direction: row-reverse;
  4. }

2.2 设置父容器主轴子元素换行

flex-wrap属性，默认情况下，项目（子元素）都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

  1. .box{
  2.   flex-wrap: nowrap | wrap | wrap-reverse;
  3. }
  • nowrap（默认）：不换行。
  • wrap：换行，第一行在上方。
  • wrap-reverse：换行，第一行在下方。
 
flex-wrap

2.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

  1. .box {
  2.   flex-flow: <flex-direction> || <flex-wrap>;
  3. }

2.4 设置父容器的主轴的子元素排版对齐方式

justify-content属性定义了项目在主轴上的对齐方式。

  1. .box {
  2.   justify-content: flex-start | flex-end | center | space-between | space-around;
  3. }
  • flex-start（默认值）：左对齐
  • flex-end：右对齐
  • center： 居中
  • space-between：两端对齐，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
 
justify-content设置

2.5 设置父容器侧轴的元素的对齐方式

align-items属性定义项目在侧轴上如何对齐。

  1. .box {
  2.   align-items: flex-start | flex-end | center | baseline | stretch;
  3. }
  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
 
align-items

2.6 设置父容器多行子项整体垂直对齐方式

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

核心是一定是盒子内部的元素超过了盒子容器的宽度（默认）出现了换行，也就是有多行才可以。

  1. .box {
  2.   align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  3. }

属性可以取6个值：

  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。
 
align-content

2.7 设置子盒子的排序order

css3新增加order属性定义项目的排列顺序,是数值类型。数值越小，排列越靠前，默认为0。

注意此属性设置在子盒子上，浏览器自动按照order的大小排序盒子，默认都是0，如果相同的order则按照编写标签的顺序排放盒子。

  1. .child-item {
  2.   order: 1;
  3. }

2.8 设置子盒子放大占比

flex-grow属性可以直接赋值一个数值。定义了它所占的比例。默认是0，也就是不放大（即使父盒子有空隙）。

一行的子盒子同时设置flex-grow属性的话，会根据设置的值的大小按比例排放子元素。

  1. .item1 {
  2.   flex-grow: 5;
  3. }
  4. .item2 {
  5.   flex-grow: 4;
  6. }
  7. .item3 {
  8.   flex-grow: 3;
  9. }
  10. .item4 {
  11.   flex-grow: 2;
  12. }
  13. .item5 {
  14.   flex-grow: 1;
  15. }
 

2.9 设置子盒子缩小占比

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

  1. .item {
  2.   flex-shrink: <number>; /* default 1 */
  3. }

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

注意：负值对该属性无效。

 
缩小占比

2.10 设置子盒子默认占比宽度

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

  1. .item {
  2.   flex-basis: <length> | auto; /* default auto */
  3. }

它可以设为跟width属性一样的值（比如350px），则项目将占据固定空间。

 
  1. 说明：
  2. flex-basis的默认值为auto（无特定宽度值，取决于其它属性值），浏览器将超出的空间，按照各子项basis的值的比例进行空间收缩。
  4. 图例中5定义了flex-basis:400px，其余子项定义了flex-basis:200px，我们给父容器width定义为800px，5个子项相加之后即为1200px，超出父容器400px。那么这么超出的400px需要被这5个子项消化。
  6. 假定：这5个子项的比例为1:1:1:1:2，则多出来的400px要被分为6份，于是我们可以计算子项将被移除的溢出量是多少：
  8. flex-basis为400px的，被移除溢出量：400/6*2，即约等于133.33px
  10. flex-basis为200px的，被移除溢出量：400/6*1，即约等于66.67px
  12. 最后实际宽度分别为：400-133.33=266.67px, 200-66.67=133.33px
  14. flex-basis:[percentage]与[length]的计算方式类似
  16. 它可以设为跟width属性一样的值（比如350px），则项目将占据固定空间。

2.11 flex属性合写

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

  1. .item {
  2.   flex: none | [ &lt;'flex-grow'&gt; &lt;'flex-shrink'&gt;? || &lt;'flex-basis'&gt; ]
  3. }

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

2.12 设置子盒子对齐方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

  1. .item {
  2.   align-self: auto | flex-start | flex-end | center | baseline | stretch;
  3. }
 

3. 多列布局

CSS3为类似于报纸、文章、杂志那种长篇文章进行多列排版的需求，提供了多列布局的样式设置。

  • column-width 给列定义个最小的宽度。默认值为auto表示将根据column-count列的数量自动调整列宽。

  • column-count 最大列数。

  • columns 合写以上两个属性。第一个是列宽，第二个是列数。

  1. .txt-wrap {
  2.   columns: 300px 2;
  3. }

  • column-gap 是列间距，默认值normal，相当于1em。需要注意的是，如果column-gap与column-width加起来大于总宽度的话，就无法显示column-count指定的列数，会被浏览器自动调整列数和列宽

  • column-rule 用于设置列的边框，类似于border，区别是不占用任何空间，因此设了column-rule不会导致列宽的变化。另外如果边框宽度大于column-gap列间距，将不会显示边框。语法和border类似，例如column-rule: 1px solid #000;。效果见例子页面。

  • column-span 用于跨列，默认值none表示不跨列，all表示跨越所有列。例如文章标题可以设成all来跨列。

  • column-fill 用于统一列高。默认值auto各列的高度随内容自动调整，balance所有列高都设为最高的列高

下一篇内容预告：

  • web在线字体
  • css3兼容处理
  • 移动web开发基础

联系老马

对应视频地址：https://chuanke.baidu.com/s5508922.html
老马qq： 515154084
老马微信：请扫码

 
扫码加老马微信

03-移动端开发教程-CSS3新特性（下）的更多相关文章

  1. 01-移动端开发教程-CSS3新特性

    1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...

  2. 02-移动端开发教程-CSS3新特性（中）

    1. 新的背景 背景在CSS3中也得到很大程度的增强,比如背景图片尺寸.背景裁切区域.背景定位参照点.多重背景等. 1.1 background-size设置背景图片的尺寸 cover会自动调整缩放比 ...

  3. 05-移动端开发教程-CSS3兼容处理

    CSS3的标准并没有全部定稿,目前CSS3的标准分成了不同的模块,具体的标准由各个模块推动标准和定稿,标准制定的过程中,浏览器也在不断的发新的版本来兼容新的标准.浏览器有时会给一些在试验阶段或非标准阶 ...

  4. [转]深入了解 CSS3 新特性

    简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...

  5. CSS3新特性（阴影、动画、渐变、变形、伪元素等）

    CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等)   目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...

  6. css3新特性总结

    一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容 二.css3新特性 1.边框 css3的边框有如下属性: (1 ...

  7. 21、前端知识点--html5和css3新特性汇总

    跳转到该链接 新特性汇总版: https://www.cnblogs.com/donve/p/10697745.html HTML5和CSS3的新特性(浓缩好记版) https://blog.csdn ...

  8. HTML5和CSS3新特性

    1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...

  9. 新特性AAtitti css3 新特性attilax总结titti css

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

随机推荐

  1. 【NOI2008】假面舞会（图论，搜索）

    题面 Description 一年一度的假面舞会又开始了,栋栋也兴致勃勃的参加了今年的舞会.今年的面具都是主办方特别定制的.每个参加舞会的人都可以在入场时选择一个自己喜欢的面 具.每个面具都有一个编号 ...

  2. Luogu3527：[POI2011]MET-Meteors

    题面 Luogu Sol 整体二分 比较简单,当练手题 每次树状数组统计 # include <bits/stdc++.h> # define RG register # define I ...

  3. 记录一个前端bug的解决过程

    人在江湖飘,哪能不挨刀. 我挨了重重一bug.严格来讲这可能是我职业生涯以来的首个悲惨经历,因为凭我的知识储备和经验,基本上任何可重现的bug都是可解的.然而这个bug却困扰了我三个月之久,它具有以下 ...

  4. Sharepoint对List增删改操作

    在sharepoint的开发过程中,用得最多的,就是获取sharepoint的列表数据,以及对其进行一系列的增删改查等操作,这里主要是记录一些常用的操作,通过对象模型方式对数据进行增删改查. 由于sh ...

  5. python实现一般最小二乘系统辨识方法

    问题: 对于一个未知参数的系统,往往需要用到系统辨识的方法,例如对于一个单输入单输出系统: Z(k)+a1*Z(k-1)+a2*Z(k-2)=b1*U(k-1)+b2*U(k-2)+V(k) 其中:V ...

  6. Linux/Unix 资源

    Linux/Unix笔记本 初窥Linux 之 我最常用的20条命令 Linux Shell脚本教程

  7. python全栈开发-Day7 字符编码总结

    python全栈开发-Day7 字符编码总结 一.字符编码总结 1.什么是字符编码 人类的字符--------->翻译--------->数字 翻译的过程遵循的标准即字符编码(就是一个字符 ...

  8. MySQL聚集索引和非聚集索引

    索引分为聚集索引和非聚集索引,mysql中不同的存储引擎对索引的底层实现可能会不同,这里只关注mysql的默认存储引擎InnoDB. 利用下面的命令可以查看默认的存储引擎 show variables ...

  9. 快速失败机制--fail-fast

    fail-fast 机制是Java集合(Collection)中的一种错误机制.当多个线程对同一个集合的内容进行操作时,就可能会产生fail-fast(快速失败)事件.例如:当某一个线程A通过iter ...

  10. Axis1.4之即时发布服务

    下载axis1.4开发包,解压开发包,将webapps目录下的axis文件夹拷贝到tomcat的webapps目录下.启动tomcat,在浏览器输入http://localhost:8080/axis ...