一.2D转换
转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
转换（transform）可以简单理解为变形
移动：translate 旋转：rotate 缩放：scale
1.1 二维坐标系
2D转换是改变标签在二维平面上的位置和形状的一种技术
1.2 2D转换之移动translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位
语法：
transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);
重点：
定义2D转换中的移动，沿着x和y轴移动元素 translate最大的优点：不会影响到其他元素的位置 translate中的百分比单位是相对于自身元素的translate:(50%,50%); 对行内标签没有效果
1.3 2D转换之旋转rotate
2D旋转指的是让元素在2维平面内顺时针或逆时针旋转
语法：
transform:rotate(度数)
重点：
rotate里面跟度数，单位是deg 比如 rotate(45deg) 角度为正时，顺时针，负时，逆时针 默认旋转的中心点是元素的中心点
1.4 2D转换中心点transform-origin
可以设置元素的中心点
语法：
transform-origin:x y;
重点：
注意后面的参数x和y用空格分开 x y默认转换的中心点是元素的中心点（50% 50%） 还可以给x y设置像素或者方位名词（top bottom left right center）
1.5 2D转换之缩放scale
给元素添加上这个属性就能控制它放大还是缩小
语法：
transform:scale(x,y);
注意：
注意其中的x和y用逗号分隔 transform:scale(1,1)； 宽和高都放大了一倍，相当于没有放大 transform:scale(2,2)； 宽和高都放大了2倍 transform:scale(2)； 只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2); transform:scale(0.5,0.5)； 缩小 scale缩小最大的优势：可以设置转换中心点缩小，默认以中心点缩放的，而且不影响其他盒子
1.6 2D转换综合写法
注意：
同时使用多个转换，其格式为：transform:translate()rotate()scale()… 等 其顺序会影响转换的效果 当我们同时有位移和其他属性的时候，要将位移放到最前
1.7 2D 转换总结
转换transform 我们简单理解就是变形有2D和3D之分 我们暂且学了三个分别是位移旋转和缩放 2D移动translate(x，y)最大的优势是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的 可以分开写比如translateX(x)和translateY(y) 2D旋转rotate(度数)可以实现旋转元素度数的单位是deg 2D缩放sacle(x，y)里面参数是数字不跟单位可以是小数最大的优势不影响其他盒子 设置转换中心点transform-origin:x y;参数可以百分比、像素或者是方位名词 当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前
二、CSS3 动画
动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果
2.1 动画的基本使用
制作动画分为两步：
先定义动画 再使用（调用）动画
2.1.1 用keyframes定义动画（类似定义类选择器）
@keyframes 动画名称 {
0% {
width: 200px;
}
100% {
width:200px;
}
}
动画序列
0%是动画的开始，100%是动画的完成。这样的规则就是动画序列 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果 动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数 请用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%
2.1.2 元素使用动画
div {
width:200px;
height:200px;
background-color:aqua;
margin:100px auto;
调用动画
animation-name:动画名称；
持续时间
animation-duration:持续时间
}
2.2 动画常用属性
属性描述@keyframes规定动画animation所有动画属性的简写属性，除了animation-play-stateanimation-name规定动画名称（必须的）animation-duration规定动画完成一个周期所花费的秒或毫秒，默认是0（必须的）animation-timing-function规定动画的速度曲线，默认是easeanimation-delay规定动画何时开始，默认是0animation-iteration-count规定动画被播放的次数，默认是1，还有infiniteanimation-direction规定动画是否在下一周期逆向播放，默认是normal,alternate逆播放animation-play-state规定动画是否正在运行或暂停，默认是running,还有pausedanimation-fill-mode规定动画结束后状态，保持forwards回到起始backwards
2.3 动画简写属性
animation ：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态
animation：myfirst 5s linear 2s infinite alternate
动画名称 持续时间 一定要写
注意：
简写属性里面不包含 animation-play-state 暂停动画: animation-play-state: puased; 经常和鼠标经过等其他配合使用 想要动画走回来,而不是直接跳回来:animation-direction : alternate 盒子动画结束后,停在结束位置: animation-fill-mode : forwards
案例——热点图案例
2.4 速度曲线细节
animation-timing-function：规定动画的曲线，默认是“ease”
值描述linear动画从头到尾的速度是相同的。匀速ease默认。动画从低速开始，然后加快，在结束前变慢ease-in动画以低俗开始ease-out动画以低俗结束ease-in-out动画以低俗开始和结束steps（）指定了时间函数中的间隔数量（步长）
案例——奔跑的熊大
有不完整和有误的地方欢迎各位小伙伴指正，一起学习！
精彩文章
您阅读本篇文章共花了：
发表评论