CSS暂且就先学到3D吧,要开始学习JS了
CSS新特性
CSS盒子模型
CSS3中可以通过
box-sizing
来指定盒子模型;
box-sizing:content-box
盒子大小为width+padding+border
(以前默认)box-sizing:border-box
盒子大小为width
(不会撑大盒子)
其他特性(了解)
CSS3滤镜filter
filter: 函数() ;
例如:filter:blur(5px); blur
模糊处理,数值越大越模糊
CSScalc
函数
calc()
此CSS函数在声明CSS属性值时执行一些计算
width :calc (100% - 80px);
CSS过渡
过渡(transition),CSS过渡动画
transition : 要过渡的属性 花费时间 运动曲线 何时开始;
多个属性,利用逗号进行分割
- 属性:想要变化的css属性,宽度高度 背景颜色 内外边距都可以。所有属性过渡all;
- 花费时间:单位是秒(必须写单位)
- 运动曲线:默认是ease(可以省略)
- 何时开始:单位是秒(必须写单位) 可以设置延迟触发时间 默认是0s(可以省略)
CSS3 2D转换
转换(tranform) 是CCS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放
- 移动:transale
- 旋转:rolate
- 缩放:scale
移动
transform : translate(x,y);
或者分开写
transform : translateX(n);
- 不会影响其他元素的位置
- 对行内标签没有效果
旋转
transform : rotate(度数)
- rotate里面是度数,单位是
deg
- 角度为正时顺时针,负逆时针
- 旋转的中心点是元素的中心点
设置旋转点
1.可以跟方位名词 transform-origin: left bottom; 2. 默认的是 50% 50% 等价于 center center 3. 可以是px 像素 transform-origin: 50px 50px;
缩放
transform: scale(x,y);
- x,y逗号分隔
- 只写一个参数,直接就是倍数
- scale缩放优势:可以设置转换中心点缩放,默认中心点,而且不影响其他盒子
2D综合变换
我们同时有位移和其他属性,我们需要把位移放到最前面
transform: translate(150px, 50px) rotate(180deg) scale(1.2);
CSS动画
动画(animation) 是CSS中具有颠覆性的特征之一,可通过设置多个节点来精准控制一个或一组动画,常用于实现复杂的动画效果
相比于过渡,动画可以实现更多变化,更多控制,连续自动播放等
动画的基本使用
keyframes
定义动画
@keyframes move {
/* 开始状态 */
0% {
transform: translateX(0px);
}
/* 结束状态 */
100% {
transform: translateX(1000px);
}
}
调用动画
/* 2. 调用动画 */
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
动画属性
div {
width: 100px;
height: 100px;
background-color: pink;
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 2s;
/* 运动曲线 */
animation-timing-function: ease;
/* 何时开始 */
animation-delay: 1s;
/* 重复次数 iteration 重复的 conut 次数 infinite 无限 */
animation-iteration-count: infinite;
/* 是否反方向播放 默认的是 normal 如果想要反方向 就写 alternate */
animation-direction: alternate;
/* 动画结束后的状态 默认的是 backwards 回到起始状态 我们可以让他停留在结束状态 forwards */
animation-fill-mode: forwards;
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: move 2s linear 0s 1 alternate forwards;
/* 前面2个属性 name duration 一定要写 */
animation: move 2s linear alternate forwards;
/*动画暂停*/
animation-play-state: paused;
}
速度曲线细节
animation-timing-function:
规定动画的速度曲线,,默认是“ease”
值 | 描述 |
---|---|
linear | 动画线性匀速 |
ease | 默认,低速开始,加快,结束前减速 |
ease-in | 动画以低速开始 |
ease-out | 动画以低速结束 |
ease-in-out | 低速开始和结束 |
steps() | 指定了时间函数中的间隔数量(步长) |
3D转换
3D移动
transform: translateX(100px);
transform: translateY(100px);
transform: translateX(100px) translateY(100px) translateZ(100px);
/* 1. translateZ 沿着Z轴移动 */
/* 2. translateZ 后面的单位我们一般跟px */
/* 3. translateZ(100px) 向外移动100px (向我们的眼睛来移动的) */
/* 4. 3D移动有简写的方法 */
transform: translate3d(x,y,z);
/* transform: translate3d(100px, 100px, 100px); */
/* 5. xyz是不能省略的,如果没有就写0 */
透视
perspective
在2D平面产生近大远小视觉立体,二维效果
透视也就是视距,眼睛到屏幕的距离
透视写在被观察的元素的父盒子上面
3D旋转
transform: rotateZ(180deg);
transform: rotate3d(x,y,z,deg); x,y,z使用01选中,deg代表旋转角度
3D呈现
transform-style : flat | preserve-3d
- 控制子元素是否开启三维立体环境
flat
:默认子元素不开启3D;preserve-3d
:子元素开启立体空间- 代码给父级,影响子盒子
可以留下你的信息哦(去Github_issues)😀😀😀
GitHub Issues