一.变形(2d)/转换相关的css属性(transform)
transform:none/2d-3d-func;
transform:func1() func2() func3();
1.指定变形的原点
transform-origin: left/center/right /%/lenght(第一个取值) top/center/bottom/%/length(第二个取值);
2.位移
translate(x)/translate(x,y) 位移函数 eg: transform:translate(50px ,50px);
translateX(x) /translate(y) 只在水平或垂直方向上移动
3.缩放
scale(x)/scale(x,y) 缩放函数,参数是一个百分比的小数,如1表100%,0.5表50%,2表200%
eg: transform:scale(0.5)
scaleX(x)/scaleY(y) 只在水平或竖直方向上缩放
4.旋转
rotate(deg) 旋转变形 eg: transform:rotate(45deg) 顺时针旋转45度
5.倾斜
skew(x)/skew(x,y) 倾斜 参数为角度值
skewX(x) 逆时针/ skewY(y) 顺时针
浏览器的兼容性:
Firefox 浏览器写成 “-moz-transform”
Safari,Chrome 写成 “-webkit-transform”
opera 写成 “-o-transform”
二.过渡效果(transition) 由一个状态慢慢的变化到第二个状态
1.定义过渡的元素(针对属性)
transtion-property :none /all/ p1 p2;
2.定义持续的时间
transition-duration:100ms/3s;
3.定义速度效果的速度曲线
transition-timing-function:linear/ease/ease-in/ease-out
4.定义延迟时间
transition-delay:100ms/3s;
transition属性:property、duration、timing-function、delay(可按此顺序一次性定义)
示例:
<html lang="en"> <head> <meta charset="UTF-8"> <title>多渡效果</title> <style> div{ width:200px; height:200px; border:1px solid #000; background-color:#fff; /*哪个属性应该应用过渡效果*/ transition-property:all; /*过渡效果持续的时间*/ transition-duration:1s; /*多渡进程的速度函数*/ transition-timing-function:linear; /*过渡效果延迟多久开始进行*/ transition-delay:0s; /*也可合并写成*/ /*transition:all 1s linear 0s;*/ } div:hover{ background-color:#f00; /*transform:translate(500px);*/ transform:rotate(360deg); } </style> </head> <body> <div></div> </body> </html>注意:所有的变形效果都不会释放或改变原始占用的空间!--与相对定位有点类似。
三、帧动画(@keyframes,animation)
1. 帧动画:在一段比较短的时间内,连续的展示一系列内容变化的图片,就可以实现一个动画的效果;其中的每张图片称为一个“针”;电影播放时1s会播放16帧相关的图片。
2. 补间动画:只要指定动画变化过程中的“关键帧(keyframe)”,两个关键帧中间的过渡帧由系统来自动填充若干个补间帧。
css可以使用animation属性实现上述的补间动画效果。
3.动画的声明与调用
<style>
/*定义一个关键帧集合——一个动画*/
@keyframes (规定用于声明动画)myAnim1(动画名称){
/*帧:用于分解动画动作,每个帧代表某个时间点,定义每个帧上的动作*/
0%/form{....../*起始关键帧*/
}
40%{
......
}
80%{
......
}
100%/to{
....../*结束时的关键帧*/
}
</style>
/*调用动画*/
(需要调用动画的元素)div{
-webkit-animation: myAnim1 (动画名) 4s(持续时间);
}
实例:
<style> @-webkit-keyframes VAnimj{ 0%{ transform:translate(0); } 45%{ transform:translate(0,200px); } 100%{ transform:translate(300px,0); } } img{ -webkit-animation:VAnim 4s; } </style>
4.什么是动画:过渡属性只能模拟动画效果;animation属性可以制作类似Flash动画。(通过关键帧控制动画的每一步,使元素从一种样式逐渐变化为另一种样式,实现复杂的动画效果)
5.浏览器兼容性:
——最新版本支持良好
——Chrome和Safari需要前缀-webkit-
——Firefox需要前缀-moz-
——Opera需要前缀 -o-
6.与动画调用相关的css属性
(1)animation-name:动画名称,即某个@keyframes后声明的动画名。
(2)animation-duration:动画的持续时间
(3)animation-timing-function:动画播放的速度函数 linear/ease-in/ease-out/ease-in-out
(4) animation-delay:播放的延迟时间。
(5)animation-iteration-count: 2,3,infinite(无限次) 动画播放次数。
(6)animation-direction:播放方向。
normal:第二次播放时从第一帧重新开始。
alternate:第偶数次播放时从最后一帧倒序播放。
(7)animation-fill-mode:填充模拟
backwards:动画尚未开始时即处于第一帧的状态。
forwards:动画完后保持最后一帧的状态
both:上述二者的效果都要。
(8)animation-play-state:paused(动画处于暂停状态) running(动画处于运行状态)
(9)animation集合属性(按顺序指定):name duration timing-function delay count direction
说明:过渡(transiton)可以看做一种特殊的动画(animation)--只有开始和结束两个关键帧。
四.css3提供的媒体查询(Media Query)技术
1.作用:根据客户端浏览设备的特性,有选择性的执行部分css
2.Media:指浏览网页的设备,如screen(pc,pad,phone),print(打印机),tv(电视),projection(项目演示),屏幕阅读机......
3.Query:查询出当前浏览设备的特性,如类型、宽度、高度、分辨率、色彩位深、方向、Orientation(LandScape-风景画,Portrait-肖像画),根据这些特性,执行特定的css样式。
4.css3 Media Query有两种用法:(媒体查询语句)
(1)根据媒体的特性,执行不同的外部css:
<link media="screen and (min-width:768px) and (max-width:990px)"rel="stylesheet"href="xx.css">
这种方法有不足:客户端会不管媒体特性,请求所有的css文件。推荐使用下一种方式!
(2)根据媒体的特性,执行某段css中的部分内容:
@media screen and (min-width:768px) and (max-width:990px){
h1{}
.box{...}
}