动画，字体，弹性布局

2019-10-11

字数统计: 1.1k字 | 阅读时长: 4分

阅读量 45

过渡

从一种状态过渡到另一种状态
transition: 过渡属性持续时间运动曲线延迟时间；

transition-property:过渡的属性
所有的属性都过渡使用：all 代替
transition-duration:持续时间
transition-timing-function:运动曲线
：linear 匀速 ease-in-out ：先加速后减速
transition-delay: 延迟时间

谁过渡加给谁

2d变换：transform

缩放：scale(水平比例，垂直比例);
只写一个值等比例缩放
小于1：缩小
大于1：放大

位移：translate(水平位移，垂直位移);
只写一个值 :水平位移，垂直位移为0

可以用百分比：相对于自身的宽度进行移动

让定位的盒子居中:
transform:translate(-50%); 等价于：margin-left:-150px;

旋转：rotate(45deg);
正值：顺时针
负值：逆时针

变换中心：transform-origin
默认几何中心
自定义： left right center top bottom ,40px 30px;

3d变换

rotateX(30deg) 绕着x旋转30deg
rotateY(30deg) 绕着y旋转30deg
rotateZ(30deg) 绕着z旋转30deg
translateX(30px) 沿着x轴移动30px
translatey(30px) 沿着y轴移动30px
translatez(30px) 沿着Z轴移动30px( 必须给父盒子加透视)

透视：

加给变换元素的父盒子， 设置的是用户眼睛和屏幕的距离；
只是视觉上的呈现，不是正真的3d
perspective:1000px;

transform-style:preserve-3d;
加给变换元素的父盒子，让子盒子存在三维空间中，保持3d效果
flat:默认值（让子盒子被扁平化）
backface-visibility:hidden; 背面不可见

skew(30deg,30deg);  2d变换 -倾斜

css3中获取自定义属性的值：content:attr(data-text);

动画：

定义：

@keyframes 动画名{
            0%{

            }

            100%{

            }

            或者
            from{}
            to{}
        }

动画调用：
animation: 动画名称动画时间执行次数运动曲线延迟执行结束后状态是否反向；

 inifnite: 无限次
alternate: 反向执行
forwards: 保持结束后的状态
backwards: 保持动起开始前的状态
steps(5): 让动画分步执行；

动画详细属性：

 animation-name:动画名称
animation-duration:持续时间
animation-iteration-count:执行次数
animation-timing-function:运动曲线
animation-fill-mode:结束状态
animation-direction: 动画方向
animation-delay: 延迟时间

多列：

-webkit-column-count:列数
-webkit-column-rule:分割线样式
-webkit-column-width:列宽
-webkit-column-gap:列间距
-webkit-column-span:跨列 all 跨所有列

伸缩布局：

`display:flex;`

主轴，侧轴（垂直于主轴的方向）

主轴方向：flex-direction:
    row  row-reverse
    column column-reverse

主轴方向上的对齐方式：justify-content
    flex-start: 主轴开始
    flex-end: 主轴结束
    center: 居中
    space-around:平分
    sapce-between：两端对齐 中间平均


侧轴对齐方式：
      flex-start: 侧轴开始
      flex-end: 侧轴结束
      center: 居中
      baseline:基线对齐
      streth:拉伸

子盒子伸缩比例：
    flex: 1;
    如果某盒子不参与划分比里， 不写flex属性即可

字体格式

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

TureTpe(.ttf)格式

.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；

OpenType(.otf)格式

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；

Web Open Font Format(.woff)格式

woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；

Embedded Open Type(.eot)格式

.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；

SVG(.svg)格式

.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；

图标字体

优点：
1、将所有图标打包成字体库，减少请求；
2、具有矢量性，可保证清晰度；
3、使用灵活，便于维护；

使用步骤：
1、引入字体包
2、申明字体：告诉浏览器去哪找字体
3、定义类名
4、在结构中写图标的编码，给标签添加类名

伪元素中：
 ----> content:"\e628";

鼠标滚轮事件：
onmousewheel=function(){}

过渡

2d变换 ：transform