zoukankan html css js c++ java

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=""+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+"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{
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);;
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{
800px;height:350px;border:1px solid red;
margin:100px auto;-webkit-perspective:1100px;position:relative;
}
.box{
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;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){
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){
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{
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>

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

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

查看全文

相关阅读:
【郑轻邀请赛 G】密室逃脱
 【郑轻邀请赛 C】DOBRI
【郑轻邀请赛 F】 Tmk吃汤饭
 【郑轻邀请赛 I】这里是天堂！
【郑轻邀请赛 B】base64解密
 【郑轻邀请赛 A】tmk射气球
 【郑轻邀请赛 H】维克兹的进制转换
 解决adb command not found以及sdk环境配置
 adb shell 命令详解,android, adb logcat
Unexpected exception 'Cannot run program ... error=2, No such file or directory' ... adb'

原文地址：https://www.cnblogs.com/coding4/p/5450338.html