CSS3知识点
1.Transform(转换)—-对元素进行移动、缩放、转动、拉长或拉伸。
兼容性:Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。Internet Explorer 9 需要前缀 -ms-。
2D转换
1) translate(x,y) –移动 (x轴:右正左负;y轴:下正上负)
例子:transform: translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。
2) rotate(ndeg) —旋转 (正顺负逆)
将一个元素旋转30度代码:
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
3) scale() –缩放
例子:transform: scale(2,4);把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。
4) skew() –倾斜(x轴:正左倒 负右倒 y轴:正 上 负下)
例子:transform: skew(30deg,20deg);围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。
5) matrix()
3D转换–x,y,z 多了一个z轴
属性:perspective (放置在父元素上)
含义:3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
兼容性:Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-;Opera 仍然不支持 3D 转换(它只支持 2D 转换)。
2.Transition(过渡)–为元素从一种样式变换为另一种样式时添加效果
用法:transition: width 2s; 若多个效果,由逗号隔开,如:transition: width 2s, height 2s, transform 2s;
这过渡效果一般和事件发生时发生 比如初始值width:50px;当元素hover 时候,宽度变为150px,然后他将宽度由50px变到150px通过2s来过渡实现
Transition 4个属性:
transition-property :名称
transition-duration :时长 默认:0
transition-timing-function:时间曲线 :默认:ease
值:linear 相同的速度开始至结束(等于 cubic-bezier(0,0,1,1))
Ease 慢速-快速-慢速 (cubic-bezier(0.25,0.1,0.25,1))
Ease-in 慢速开始(等于 cubic-bezier(0.42,0,1,1))
Ease-out 慢速结束(等于 cubic-bezier(0,0,0.58,1))
Ease-in-out 慢速开始和结束(等于 cubic-bezier(0.42,0,0.58,1))
Cubic-bezier(n,n,n,n)自定义 (0,1)的值
transition-delay :何时开始:默认:0
简写:
transition: width 1s linear 2s;
兼容性:
Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
注释:Internet Explorer 9 以及更早的版本,不支持 transition 属性。
注释:Chrome 25 以及更早的版本,需要前缀 -webkit-。
3.Animation(动画)
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。
两种方式:
方式一:from to
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
方式二:百分比
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
把动画绑定到某个元素(必备:名称和时长)
.className{
animation: myfirst 5s;
}
Animation:
属性 描述
@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”。暂停:paused
animation-fill-mode 规定对象动画时间之外的状态。
None:不改变默认行为。
Forwards:当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
Backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
Both:向前和向后填充模式都被应用。
简写:animation: myfirst 5s linear 2s infinite alternate;
兼容性:
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释:Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。