transition 过渡 transform 2D，3D 挪动盒子的地位： 定位 盒子的外边距 2d转换挪动 一、2D 转换（transform） 是CSS3中具备颠覆性的特色之一，能够实现元素的位移，旋转，缩放等成果 旋转：rotate挪动：translate 缩放：scale 1.挪动：translate（可跟px，%）(对行内元素是有效的比方span) %是盒子本身的宽高度 语法： transform:translate(x,y);合在一起写（上面是离开写） transform:translateX(n); transform:translateY(n); 2.旋转rotateo 语法： transform:rotate(度数（deg）); 重点 1.rotate外面跟度数，单位deg比方rotate(45deg) 2.角度为正时，顺时针，负时，为逆时针 3.默认旋转的中心点是元素的中心点 2.1.设置转换中心点transform-origin 语法： transform-origin:(x,y) 重点： 1.留神前面的参数x和y用空格隔开 2.x y默认转换的中心点是元素的中心点（50% 50%） 3.还能够给x y 设置像素或者方位名词（top bottom left right center） 3.缩放：scale 语法： transform:scale(x,y); 留神： 1.留神其中的x和y用逗号分隔 2.transform:acale(1,1)：宽和高都放大一倍，绝对于没有放大 3.transform:acale(2,2)：宽和高都放大了2倍 4.transform:acale(2)：只写了一个参数，第二个参数则和第一个参数一样，相当于scale(2,2) 5.transform:acale(0.5,0.5)：放大 6.scale缩放最大的劣势：能够设置转换中心点缩放，默认以中心点缩放的，而且不影响其余盒子 综合写法 位移要放在最后面 transform:translate(10px,10px) rotate(180deg) scale(1.2) ; 动画animation 制作动画应用步骤 一.先定义动画 二.在应用（调用）动画 1.先定义动画-应用keyframes定义动画（相似定义类选择器） @keyframes 动画名称{ 0%{} 100%{} } 动画序列： 1.0%是动画的开始，100%是动画的完结，这样的规定就是动画序列 2.在@keyframes中规定某项css款式，就能创立由以后款式逐步改为新款式的动画成果 3.动画是使元素从一种款式逐步变动为另一种款式的成果，您能够扭转任意多的款式任意多的次数 4.请用百分比来规定变动产生的工夫，或用关键词"form"和"to"，等同于0%和100% 二.在应用（调用）动画 div{ width:150px; height:150px; background-color: pink; 调用动画 animation-name:动画名称; 持续时间 animation-auration:持续时间; } div{ width:150px; height:150px; background-color: pink; /*动画名称 */ animation-name:mycartoon; /*持续时间*/ animation-duration: 3s; /*静止曲线 linear匀速*/ animation-timing-function: ease-in-out; /*何时开始(1秒后开始)*/ animation-delay: 1s; /*反复次数 iteration反复的 conut 次数 infinite有限*/ /*animation-iteration-count: infinite;*/ /*是否反方向播放 默认normal 如果想要反方向就写alternate*/ /*animation-direction:alternate; */ /*动画完结后的状态，默认是backwards,回到起始状态，咱们能够让他停留在完结状态forwards*/ animation-fill-mode: forwards; } div:hover{ /*鼠标通过div让这个div进行动画，鼠标来到就持续动画 */ animation-play-state:paused; } animation简写 animation:动画名称 持续时间 静止曲线 何时开始 播放次数 是否反方向 动画起始或者借完结状态 步数 animation:mycartoon 3s linear 0s infinite alternate forwards steps() ; 1.简写属性外面不蕴含animation-play-state 2.暂停动画：animation-play-state:paused; 常常和鼠标通过等其余配合应用 3.想要动画走回来，而不是间接跳回来animation-direction:alternate; 4.盒子动画完结后，停在完结地位：animation-fill-mode: forwards; 速度曲线 animation-timing-function:规定动画的速度曲线，默认是ease 值 形容 linear 动画从头到尾的速度是雷同的，匀速 ease 默认，动画以低速开始，而后放慢，在完结前变慢 ease-in 动画以低速开始 ease-out 动画以低速完结 ease-in-out 动画以低速开始和完结 steps() 指定了工夫函数中的时隔数量（步长）