1、变形 - transform 迅速变化
2、过渡 - transition 缓慢变化
3、动画 - animation 关键帧动画
1、转换原点
默认情况下,原点是在当前物体的中心点上
修改原点:
属性:transform-origin
值:
1、x坐标 y坐标
当前物体的左上点为 x:0 y:0
2、宽度百分比 高度百分比
0% 0% 左上点
50% 50% 中心点
3、关键字
top:上
bottom:下
left:左
right:右
center:中间
center center
left top
transform-origin:0; 表示 所有轴的位置都将归到0点处
transform-origin:50px 50px; 表示 x轴在50像素处,y轴在50像素处
transform-origin:50px 50px 50px; 表示 x轴,y轴,z轴
2、变形:2d
旋转:rotate()
位移:translate()
缩放:scale()
倾斜:skew()
旋转:围绕一个参照原点(transform-origin),旋转指定角度,默认为顺时针
语法:transform:rotate(ndeg);
n为正 则按顺时针旋转
n为负 则按逆时针旋转
注意:rotate在旋转的过程中,不但能够旋转元素,同时能够旋转绘图的坐标系方向。如果配合着其他的变形一起来做的话,rotate在前的话,会影响之后延坐标轴的其他变形。
解决方案:如果配合变形一起来做,最好将rotate放在最后一个函数上
位移:延 坐标方向 移动指定的距离
语法:translate(x轴移动距离,y轴的移动距离);
x : 正为右,负为左
y : 正为下,负为上
transform:translate(50px,50px);
注意:位移不会影响其他元素位置,单可能会盖住周围元素
其他两个单方向位移:
translateX(距离);
translateY(距离);
缩放:将指定坐标轴上的坐标缩放指定的倍数
语法:scale(倍数)
倍数 : 0-1 之间的小数,缩小
>1 放大
scale(倍数) 表示等比缩放
其他两个单方向缩放:
scaleX(倍数);
scaleY(倍数);
transform:scale(2);
倾斜:沿着坐标轴方向,倾斜指定角度
语法:skew(ndeg);仅沿x轴倾斜
skew(ndeg,ndeg);沿着x轴和y轴同时倾斜
单方向倾斜:
skewX(ndeg)
skewY(ndeg)
x轴方向:角度为正,向左倒
角度为负,向右倒
y轴方向:角度为正向上倾斜
角度为负向下倾斜
3、3d变形
元素,要从立体角度观察
坐标轴,x轴,y轴,z轴
属性:
perspective
设定假定的人眼位置到投影平面的距离
如何使用:设置在父元素上的
浏览器兼容性:
Chrom,Safari : -webkit-perspective
Firefox : -moz-perspective
位移:
3D位移可以改变元素在z轴上的位置
translateZ(z);
translate3d(x,y,z);
旋转:
transform:
rotateX(ndeg);
rotateY(ndeg);
rotateZ(ndeg);
缩放:
transform:
scaleZ(z);
scale3d(x,y,z);
==================================================
1、过渡
transition
1、什么是过渡
CSS属性在一段时间内进行平滑的过渡
2、过渡四要素
1、过渡属性:background,color,transform
2、过渡所需时间:
3、过渡函数:速度和方式
4、过渡延迟时间:激发操作后的执行间隔(s|ms)
3、过渡属性
1、过渡属性
属性名:transition-property
transition-property:background,color;
2、过渡时间:
属性名:transition-duration:
以秒(s)或毫秒(ms)为单位
transition-duration:5s;
3、过渡函数
属性名:transition-timing-function
备选值:
ease:默认值,慢速开始,快速变快,慢速结束
linear:匀速过渡
ease-in:慢速开始,加速效果
ease-out:以慢速结束,减速效果
ease-in-out:以慢速开始和结束,中间先加速再减速
4、过渡延迟
属性名:transition-delay
以秒或毫秒为单位
5、整合transition属性
transition:属性名 持续时间 过渡函数 [延迟],
属性名 持续时间 过渡函数 [延迟];
2、关键帧动画
关键帧:动画执行过程中,物体在某一位置上的特殊状态
关键帧动画:使用连续的关键帧,控制物体联系的状态变化
什么时候使用关键帧动画:
1、连续,有规律的过渡 -- 过渡 transition
2、无规律的连续变化 -- 动画 animation
如何实现:
2大步:
1、定义关键帧
@keyframes 动画名{
from{
0%
css样式
动画开始的状态
}
percent{
}
to{
100%
css样式
动画结束的状态
}
}
@keyframes change{
from{
background:red;
}
10%
{
background:yellow;
}
50%
{
background:green;
}
to
{
background:pink;
}
}
浏览器兼容性:
@keyframes : IE , 火狐
@-webkit-keyframes : Chrome Safari
@-o-keyframes : Opera
2、触发动画(调用动画)
属性:animation
animation:动画名 持续时间 速度类型;
如何:
1、写在非伪类选择器中,页面加载则执行动画
2、写在伪类中,伪类触发时则播放动画
浏览器兼容性:
-webkit-animation: Chrome,Safari
-o-animation:Opera
3、动画子属性
1、animation-name : @keyframes(动画)名称
2、animation-duration : 动画时长
3、animation-timing-function:动画速度函数
4、animation-delay:动画的延迟时间
animation:name duration timing-function;
5、animation-iteration-count : 播放次数
取值:
1、具体数值
2、infinite(无限次播放)
6、animation-direction : 动画播放方向
取值:
1、normal 正常播放
2、alternate 轮流播放
奇数次数:正向播放
偶数次数:反向播放
animation:name duration timing-function delay iteration-count direction;
7、animation-fill-mode
动画播放前后的效果
备选值:
1、none:不改变默认行为
2、forwards:动画完成后保证最后一个属性状态
3、backwards:动画播放前,显示开始属性值
4、both
8、animation-play-state
控制动画播放与暂停
备选值:
1、paused : 暂停动画
2、running : 播放动画
使用场合:
1、配合伪类选择器
2、结合Javascript使用
@keyframes second{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
调用
#second{
animation:second 60s linear 0s infinite;
}
CSS3高级内容集
1、伪类选择器
回顾:什么是伪类选择器更改元素的不同的状态的样式
:hover :link :visited :active
1、目标伪类
1、什么是目标伪类
突出显示活动的HTML锚,用于选取当前活动的目标元素
2、语法
:target
p:target
2、元素状态伪类
1、什么是元素状态伪类
主要匹配元素的禁用、启用、选中状态
多数应用在表单元素上
2、常用的状态伪类
:disabled 匹配每个被禁用的元素
:enabled 匹配每个已启用的元素
:checked 匹配每个被选中的元素(只用于单选按钮和复选框)
3、结构伪类
1、什么是结构伪类
主要从元素的结构(层级结构)上来进行划分的
2、什么时候使用结构伪类
找 第一个子元素、最后一个子元素、没有子元素、仅仅只包含一个子元素 优先使用结构伪类
3、如何使用结构伪类
:first-child 匹配属于其父元素的首个子元素
:last-child 匹配属于其父元素的最后一个子元素
:empty 匹配没有子元素(包含文本)的元素
<p>这是一个段落</p> 非empty
<div></div> empty
:only-child 匹配属于其父元素的唯一子元素
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
</div>
4、否定伪类
匹配非指定元素/选择器的每个元素
语法:
:not(selecotr)
eg:
1、获取 input 但是 type不是text的所有元素
input[type=text]
input:not([type=text])
2、获取除第一个div子元素意外的其他div子元素
div:first-child
div:not(div:first-child)
2、伪元素选择器
主要针对元素中的文本内容进行匹配的。
1、:first-letter
选取指定选择器的首字母
eg:
p:first-letter{
}
一般用于 排版、首字符突出等操作
2、:first-line
选取指定选择器的首行
3、::selection
匹配用户选取的部分
=================================================
1、内容生成
1、什么是内容生成
通过css 向元素的前面或后面增加一部分内容
2、伪元素
:before 匹配到某一元素的最前面
p:before
:after 匹配到某一元素的最后面
p:after
3、内容生成
content : 配合 :before 或 :after伪元素,插入生成内容
content的常用取值:
1、字符串:纯文本,插入到指定的位置处
p:before{
content:"至尊宝:";
}
2、url:生成的图像
a:before{
content:url(Images/i1.jpg);
}
3、计数器
2、计数器
1、计数器的作用
向已存在的html文本内容增添序号
2、如何使用计数器
1、定义计数器
属性:counter-reset
作用:定义一个计数器,并且设置初始值为0
body{
counter-reset:计数器名称 初始值 计数器名称 初始值;
}
body{
counter-reset:count 10;
}
2、设置计数器增量
可以单独设置某一选择器使用计数器时的增量,默认值是1
属性:counter-increment
div{
counter-increment:count 10;
}
3、使用计数器
通过 counter(计数器名称) 来使用计数器
div:before{
content:"第"counter(count)"章";
}
3、多列
1、分隔列
把一段文本拆分成几列
column-count:规定元素被分隔的列数
2、列间隔
设置列与列之间的距离
column-gap:间隔;
3、列规则
可以在列与列之间设置一条间隔线,列规则可以设置间隔线的样式、颜色、粗细
column-rule:大小 样式 颜色;
column-rule-width:
column-rule-style:
column-rule-color:
4、浏览器兼容
1、IE10 以及 Opera 浏览器支持多列属性
2、FireFox 需使用前缀 -moz-
-moz-column-count:
-moz-column-gap:
-moz-column-rule:
3、Chrome 和 Safari
-webkit-column-count:
-webkit-column-gap:
-webkit-column-rule:
4、CSS Hack
1、为什么需要CSS Hack
浏览器兼容性所引发的问题
2、浏览器运行模式
1、混杂模式
2、标准模式(Standard Mode)
3、准标准模式(Almost Standard Mode)
3、浏览器主要通过 DOCTYPE 进行模式选择
触发混杂模式:不声明DOCTYPE
触发标准模式:
4、浏览器兼容问题
1、margin和padding
ie6中 默认的 maring 偏大
解决方案:body{margin:0px;}
2、居中布局
ie6以及低版本浏览器:通过父元素的text-align:center;完成居中
高版本浏览器(ie6,ie7+,chrome,firefox,opera,safari):通过当前元素的margin实现即 margin:0 auto;
3、元素高度与内容
ie6 : 元素的高度至少包括内容
其他:元素高度会超出容器
解决方案:overflow属性
4、子元素设置上外边距时
ie6:正常显示
其他版本:子元素的上外边距会认为是父元素的上外边距
解决方案:
1、给父元素设置边框
2、设置父元素的 padding-top
5、HTML头部引用Hack
通过HTML条件注释完成
<!--[if 条件]>
<![endif]-->
IE6:
<!--[if IE 6]>
编写HTML
引入css
<![endif]-->
大于IE6的版本:
<!--[if gt IE 6]>
<![endif]-->