今天简单记录下css3中可以使元素产生运动效果的三个方法：transition和transform。以后有机会再具体介绍。
transition：过渡效果
用法：
transition:duration type easing delay;
duration：设置过渡效果的时间；
type：设置过渡效果的属性名称；
easing：设置过渡效果的运动形式，包括四中：
linear：规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease：规定慢速开始，然后变快，然后慢速结束的过渡效果 （cubicbezier(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)：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
delay：设置过渡效果的延迟时间；
默认值是：0 all ease 0；
eg：transition:1s all ease;
transform：变形效果
用法：
rotate(deg) 旋转度数
transleta(x,y) 平移像素
scale(x,y) 缩放比例
skew(x,y) 倾斜度数
注：
1.多个变形效果的时候，样式是从后往前生效的。
eg：transform:skew(0,180deg) scale(2) translate(100px,100px) rotate(180deg);
先旋转180度，再平移100px，再放大2倍，再斜切。
2.css3 变形 只是视觉上发生了改变，不会触发重排，性能很高。
3.transform 元素必须 块元素和行内块。
4.3D变形时，需要加transform-style：preserve-3d；
translateX
translateY
translateZ
roateX rotateY rotateZ scaleX scaleY scaleZ skewX skewY skewZ
5.rotate旋转时可以设置旋转中心：
transform-origin:x y z;
默认是：transform-origin:50% 50% 0px;
x、y也可以设置top bottom left right，具体值或百分比；z之只能设置具体length；
6.为了防止抖动，可以设置初始值：
transform:perspective(800px) translateX(0px) rotateY(0deg);
简单例子：滑动的照片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: black;
}
*{
margin: 0;
padding: 0;
list-style: none;
}
.box{
text-align: center;
margin-top: 20px;
}
input{
width: 65px;
height: 40px;
font-size: 24px;
margin-right: 20px;
}
ul{
width: 300px;
height: 400px;
margin: 50px auto;
position: relative;
}
li{
width: 100%;
height: 100%;
border: 1px solid #CCCCCC;
position: absolute;
top: 0;
left: 0;
font-size: 30px;
text-align: center;
transition: 1s all ease;
transform:perspective(800px) translateX(0px) rotateY(0deg);
}
.cur{
z-index: 5;
}
.l1{
transform:perspective(800px) translateX(-300px) rotateY(50deg);
opacity: 0.3;
z-index: 3;
}
.l2{
transform:perspective(800px) translateX(-200px) rotateY(50deg);
z-index: 3;
opacity: 0.9;
}
.r2{
transform:perspective(800px) translateX(200px) rotateY(-50deg);
opacity: 0.9;
z-index: 3;
}
.r1{
transform:perspective(800px) translateX(300px) rotateY(-50deg);
opacity: 0.3;
z-index: 1;
}
</style>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function(){
var aBtn=document.querySelectorAll('input');
var aLi=document.querySelectorAll('li');
var aClass=[];
for(var i=0;i<aLi.length;i++){
aClass.push(aLi[i].className);
}
//console.log(aClass);
for(var i=0;i<aLi.length;i++){
aLi[i].style.backgroundImage='url(img2/'+(i+1)+'.jpg)';
aLi[i].style.backgroundSize='cover';
}
aBtn[0].onclick=function(){
aClass.push(aClass.shift());
for(var i=0;i<aLi.length;i++){
aLi[i].className=aClass[i];
}
};
aBtn[1].onclick=function(){
aClass.unshift(aClass.pop());
//console.log(aClass);
for(var i=0;i<aLi.length;i++){
aLi[i].className=aClass[i];
}
};
for(var i=0;i<aLi.length;i++){
aLi[i].onclick=function(){
aClass.unshift(aClass.pop());
//console.log(aClass);
for(var j=0;j<aLi.length;j++){
aLi[j].className=aClass[j];
}
};
}
},false);
</script>
</head>
<body>
<div class="box">
<input type="button" value="<--" />
<input type="button" value="-->" />
</div>
<ul>
<li class="l1">1</li>
<li class="l2">2</li>
<li class="cur">3</li>
<li class="r2">4</li>
<li class="r1">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
</ul>
</body>
</html>
网友评论