CSS3新特性
滤镜filter
将模糊或颜色偏移等图形效果应用于元素.
filter: 函数();
blur(): 模糊处理, 数值越大越模糊.
calc函数
calc(): 在声明css属性值时执行一些计算.
括号里面可以使用 + - * / 来进行计算.
过渡
我们可以在不使用flash动画或js的情况下,当元素从一种样式变换为另一种样式时为元素添加效果.
过渡动画: 是从一个状态渐渐过渡到另一个状态.
经常和hover一起搭配使用.
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
-
属性: 想要变化的css属性, 宽高 / 背景颜色 / 内外边距都可以. 如果想要所有的属性都变化过渡, 写一个all就可以.
-
花费时间: 单位是秒(必须写单位), 比如0.5s.
-
运动曲线: 默认是ease(可以省略).
-
何时开始: 单位是秒(必须写单位), 可以设置延迟触发时间, 默认是0s(可以省略).
2D转换
转换可以实现元素的位移 / 旋转 / 缩放等效果
- 移动: translate
- 旋转: rotate
- 缩放: scale
2D转换是改变标签在二维平面上的位置和形状的一种技术.
移动
2D移动是2D转换里面的一种功能, 可以改变元素在页面中的位置, 类似定位.
语法:
transform: translate(x,y);或者分开写
transform: translateX(n);
transform: translateY(n);
- 定义2D转换中的移动, 沿着X和Y轴移动的元素
- translate最大的优点: 不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
- 对行内标签没有效果
让一个盒子水平垂直居中:
div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
旋转
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转.
语法:
transform: rotate(度数);
- rotate里面跟度数, 单位是deg, 比如rotate(45deg)
- 角度为正时, 顺时针, 负时, 为逆时针
- 默认旋转的中心点是元素的中心点
三角下拉键:
div::after{
content: "";
width: 15px;
height: 15px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
}
转换中心点: transform-origin
语法:
transform-origin: x y;
- 注意后面的参数x和y用空格隔开
- x y默认旋转中心点是元素的中心点
- 还可以给x y设置像素或者方位名词
缩放
可以控制盒子的放大缩小.
语法:
transform: scale(x,y);
- 注意其中的x和y用逗号分隔
- transform: scale(1,1): 宽和高都放大一倍,相对于没有放大.
- transform: scale(2,2); 宽和高都放大两倍.
- transform: scale(2); 只写一个参数, 第二个参数则和第一个参数一样, 相对于scale(2,2)
- transform: scale(0.5,0.5); 缩小一半.
- scale缩放最大的优势: 可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子
综合写法
- 同时使用多个转换, 其格式为: transform: translate() rotate() scale()…;等.
- 其顺序会影响转换的效果.(先旋转会改变坐标轴方向)
- 当我们同时有位移和其他属性时, 记得要将位移放到最前.
动画
可以通过设置多个节点来精确控制一个或一组动画, 常用来实现复杂的动画效果.
相比较过渡, 动画可以实现更多变化, 更多控制, 连续自动播放等效果.
制作动画:
- 先定义动画
用keyframes定义动画(类似定义类选择器)
@keyframes 动画名称{
0% {
width: 100px;
}
100% {
width: 200px;
}
}
- 可以做多个状态的变化
- 里面的百分比要是整数
- 里面的百分比就是总的时间的划分
动画序列:
- 0%是动画的开始, 100%是动画的完成. 这样的规则就是动画序列.
- 在@keyframes中规定某项CSS样式, 就能创建由当前样式逐渐改为新样式的动画效果.
- 动画是使元素从一种样式逐渐变化为另一种样式的效果. 您可以改变任意多的样式任意多的次数.
- 请用百分比来规定变化发生的时间, 或用关键词"from"和"to", 等同于0%和100%.
- 在使用(调用)动画
div{
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间;
}
属性 | 描述 |
---|---|
@keyframes | 规定动画 |
animation | 所有动画属性的简写属性, 除了animation-play-state属性. |
animation-name | 规定@keyframes动画的名称.(必须有) |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒, 默认是0.(必须有) |
animation-timing-function | 规定动画的速度曲线, 默认是"ease". |
animation-delay | 规定动画何时开始, 默认是0. |
animation-iteration-count | 规定动画被播放的次数,默认是1, 还有infinite |
animation-direction | 规定动画是否在下一周期逆向播放, 默认是"normal", alternate逆播放. |
animation-play-state | 规定动画是否正在运行或暂停. 默认是"running", 还有"pause". |
animation-fill-mode | 规定动画结束后的状态, 保持forwards回到起始backwards |
简写属性: animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
速度曲线:
值 | 描述 |
---|---|
linear | 动画从头到尾的速度是相同的. 匀速. |
ease | 默认. 动画以低速开始, 然后加快, 在结束前变慢. |
ease-in | 动画以低速开始. |
ease-out | 动画以低速结束. |
ease-in-out | 动画以低速开始和结束. |
steps() | 制定了时间函数中的间隔数量(步长) |
3D转换
x轴右为正, y轴下为正, z轴外为正.
3D移动 translate3d
在2D移动的基础上多加了一个可以移动的方向, 就是z轴方向.
transform: translateZ(100px); (一般用px单位)
transform: translate3d(x,y,z);
xyz不能省略, 没有就写0.
透视 perspective
在2D平面产生近大远小视觉立体, 但是只是效果二维的.
- 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内).
- 模拟人类的视觉位置, 可认为安排一只眼睛去看.
- 透视我们也成为视距: 视距就是人的眼睛到屏幕的距离.
- 距离视觉点越近的在电脑平面成像越大, 越远成像越小.
- 透视的单位是像素
透视要写到被观察元素的父盒子上面
perspective: 100px;
3d旋转 rotate3d
3D旋转指可以让元素在三维平面内沿着x轴, y轴, z轴或者自定义轴进行旋转.
语法:
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: rotate3d(x,y,z,deg);
左手准则:
(rotateX)
- 左手的手拇指指向x轴的正方向
- 其余手指的弯曲方向就是该元素沿着x轴旋转的方向(正值)
(rotateY)
- 左手的手拇指指向y轴的正方向
- 其余手指的弯曲方向就是该元素沿着y轴旋转的方向(正值)
3D呈现 transform-style
- 控制子元素是否开启三维立体环境
- transform-style: flat; 子元素不开启3d立体空间 默认的
- transform-style: preserve-3d; 子元素开启立体空间
- 代码写给父级, 但是影响的是子盒子