css3动画

matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。 deg 角度 rad 弧度
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

**简单demo*******

transform:translate(10px,10px)

transform:translateX(10px);
-webkit-transform:translateX(10px)
transform:scale(0.5,0.5);
-webkit-transform-origin:left top;
-webkit-transform:scale(0.5,0.5);

-webkit-transform-origin:left top;
-webkit-transform:rotate(10deg);
-webkit-transform:scaleX(0.5);

-webkit-transform:skew(10deg,10deg);//斜切

-webkit-transform:skewX(10deg);

-webkit-transform:matrix(1,0.1,0.1,1,100,100)

transform:translate(0px,30px);

************

***简单的时钟demo*****************************

window.onload=function () {
            var div=document.getElementsByTagName("div")[0];
            drawMark (div);
            var time=new Date();
            var ha=time.getHours();
            var ma=time.getMinutes();
            var sa=time.getSeconds();
            var hours=drawPoint (div,120,120,60,5,"#111",ha*30+ma*6/12-90);
            var mins=drawPoint (div,120,120,80,4,"#555",ma*6-90);
            var seds=drawPoint (div,120,120,100,3,"#999",sa*6-90);
            setInterval(function () {
                var time=new Date();
                var ha=time.getHours();
                var ma=time.getMinutes();
                var sa=time.getSeconds();
                setCss3(hours,{transform:"rotate("+(ha*30+ma*6/12-90)+"deg)"})
                setCss3(mins,{transform:"rotate("+(ma*6-90)+"deg)"})
                setCss3(seds,{transform:"rotate("+(sa*6-90)+"deg)"})
            },1000)
        }
    function drawMark (obj) {
        for (var i=0; i<60; i++) {
        var widths=3;
        var heights=6;
        if(i%5==0){
        widths=5
        heights=10;
        }
        var div=document.createElement("div");
        div.style.cssText="width:"+widths+"px;height:"+heights+"px;background:#111;position:absolute;top:0;left:120px;"
        setCss3(div,{transform:"rotate("+i*6+"deg)","transform-origin":"0px 120px"})
        obj.appendChild(div);
        }
    }
    function drawPoint (obj,startx,starty,width,height,color,angle) {
        var div=document.createElement("div");
        div.style.cssText="width:"+width+"px;height:"+height+"px;position:absolute;top:"+starty+"px;left:"+startx+"px;background:"+color+";";
        setCss3(div,{transform:"rotate("+angle+"deg)","transform-origin":"0px 0px"})
        obj.appendChild(div);
        return div;
    }
    function setCss3 (obj,attrObj) {
        for (var i in attrObj) {
        var newi=i;
        if(newi.indexOf("-")>0){
        var num=newi.indexOf("-");
        newi=newi.replace(newi.substr(num,2),newi.substr(num+1,1).toUpperCase());
        }
        obj.style[newi]=attrObj[i];
        newi=newi.replace(newi.charAt(0),newi.charAt(0).toUpperCase());
        obj.style["webkit"+newi]=attrObj[i];
        obj.style["moz"+newi]=attrObj[i];
        obj.style["o"+newi]=attrObj[i];
        obj.style["ms"+newi]=attrObj[i];
        }
    }

View Code

</script>
</head>
<body>
<div class="one">
</div>
</body>

*******************************************
3D哈哈哈哈哈哈

transform 向元素应用 2D 或 3D 转换函数。
transform-origin 允许你改变被转换元素的位置。 Firefox 支持 -moz-transform-origin 属性，但仅限于 2D 转换。 Opera 支持 -o-transform-origin 属性，但仅限于 2D 转换。 Safari 和 Chrome 支持 -webkit-transform-origin 属性，同时适用于 2D 和 3D 转换。
transform-style 规定被嵌套元素如何在 3D 空间中显示。 flat子元素将不保留其 3D 位置。 preserve-3d 子元素将保留其 3D 位置只有webkit可用
perspective 规定 3D 元素的透视效果。只有webkit可用
perspective-origin 规定 3D 元素的底部位置。只有webkit可用
backface-visibility 定义元素在不面对屏幕时是否可见。 visible 背面可见 hidden 背面不可见

-------------

matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。

*******************************************

perspective-origin:50px 50px;

transform-style:preserve-3d;/*子元素可以含有3d效果*/

/*
transform:rotateY(60deg);
*/
}
.inner{
width:200px;height:200px;border:1px solid blue;
margin-top:50px;margin-left:50px;
/*
transform-origin:top center -100px;
*/
transform:rotateX(70deg);
}
</style>
</head>
<body>
<div class="out">
<div class="inner">
</div>
</div>
</body>

*************************

*******************************

for (var i=0; i<btns.length; i++) {
btns[i].index=i;
btns[i].onclick=function () {
for (var i=0; i<btns.length; i++) {
btns[i].style.backgroundColor="#ccc";
}
this.style.backgroundColor="red";
changeA(box,(this.index-1)*90,this.index*90);
num=this.index
}

btns[i].onmouseover=function () {
clearInterval(t);
}
btns[i].onmouseout=function () {
t= setInterval(move,4000)
}

}

}

************************************

css3过渡：

transition 简写属性，用于在一个属性中设置四个过渡属性。 transition: property duration timing-function delay;
transition-property 规定应用过渡的 CSS 属性的名称。 transition-property: none|all|property;
transition-duration 定义过渡效果花费的时间。默认是 0。 transition-duration: time; 规定完成过渡效果需要花费的时间（以秒或毫秒计）。默认值是 0，意味着不会有效果。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。详情见过渡效果函数
transition-delay 规定过渡效果何时开始。默认是 0。 transition-delay: time; 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。

linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(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 函数中定义自己的值。可能的值是&nbs

------------------

火狐好用

**css3倒影**********************

box-reflect

none 无倒影
<direction> above：指定倒影在对象的上边 below：指定倒影在对象的下边 left：指定倒影在对象的左边 right：指定倒影在对象的右边
<offset> <length>：用长度值来定义倒影与对象之间的间隔。可以为负值 <percentage>：用百分比来定义倒影与对象之间的间隔。可以为负值
<mask-box-image> none：无遮罩图像 <url>：使用绝对或相对地址指定遮罩图像。 <linear-gradient>：使用线性渐变创建遮罩图像。 <radial-gradient>：使用径向(放射性)渐变创建遮罩图像。 <repeating-linear-gradient>：使用重复的线性渐变创建背遮罩像。 <repeating-radial-gradient>：使用重复的径向(放射性)渐变创建遮罩图像

*******demo*****

-webkit-box-reflect:below 5px -webkit-gradient(linear,50% 0,50% 100%, color-stop(0,rgba(0,0,0,0)),color-stop(0.5,rgba(0,0,0,0.01)),
color-stop(0.8,rgba(0,0,0,0.4)),color-stop(1,rgba(0,0,0,0.8))
);
}
img:hover{
-webkit-transform:rotateX(30deg) rotateY(30deg);;
width:300px;

}
</style>
</head>

******************************************

<!DOCTYPE html>
<html>
<head>
<title>noTitle</title>
<meta charset="">
<link rel="stylesheet" href="">
<style>
ul,li{
padding:0;margin:0;list-style:none;
}
.out{
width:800px;height:350px;border:1px solid red;
margin:100px auto;-webkit-perspective:1100px;position:relative;
}
.box{
width:100%;height:87px;position:absolute;-webkit-transform-style:preserve-3d;
-webkit-transition:all 3s ease;
-webkit-transform-origin:50% 50% 25px;
}
.box li{
position:absolute;width:100%;height:100%;
}
.box li:nth-of-type(1){
height:50px;background:#000;top:-50px;left:0;
-webkit-transform-origin:bottom;
-webkit-transform:rotateX(-90deg);
}
.box li:nth-of-type(2){
width:50px;background:#000;top:0px;left:-50px;
-webkit-transform-origin:right;
-webkit-transform:rotateY(90deg);
}
.box li:nth-of-type(3){
background:url(1.jpg) no-repeat;
top:0px;left:0;
}
.box li:nth-of-type(4){
width:50px;background:#000;top:0px;left:800px;
-webkit-transform-origin:left;
-webkit-transform:rotateY(-90deg);
}
.box li:nth-of-type(5){
height:50px;background:#000;top:87px;left:0;
-webkit-transform-origin:top;
-webkit-transform:rotateX(90deg);
}
.box li:nth-of-type(6){
background:url(2.jpg) no-repeat;
top:0px;left:0;
-webkit-transform:translateZ(50px);
}
.btn{
width:30px;height:30px;border-radius:50%;
background:#ccc;cursor:pointer;position:absolute;
top:500px;left:300px;
}
</style>
<script src="css3.js"></script>
<script>
window.onload=function () {
var out=document.getElementsByClassName("out")[0];
var btn=document.getElementsByClassName("btn")[0];
var str="";
for (var i=0; i<4; i++) {
str+="<ul class='box' style='left:0;top:"+i*87+"px'><li> </li><li> </li><li style='background-position:0 "+(-i*87)+"px'></li><li></li><li></li><li style='background-position:0 "+(-i*87)+"px'></li></ul>"
}
out.innerHTML=str;
var boxs=document.getElementsByClassName("box");
for (var i=0; i<boxs.length; i++) {

}
var angle=0;
btn.onclick=function () {
angle+=180;
if(angle>180){
angle=0;
}
for (var i=0; i<boxs.length; i++) {
setCss3(boxs[i],{transform:"rotateY("+angle+"deg)"})
setCss3(boxs[i],{transition:"all 2s ease "+Math.random()*1.5+"s"})
}
}
}

/***这就是css3.js************************/

/***functions.js**********/

//Í¨¹ýÀàÃû»ñÈ¡¶ÔÏó
/*
classname Ö¸¶¨ÕÒµÃÀàÃû
[obj] Ö¸¶¨Ò»¸ö²éÕÒ·¶Î§
*/
function getClass (classname,obj) {
var obj=obj||document;
var arr=[];
if(obj.getElementsByClassName){
return obj.getElementsByClassName(classname)
}else{
var alls=obj.getElementsByTagName("*");
for (var i=0; i<alls.length; i++) {
if(checkclass(alls[i].className,classname)){
arr.push(alls[i])
}
}
return arr;
}
}
function checkclass (startclass,endclass) {
var arr=startclass.split(" ");
for (var i=0; i<arr.length; i++) {
if(arr[i]==endclass){
return true;
}
}
return false;
}

//»ñµÃ´¿ÎÄ±¾
/*
obj Òª»ñÈ¡µÄ¶ÔÏó
[val] ÒªÉèÖÃµÄÖµ
*/
function getText (obj,val) {
if(document.all){
if(val){
obj.innerText=val;
}else{
return obj.innerText;
}
}else{
if(val){
obj.textContent=val;
}else{
return obj.textContent;
}
}
}
//»ñÈ¡ÔªËØµÄÑùÊ½
/*
obj Òª»ñÈ¡µÄ¶ÔÏó
attr Òª»ñÈ¡µÄÊôÐÔ
*/
function getStyle (obj,attr) {
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,null)[attr];
}
}

//»ñÈ¡ËùÓÐµÄ×ÓÔªËØ

function getChilds (obj) {
var childs=obj.childNodes;
var arr=[];
for (var i=0; i<childs.length; i++) {
if(childs[i].nodeType==3){
continue;
}else{
arr.push(childs[i])
}
}
return arr;
}

//»ñÈ¡µÚÒ»¸ö×ÓÔªËØ
function getFirst (obj) {
var first=obj.firstChild;
if(first==null){
return false;
}
while (first.nodeType==3) {
first=first.nextSibling;
if(first==null){
return false;
}
}
return first;
}

//»ñÈ¡×îºóÒ»¸ö×ÓÔªËØ
function getLast (obj) {
var last=obj.lastChild;
if(last==null){
return false;
}
while (last.nodeType==3) {
last=last.previousSibling;
if(last==null){
return false;
}
}
return last;
}

//»ñÈ¡ÏÂÒ»¸öÐÖµÜÔªËØ
function getNext(obj) {
var next=obj.nextSibling;
if(next==null){
return false;
}
while (next.nodeType==3) {
next=next.nextSibling;
if(next==null){
return false;
}
}
return next;
}

//»ñÈ¡ÉÏÒ»¸öÐÖµÜÔªËØ
function getUp(obj) {
var up=obj.previousSibling;
if(up==null){
return false;
}
while (up.nodeType==3) {
up=up.previousSibling;
if(up==null){
return false;
}
}
return up;
}

//Ìí¼Ó¶à¸öÊÂ¼þ
function addEvent (obj,ev,fn) {
if(obj.attachEvent){
obj.attachEvent("on"+ev,function () {
fn.call(obj);
});
}else{
obj.addEventListener(ev,fn,false);
}
}

//ÅÐ¶ÏÄ³¸öÔªËØÊÇ·ñ°üº¬ÓÐÁíÍâÒ»¸öÔªËØ
function contains (parent,child) {
if(parent.contains){
return parent.contains(child) && parent!=child;
}else{
return (parent.compareDocumentPosition(child)===20);
}
}

//ÅÐ¶ÏÊó±êÊÇ·ñÕæÕýµÄ´ÓÍâ²¿ÒÆÈë£¬»òÕßÊÇÕæÕýµÄÒÆ³öµ½Íâ²¿£»

function checkHover (e,target) {
if(getEvent(e).type=="mouseover"){
return !contains(target,getEvent(e).relatedTarget || getEvent(e).fromElement)&&
!((getEvent(e).relatedTarget || getEvent(e).fromElement)===target)
}else{
return !contains(target,getEvent(e).relatedTarget || getEvent(e).toElement)&&
!((getEvent(e).relatedTarget || getEvent(e).toElement)===target)
}
}

//»ñµÃÊÂ¼þ¶ÔÏó
function getEvent (e) {
return e||window.event;
}

/*
obj Òª²Ù×÷µÄ¶ÔÏó
overfun Êó±êÒÆÈëÐèÒª´¦ÀíµÄº¯Êý
outfun Êó±êÒÆ³ýÐèÒª´¦ÀíµÄº¯Êý
*/
function hover (obj,overfun,outfun) {
if(overfun){
obj.onmouseover=function (e) {
if(checkHover(e,obj)){
overfun.call(obj);
}
}
}
if(outfun){
obj.onmouseout=function (e) {
if(checkHover(e,obj)){
outfun.call(obj);
}
}
}
}

/*
Êó±ê¹öÂÖÊÂ¼þ
*/

if(val==-120||val==3){
if(downfun){
downfun.call(obj)
}
}

if (ev.preventDefault )
ev.preventDefault(); //×èÖ¹Ä¬ÈÏä¯ÀÀÆ÷¶¯×÷(W3C)
else
//IEÖÐ×èÖ¹º¯ÊýÆ÷Ä¬ÈÏ¶¯×÷µÄ·½Ê½
ev.returnValue = false;
}
}

</script>
</head>
<body>
<div class="out">

</div>
<div class="btn">
</div>
</body>
</html>

********************************

***************************

posted @ 2016-05-01 12:49 飘然离去阅读(275) 评论(0) 编辑收藏举报

刷新页面返回顶部

飘然离去

css3动画

公告