过渡,动画
过渡
过渡是css3中具有颠覆性的特征之一,可以实现元素不同状态间的平滑过渡,经常用来制作动画效果
transition-property设置过渡属性
transition-duration设置过渡时间
transition-timing-function 设置过渡速度
transition-delay设置过渡延时
2D转换
- 移动translate(x,y)可以改变元素的位置,x,y可为负值
- 移动的位置相当于自身原来的位置
- y轴正方向朝下
- 可以设置具体像素值,也可以设置百分比,相当于自身的宽度和高度的百分比。
- 缩放scale(x,y)可以对元素进行水平方向和垂直方向的缩放,x,y的值可以为小数。
- 旋转rotate(deg)
- 可以对元素进行旋转,正值为顺时针,负值为逆时针。
- 倾斜skew(deg,deg)
- 可以使元素按一定的角度进行倾斜,可以为负值,第二个参数不写,默认为0.
注意:可以同时使用多个转换,但顺序会影响转换的效果。
3D转换
辅助属性:perspective
设置给父元素,作用于所有3d转换的子元素。
perserve-3d:保留3D空间
- backface-visibility:设置元素背面是否可见。
动画
- 必要元素:
- 通过@keyframes指定动画序列;
- 通过百分比将动画序列分割成多个节点;
- 在各节点中分别定义各属性
- 通过animation将动画应用于相应元素;
- 关键属性
- animation-name设置动画序列名称
- nimation-duration动画持续时间
- animation-delay动画延时时间
- animation-timing-function动画执行速度,linear、ease等
- animation-play-state动画播放状态,running、paused等
- animation-direction动画逆播,alternate等
- animation-fill-mode动画执行完毕后状态,forwards、backwards等
- animation-iteration-count动画执行次数,inifinate等
- steps(60) 表示动画分成60步完成
伸缩布局
主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向
侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的
方向:默认主轴从左向右,侧轴默认从上到下
主轴和侧轴并不是固定不变的,通过flex-direction可以互换。
1、必要元素:
a、指定一个盒子为伸缩盒子 display: flex
b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction
c、明确主侧轴及方向
d、可互换主侧轴,也可改变方向
2、各属性详解
a、flex-direction调整主轴方向(默认为水平方向)
b、justify-content调整主轴对齐
c、align-items调整侧轴对齐
d、flex-wrap控制是否换行
e、align-content堆栈(由flex-wrap产生的独立行)对齐
f、flex-flow是flex-direction、flex-wrap的简写形式
g、flex子项目在主轴的缩放比例,不指定flex属性,则不参与伸缩分配
h、order控制子项目的排列顺序,正序方式排序,从小到大
字体格式
不同浏览器所支持的字体格式是不一样的,我们有必要了解一下有关字体格式的知识。
1、TureType(.ttf)格式
.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+;
2、OpenType(.otf)格式
.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+;
3、Web Open Font Format(.woff)格式
woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+;
4、Embedded Open Type(.eot)格式
.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有IE4+;
5、SVG(.svg)格式
.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+;
更多字体可以参考:
更多字体
字体图标
常见的是把网页常用的一些小的图标,借助工具帮我们生成一个字体包,然后就可以像使用文字一样使用图标了。
优点:
1、将所有图标打包成字体库,减少请求;
2、具有矢量性,可保证清晰度;
3、使用灵活,便于维护;
Font Awesome 使用介绍
http://fontawesome.dashgame.com/
定制自已的字体图标库
http://iconfont.cn/
https://icomoon.io/
SVG素材
http://www.iconsvg.com/