星城哈哈

# CSS3:动画() animate

过渡: 从一个状态(开始)到另一个状态(结束)

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

# 1.定义动画:

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

# 2.引用动画:

animation: 动画名称 动画时间 运动曲线  何时开始 播放次数 是否反方向 结束状态(与播放次数冲突)
animation: xcooo 2s linear 0s infinite alternate  forwards(与播放次数冲突)
1
2

  • 动画名 和 动画时间必须写

  • 简写属性不包含 animation-play-state

  • 想要动画走回来, 而不是直接跳回来 animation-direction: alternate

  • 结束停留状态 animation-fill-mode: forwards(与播放次数冲突)

    ​

# 3.CSS3动画属性

下面的表格列出了 @keyframes 规则和所有动画属性:

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

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

animation-iteration-count: infinite;  无限循环播放
animation-play-state: paused;  暂停动画
animation-direction: alternate 交替执行 逆播放
animation-fill-mode: forwards 动画结束后，元素样式停留在 100% 的样式
1
2
3
4

animation-fill-mode 设置动画在等待或者结束的时候的状态

  • forwards：动画结束后，元素样式停留在 100% 的样式
  • backwards： 在延迟等待的时间内，元素样式停留在 0% 的样式 (默认值)
  • both： 同时设置了 forwards和backwards两个属性值

animation-timing-function: 规定动画的速度曲线, 默认是"ease";

  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • steps() 指定了时间函数中的间隔数量(步长) 就是分几步来完成我们的动画, 写了steps 就不要写ease linear 了

# 4.动画库animate.css

封装了常见的有意思的小动画 发疯似的建议看官网来学习使用

官网 (opens new window)

中文 (opens new window)

# 4.1.使用步骤

  1. 引入css文件

    <head>
  <link rel="stylesheet" href="animate.min.css">
</head>
    1
    2
    3

  2. 给元素添加对应的class

    <h1 class="animated infinite bounce">快来看看我</h1>
    1

    简单解读： animated 必须添加的class infinite 无限播放 bounce 弹跳动画的效果，可以查官网自己选择喜欢的

    ​

# 5.web字体

开发人员可以为自己的网页指定特殊的字体, 无需考虑用户电脑上是否安装了此特殊字体, 从此把特殊字体处理成图片的时代便成为了过去. 它的支持程度比较好, 甚至IE低版本浏览器也支持

# 1.字体格式

​ 不同浏览器所支持的字体格式是不一样的, 我们有必要了解一下有关字体格式的知识

# 2.TureTpe(.ttf)格式

​ .ttf字体是windows和mac最常见的字体, 是一种RAW格式, 支持这种字体的浏览器有IE9+, Firefox3.5+, Chrom4+, Safari3+, Opera10+, IosMobile, Safari4.2+

# 3.OpenType(.otf)格式

​ .otf字体被认为是一种原始的字体格式, 其内置在Ture Type的基础上, 支持这种字体的浏览器有Firefox3.5+, Chrom4+, Safari3+, Opera10+, IosMobile, Safari4.2+

# 4.Web Open Font Format(.woff)格式

​ .woff字体是web字体中最佳格式, 他是一个开放的TrueType/OpeenType的压缩版本, 同时支持元素包的分离, 支持这种字体的浏览器有IE9, Firefox3.5, Chrom6+, Safari3.6+, Opera11.1+

# 5.Embedded Open Type(.eot)格式

​ .eot字体是基于SVG字体渲染的一种格式, 支持这种字体的浏览器有Chrom4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+

# 6.SVG(.svg)格式

.svg 字体是基于 SVG 字体渲染的一种格式, 支持这种字体的浏览器有chrom4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+

开发人员可以为自己的网页指定特殊的字体, 无需考虑用户电脑是否安装了此特殊字体

第一步: 使用font-face声明字体

	@font-face {  /*电脑中没有的字体, 我们需要声明*/
  		font-family:'xcooo';
   	 	src: url('fonts/webfont.eot');
  		src: url('fonts/webfont.eot?#iefix') format('embedded-opentype'),
     	url('fonts/webfont.ttf') format('truetype'),
      	url('fonts/webfont.woff') format('woff'),
     	url('fonts/webfont.svg?#webfont') format('svg');
	}
1
2
3
4
5
6
7
8

第二步: 定义使用webfont的样式

	.myfont {
  		font-family:"xcooo" !important;
	}
1
2
3

第三步: 为字体加上对应的样式

<i class="webfont">星城哈哈</i>
1

# 6.字体图标

总体来说, 字体图标按照如下流程:

1.UI人员设计字体图标效果图 (svg)
2.前端人员上传生成兼容性字体文件包
3.前端人员下载兼容字体文件包到本地
4.把字体文件包引入到HTML页面中
1
2
3
4

# 1).设计字体图标

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

之后保存为svg格式, 然后给我们前端人员就好了.

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

# 2).上传生成字体包

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

icomoon字库

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

推荐网站: http://icomoon.io

阿里icon font字库

http://www.iconfont.cn

这是是阿里妈妈M2UX的一个icon font字体图标字库, 包含了淘宝图标库和阿里妈妈图标库. 可以使用过AI制作图标上传生成.

fontello

http://fontello.com

在线定制你自己的ico font字体图标字库, 也可以直接从GitHub下载整个图标集, 该项目也是开源的.

# 3).下载兼容字体包

上传完毕, 网站会给我们把UI做的svg图片转换为我们的字体格式, 然后下载下来就好了.

当然, 我们不需要自己专门的图标, 是想网上找几个图标使用, 以上2步可以直接省略了, 直接到刚才的网站上找喜欢的下载使用把.

# 4).字体引入到HTML

首先把下载的fonts里面的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;
}
1
2
3
4
5
6
7
8
9
10

第二步: 给盒子使用字体

span {
  font-family:"icomoon";
  font-style: normal;
  color: #fff;
}
1
2
3
4
5

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

span::before {
  content: "\e990";
}
或者
<span></span>
1
2
3
4
5

追加新图标到原来库里面

如果工作中, 原来的字体图标不够用了, 我们需要添加新的字体图标, 但是原来的不能删除. 继续使用, 此时我们需要这样做

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

# 7.多列布局

​ CSS3新出现的多列布局(multi-colunm)是传统HTML网页中块状布局模式的有力扩充. 这种新语法能够让web开发人员轻松单独让文本呈现多列显示. 我们知道, 当一行文字太长时, 读者读起来比较费劲, 有可能读错行或读串行; 人们的视点从文本的一端移到另一端, 然后换到下一行的行首, 如果眼球浮动过大, 他们的注意力就会减退, 容易读不下去, 所以, 为了最大效率的使用大屏幕显示器, 页面设计需要限制文本的宽度, 让文本按多列呈现, 就像报纸上的新闻排版一样

1.常用属性

a) column-count: 属性设置列的具体字数

b) column-width: 属性控制列的宽度

c) column-gap: 两列之间的缝隙间隔

d) column-rule: 规定列之间的宽度, 样式和颜色

e) column-span: 规定元素应横跨多少列(n: 指定跨 n 列, all: 跨所有列)

# 8.伸缩布局(CSS3)

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

主轴: Flex容器的主轴主要用来配置Flex项目, 默认是水平方向

侧轴: 与主轴垂直的轴称作侧轴, 默认是垂直方向的

方向: 默认主轴从左往右, 侧轴默认从上到下

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

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

# 各属性详解

1.flex子项目在主轴的缩放比例, 不知道flex属性, 则不参与伸缩分配

display: flex;  /*伸缩布局模式, 父盒子添加 flex*/

min-width 最小值  min-width: 280px;  最小宽度不小于280px
max-width 最大值  max-width: 1280px;  最大宽度不大于1280px
1
2
3
4

  • 将父容器设置了伸缩盒子, 子元素默认为伸缩项 float

    ​

2.justify-content调整主轴对齐 (水平对齐 给父亲添加)

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

3.align-items调整侧轴对齐 (垂直对齐)

子盒子如何在父盒子里面垂直对齐(单行)

值 描述 白话文
stretch 默认值. 项目被拉伸以适应容器 让子元素的高度拉伸适用父容器(子元素不给高度的前提下)
center 项目位于容器的中心 垂直居中
flex-start 项目位于容器的开头 上对齐
flex-end 项目位于容器的结尾 下对齐
baseline 文本基线

设置单个元素在侧轴方向上的对齐方式

align-self: flex-end;
1

4.flex-wrap控制是否换行

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

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

5.flex-direction调整主轴方向 (默认为水平方向, 给父盒子添加)

flex-direction: row; /*水平排列, 默认*/
flex-direction: column; /*垂直排列*/

row:
水平方向>>主轴
垂直方向>>侧轴

column::
垂直方向>>主轴
水平方向>>侧轴
1
2
3
4
5
6
7
8
9
10

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

flex-flow: flex-direction flex-wrap
1

  • 白话记: flex-flow: 排列方向 换不换行(默认不换行);

    ​

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控制子项目的排列顺序, 正序方式排序, 从小到大

order: 用CSS来控制盒子的前后顺序

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

order: 1;
1

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

a) flex-grow: 可以扩展子元素的宽度(定义剩余的空间比例)

​ 比例值计算: 当前空间的flex-grow/所有兄弟元素的flex-grow的和

​ 默认值是0: 说明子元素并不会取占据剩余的空间

b) flex-shrink: 定义收缩比例, 通过设置的值计算收缩空间(定义不够的空间比例)

​ 比例值计算: 当前空间的flex-shrink/所有兄弟元素的flex-shrink的和

​ 默认值为1

c) flex: [number], 这个语法指定了一个数字, 代表了这个伸缩项目该占用的剩余空间比例

.left {
	flex: 1;  /*让当前伸缩项占据父容器剩余空间*/
	height: 500px;
	background-color: red;
}
1
2
3
4
5

d) flex: auto : 属性值被设为 auto 的伸缩项目, 会根据主轴自动伸缩以占用所有剩余空间

此知识点重在理解, 要明确找出主轴, 侧轴, 方向, 各属性对应的属性值

# H5+C3知识点比较零散独立

上次更新: 2020/10/23 下午7:23:27

← CSS3:sticky 粘性布局 →