特点:所有的二维变形(转化)都是嗖的一下过去了,没有过渡效果。
2.Transform方法
Transform的所有属性:translate
2.1.偏移:translate(x,y)
X表示水平方向上的移动,y代表垂直方向的移动。为负值的时候往相反的方向移动。
transform: translate(500px,200px);
使用该方法可以实现:元素的水平和垂直居中。
width: 200px;
height: 200px;
background-color: #71b9fe;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
2.2缩放:scale(x,y)
X表示放大或者缩小元素的宽度,y表示高度。
ScaleX()表示只对元素的高进行缩放
ScaleY()表示只对元素的宽进行缩放
注意:当里面的值为负数时,网页会先将其倒过来,再进行缩放
ScaleX()表示只对元素的高进行缩放
2.3旋转:rotate() --了解即可
deg;单位,度数
当里面的值为正数时,元素顺时针转,反之,逆时针转
transform:rotate(-120deg);
2.4倾斜:skew() --了解即可
里面的参数指的是绕着那个方向去倾斜
有正负之分
transform:skew(60deg,60deg);
2.4使用留个只的矩阵:
matrix(a,b,c,d,e,f)
比如transform:matrix(1,0,0,1,50,50);
表示将元素向右移动50px,再向下移动50px
10 css3过度
特点:1、本质上是一帧动画,一帧结束后,就结束了
2、过度的效果的实现,必须通过用户的行为,可能触发的行为:hover,focus,click,js代码
10.1transition的属性
Transition-property:指定元素的过度属性
Transition-duration:规定了过渡的时间
Transition-timming-function:规定以任何方式过渡
Ease:表示快速
Ease-in:先慢后快
Ease-out:先快后慢
Linear:线性平缓的变换。
Steps():规定过度分几步完成。
10.2缩写:
Transition:property duration function delay
10.3触发过度
只有当用户触发事件,过度事件才能进行,比如鼠标移动移出等等,这是它的一个局限性。
<style>
body{
height: 300px;
}
#box{
height:100px;
width:100px;
background-color:#71b9fe;
position:absolute;
left:0;
transition-property:left,width;
transition-duration:2s;
}
body:hover #box{
left:800px;
width:300px;
}
</style>
11 css3动画
1. animation动画属性
animation-name:取值为动画名称
animation-duration:规定动画完成所需要的时间
animation-timming-function:规定以什么方式完成动画
animation-delay:规定动画延迟多少时间
animation-iteration-count:规定动画执行的次数 (infinite无限循环)
animation-direction:规定动画执行的方向(alternate规定动画来回执行)
animation-state:规定动画是否执行(paused表示暂停)
animation-fill-mode:规定动画开始之前和结束之后发生的操作,默认值为none;forwards表示动画结束后元素保留最后帧的状态,backwards则与forwards相反。
2. @keyframes
规定一个动画,包括动画名称,
from规定初始状态,to规定动画的末状态
0%可以表示出状态,100%也可以表示动画的末状态,即最后帧。
img {
width:300px;
height:300px;
/*transition-duration:1s;*/
animation-name:move;
animation-direction:alternate;
animation-iteration-count:infinite;/*无限循环*/
animation-play-state: running;
animation-duration:2s; /*持续时间*/
/*animation-delay: 2s;*//*延迟时间*/
/*animation:move 1s linearforwards;*/
}
@keyframes move {
/* from{
transform:translate(0,0);
}
to{
transform: translate(800px,500px)scale(5);
}*/
0% {
transform: translate(0, 0);
opacity: 0;
}
50% {
transform: translate(800px, 500px)scale(5);
}
60% {
transform:translate(1300px, 900px)scale(5);
}
100%{
transform: translate(0, 0);
opacity: 1;
}
}