CSS 3 高级
1.转换(3D ,2D)
转换的简介,转换即变形
1.转换属性 transform:none(默认值) /‘transform-function(转换函数)’
空格来分割多个转换函数(transform-function())
2.转换原点(默认中心点)
属性:transform-origin:
取值:按照元素左上点为(0,0) 可以给px 或者百分比或者关键字 top/left/bottom/right
------------------------前面需要加上transform----------------------
2.2D转换
1.位移
函数: translate()
取值: 数值。百分比。负数
一个值:X值
两个值:X,Y值
单向位移函数:
translateX()
translateY()
---------opacity;0.5;边框透明---------
transform:translate(50px);//一个值X轴
transform:translateX(50px); //单向位移
2.缩放(中心缩放,里面所有东西都会变)
函数:scale()
取值:
1个值:整体缩放比例(比例)
2个值: 分别表示X,Y
可取值:默认值1,放大 大于1,可以取小数 缩小 则小于1
单项缩放函数:scaleX() scaleY()
transform:scale(2);//放大两倍
transform:scaleX(2);//尽量等比例缩放
---------------下课-------------------------
3.旋转
圆心就是转换原点
函数:rotate(nxdeg) //transform:rotate(+45deg);
x:旋转角度数值
n:"+","-" 顺逆时针
transform-origin:0px 0px; //transform-origin:50% 50%; transform:rotate(+45deg);
注意: 旋转连同坐标轴一起转 //意思是线位移,再旋转(好像和canvas画布的,画布旋转类似)
4.倾斜: 正方形---->平行四边形(这个比较少使用,好像)
函数:skew(deg,deg)
transform:skewX(deg);
transform:skewY(deg); //指的是那个角度45度
-------------------------------
小练习
3D转换 --模拟3D
元素沿着Z轴,发生转
属性:perspective: 100px; 人眼到3D视图的距离
意义:定义距离 标识元素可以发生3D转换
元素要放在父元素上。而不是自己转换
浏览器兼容性不太好
-webkit-perspective
3D位移
函数:translateZ(z)//Z
translate3D(x,y,z)
3D的旋转
rotateX(deg); 扑倒
rotateY(deg); 翻身
rotateZ(deg); 转圈
rotate3d(x,y,z,deg); 0转 1不转 (0,0,1,30deg)只有轴做旋转
------------------午休吧--------------------------
能缩放 好像不能倾斜 大小写不重要
2.过渡 自己的笔记
1。属性transtion-property
规定设置过渡效果的 CSS 属性的名称。
selector{ transition-property:background;}
能够实现过渡样式的CSS属性
颜色:文本颜色,背景颜色
取值数值为:宽,高,字体大小
转换属性:transform
渐变属性:background:liner-gradient...
visibility:
阴影:
透明度:
2.过渡时间,默认值为0
属性:transition-duration:填时间
规定完成过渡效果需要多少秒或毫秒。
selector{ transition-property:background; transition-duration:ls; }
注意:必须设置过度属性。默认为0;
3.过渡时间曲线函数
属性:transition-timing-function
规定速度效果的速度曲线
取值:ease 默认值 慢-->快-->慢
linear:线性 匀速,平缓的意思
easy-in:慢--->一直加速
easy-out:快速开始--->减速效果
easy-in-out:慢---加速---减速---满减速
selector{transtion-timing-function:easy;}
4.打酱油的 ,过渡的延时
以时间作单位,从何时开始执行
属性:transition-delay:时间;
5.过渡综合属性
transition:property duration timing-function delay;
3.如何触发过渡效果
用户行为(点击,行为)
:hover 一些伪类也是可以的
4.过度属性定义在哪里
位置不一样,效果也不一样。
一定不要忘记延时
其实有用的就一句
transition:property duration timing-function delay;
一般就写
transtion: 属性 延时;
------------------做个练习--------------------
=======================过渡到此结束(动画来代替过渡)==========================
3.关于动画
多个属性状态之间的做平缓过渡效果
浏览器兼容性问题,尽量全部加前缀
-webkit-
-moz-
-o-
创建和使用的步骤
1.声明动画
起名
使用@keyframes 声明动画关键帧(特殊时间点的状态)
突然想起了@font-face{ 感觉差不多}
2.调用动画
属性:animation: ----animate
以上那个属性调用动画名称
设置相关操作
--------------------------------------------
4.声明动画
@keyframes (@-webkit-keyframes)
语法:
@keyframes 动画名称{
from( | 0% 二者都行){
//开始状态,CSS属性
width:200px;
}
10%{
width:300px;
}
to( | 100%){
//结束状态
width:400px;
}
}
5.调用动画
属性:animation-name: 动画名称
animation-duration: 一个周期时间(s/ms)
animation-timing-function: 速度执行曲线
animation-delay: 延时;
animation-iteration-count:动画播放次数; 取值: 指定数值\ \infinite(无限次)
animation-direction:normal/alternate(轮播 来回来回 ) 播放方向
animation:name duration timing-function delay iteration-count direction;
-webkit-animation: //这个要注意一下
---------------------
animation-fill-mode: 动画播放元素状态
取值:
none
forwards 保持最后一幁状态;
backwards:动画显示之前 ,逆向播放有效果 (没用)
both:结合 forwards和backwards状态
---------------------------
animation-play-state: 设置播放状态
取值:
paused
running
===============动画结束=======================
小练习
1.转换(3D ,2D)
转换的简介,转换即变形
1.转换属性 transform:none(默认值) /‘transform-function(转换函数)’
空格来分割多个转换函数(transform-function())
2.转换原点(默认中心点)
属性:transform-origin:
取值:按照元素左上点为(0,0) 可以给px 或者百分比或者关键字 top/left/bottom/right
------------------------前面需要加上transform----------------------
2.2D转换
1.位移
函数: translate()
取值: 数值。百分比。负数
一个值:X值
两个值:X,Y值
单向位移函数:
translateX()
translateY()
---------opacity;0.5;边框透明---------
transform:translate(50px);//一个值X轴
transform:translateX(50px); //单向位移
2.缩放(中心缩放,里面所有东西都会变)
函数:scale()
取值:
1个值:整体缩放比例(比例)
2个值: 分别表示X,Y
可取值:默认值1,放大 大于1,可以取小数 缩小 则小于1
单项缩放函数:scaleX() scaleY()
transform:scale(2);//放大两倍
transform:scaleX(2);//尽量等比例缩放
---------------下课-------------------------
3.旋转
圆心就是转换原点
函数:rotate(nxdeg) //transform:rotate(+45deg);
x:旋转角度数值
n:"+","-" 顺逆时针
transform-origin:0px 0px; //transform-origin:50% 50%; transform:rotate(+45deg);
注意: 旋转连同坐标轴一起转 //意思是线位移,再旋转(好像和canvas画布的,画布旋转类似)
4.倾斜: 正方形---->平行四边形(这个比较少使用,好像)
函数:skew(deg,deg)
transform:skewX(deg);
transform:skewY(deg); //指的是那个角度45度
-------------------------------
小练习
3D转换 --模拟3D
元素沿着Z轴,发生转
属性:perspective: 100px; 人眼到3D视图的距离
意义:定义距离 标识元素可以发生3D转换
元素要放在父元素上。而不是自己转换
浏览器兼容性不太好
-webkit-perspective
3D位移
函数:translateZ(z)//Z
translate3D(x,y,z)
3D的旋转
rotateX(deg); 扑倒
rotateY(deg); 翻身
rotateZ(deg); 转圈
rotate3d(x,y,z,deg); 0转 1不转 (0,0,1,30deg)只有轴做旋转
------------------午休吧--------------------------
能缩放 好像不能倾斜 大小写不重要
2.过渡 自己的笔记
1。属性transtion-property
规定设置过渡效果的 CSS 属性的名称。
selector{ transition-property:background;}
能够实现过渡样式的CSS属性
颜色:文本颜色,背景颜色
取值数值为:宽,高,字体大小
转换属性:transform
渐变属性:background:liner-gradient...
visibility:
阴影:
透明度:
2.过渡时间,默认值为0
属性:transition-duration:填时间
规定完成过渡效果需要多少秒或毫秒。
selector{ transition-property:background; transition-duration:ls; }
注意:必须设置过度属性。默认为0;
3.过渡时间曲线函数
属性:transition-timing-function
规定速度效果的速度曲线
取值:ease 默认值 慢-->快-->慢
linear:线性 匀速,平缓的意思
easy-in:慢--->一直加速
easy-out:快速开始--->减速效果
easy-in-out:慢---加速---减速---满减速
selector{transtion-timing-function:easy;}
4.打酱油的 ,过渡的延时
以时间作单位,从何时开始执行
属性:transition-delay:时间;
5.过渡综合属性
transition:property duration timing-function delay;
3.如何触发过渡效果
用户行为(点击,行为)
:hover 一些伪类也是可以的
4.过度属性定义在哪里
位置不一样,效果也不一样。
一定不要忘记延时
其实有用的就一句
transition:property duration timing-function delay;
一般就写
transtion: 属性 延时;
transition: all 延时;(延时需要些单位的)
中间可以使用多个","分割, 写法不变
transition: background-color 2s,width 2s,height 2s,transform 5s;
------------------做个练习--------------------
=======================过渡到此结束(动画来代替过渡)==========================
3.关于动画
多个属性状态之间的做平缓过渡效果
浏览器兼容性问题,尽量全部加前缀
-webkit-
-moz-
-o-
创建和使用的步骤
1.声明动画
起名
使用@keyframes 声明动画关键帧(特殊时间点的状态)
突然想起了@font-face{ 感觉差不多}
2.调用动画
属性:animation: ----animate
以上那个属性调用动画名称
设置相关操作
--------------------------------------------
4.声明动画
@keyframes (@-webkit-keyframes)
语法:
@keyframes 动画名称{
from( | 0% 二者都行){
//开始状态,CSS属性
width:200px;
}
10%{
width:300px;
}
to( | 100%){
//结束状态
width:400px;
}
}
5.调用动画
属性:animation-name: 动画名称
animation-duration: 一个周期时间(s/ms)
animation-timing-function: 速度执行曲线
animation-delay: 延时;
animation-iteration-count:动画播放次数; 取值: 指定数值\ \infinite(无限次)
animation-direction:normal/alternate(轮播 来回来回 ) 播放方向
animation:name duration timing-function delay iteration-count direction;
-webkit-animation: //这个要注意一下
---------------------
animation-fill-mode: 动画播放元素状态
取值:
none
forwards 保持最后一幁状态;
backwards:动画显示之前 ,逆向播放有效果 (没用)
both:结合 forwards和backwards状态
---------------------------
animation-play-state: 设置播放状态
取值:
paused
running
===============动画结束=======================
小练习