rotateX()沿着x轴旋转,
perspective:视距,给父元素加,视距越小,展示效果越明显 眼睛到物体的距离
translateZ()物体往屏幕方向移动的距离,translateZ()越大,看到的物体越大,translateZ()为负值,距离眼睛越来越远,物体越来越小,不能用百分比
transform-style:perserve-3d; 给父亲添加,让子盒子在父盒子中有相对的旋转空间。
transform-style: flat; 平面模式 - 不开启3维立体环境; preserve-3d; 3维立体环境;
设置动画名:animation-name:xxx;
设置动画播放的持续时间 animation-duration:3s
设置动画的速度曲线:animation-timing-function:linear 匀速; ease: 慢-快-慢 默认值;ease-in: 慢-快;ease-out: 快-慢;ease-in-out: 慢-快-慢;
动画播放延迟时间animation-delay: 0s;
设置动画播放的循环次数 animation-iteration-count: 2; infinite 为无限循环
animation-direction: alternate 来回交替
动画等待或者结束的状态
设置动画在等待或者结束的时候的状态 animation-fill-mode : forwards:动画结束后,元素样式停留在 100% 的样式;
backwards: 在延迟等待的时间内,元素样式停留在 0% 的样式;
both: 同时设置了 forwards和backwards两个属性值;
控制 播放/暂停 animation-play-state
:running 播放 ;paused 暂停
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 动画等待或者结束的状态;
section:大盒子,等同于div
动画:无需触发直接执行,过渡需要触发才执行
动画 :要设置关键帧
div {
animation-name: la;
animation-duration: 2s;
}
@keyframes la{
0%{
transform:translate(0,0);
}
100%{
transform:translate(500px,600px);
}
}
@keyframes la{
from{
transform:translate(0,0);
}
to{
transform:translate(500px,600px);
}
}
公共样式:总是后面覆盖前面的
div {
transform:rotate(30deg);
}
div nth-child(1){
transform: rotate(30deg) translateX(300PX);
}
translateY(-50%) 反向走一半 translateY(-100%)反向走自身的长度
transition:step()
js中 s.style.transform='rotate('+(ss*6)+'deg)',加引号
获取当前时间 var date=new Date();
获取当前毫秒数 var haomiao=date.getMilliseconds();
获取当前的秒数 var ss=date.getSeconds();
获取当前的分钟数 var mm=date.getMinutes();
获取当前的小时数 var hh=date.getHours();
1分 1秒:表盘旋转6度 1小时:旋转30度;
不需要无限循环,删掉无限循环
多列布局:cloumn-count:分列数;
cloumn-rule:dashed 3px red;设置分割线
cloumn-gap:设置列间隙l
cloumn-width:设置宽度;取大优先
如果人为设置宽度更大,就选择人为设置的宽度,如果默认宽度大,就选择默认宽度
cloumn-span:规定元素应该横跨多少列(n指横跨n列);
应用:瀑布流的做法