apng制作工具：http://isparta.github.io/how.html
apng制作文章：http://isux.tencent.com/introduction-of-apng.html GIF 和 Apng ,apng-canvas
Css3 模拟支付宝AA收款动画 [摘抄]
demo地址：http://www.imengwang.net/css3d/css3-wave.html
<html>
<head>
<title></title>
<style type="text/css">
.circle{width:200px;height:200px;position:absolute;top:%;left:%;margin:-100px -100px;}
.circle1, .circle2, .circle3, .circle4, .circle5, .circle6, .center{
position:absolute;
left:%;
top:%;
margin:-30px -30px;
width:60px;
height:60px;
border-radius:30px;
background-color:#;
}
.center{
position:absolute;
left:%;
top:%;
margin:-35px -35px;
width:70px;
height:70px;
border-radius:35px;
background:#;
text-align:center;
line-height:70px;
color:#EAEAEA;
font-size:16px;
font-family:"\5FAE\8F6F\96C5\9ED1";
}
.circle1{
-webkit-animation:circle 3s linear infinite;
animation:circle 3s linear infinite;
}
.circle2{
-webkit-animation:circle 3s linear .8s infinite;
animation:circle 3s linear .8s infinite;
}
.circle3{
-webkit-animation:circle 3s linear .6s infinite;
animation:circle 3s linear .6s infinite;
}
@-webkit-keyframes circle{
from{
opacity:;
-webkit-transform:scale();
}
to{
opacity:;
-webkit-transform:scale();
}
}
</style>
</head>
<body>
<div class="circle">
<div class="circle1"> </div>
<div class="circle2"> </div>
<div class="circle3"> </div>
<div class="center">AA</div>
</div>
</body>
</html>
模糊，毛玻璃效果 （Css3 Filter）:
地址：http://www.w3cplus.com/css3/ten-effects-with-css3-filter
#player {-webkit-filter: blur(3px);-moz-filter: blur(3px);-ms-filter: blur(3px);-o-filter: blur(3px);}
图片自动360旋转效果：
.img { animation: 10s linear 0s normal none infinite rotate; animation-play-state: running; }
img:hover
{
transform: rotate(360deg);
transition: all 0.5s ease 0s;
}
CSS3倒计时效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title> new document </title>
<style>
div{position:absolute;width:200px;height:200px;left:;top:;right:;bottom:;margin:auto;border-radius:%;background-color:#CCC;}
div:before,
div:after{position:absolute;content:"";width:%;height:%;top:;left:;background-color:#CCC;border-radius:% %/% %;z-index:;transform-origin:% %;-webkit-transform-origin:% %;-moz-transform-origin:% %;-o-transform-origin:% %;}
div.half,
div:before{background-color:gold;}
div{animation:run 10s steps(,end);-webkit-animation:run 10s steps(,end);-moz-animation:run 10s steps(,end);-o-animation:run 10s steps(,end);}
div:before{animation:run1 10s linear;-webkit-animation:run1 10s linear;-moz-animation:run1 10s linear;-o-animation:run1 10s linear;}
div span{position:absolute;width:%;height:22px;left:;top:90px;font-size:20px;font-weight:bold;line-height:22px;text-align:center;z-index:;}
@keyframes run{
%,
%{background-color:gold;}
}
@keyframes run1{
%{z-index:;transform:rotate(360deg);}
} @-webkit-keyframes run{
%,
%{background-color:gold;}
}
@-webkit-keyframes run1{
%{z-index:;-webkit-transform:rotate(360deg);}
}
</style>
</head>
<body>
<div>
<span></span>
</div>
<script>
var div=document.querySelector("div"),span=div.querySelector("span"),step=,timer,
aniStart=function(e){
if(e.animationName=="run")
{
(function(){
span.innerHTML=step++;
timer=setTimeout(arguments.callee,);
})();
}
},aniEnd=function(e){
if(e.animationName=="run")
{
span.innerHTML=;
clearTimeout(timer);
step=;
}
};
div.addEventListener("animationstart",aniStart,false);
div.addEventListener("animationend",aniEnd,false);
div.addEventListener("webkitAnimationStart",aniStart,false);
div.addEventListener("webkitAnimationEnd",aniEnd,false);
div.addEventListener("oAnimationEnd",aniEnd,false);
div.addEventListener("oAnimationEnd",aniEnd,false);
</script>
</body>
</html>
闪闪的效果：
.blood {
position: absolute;
height: 300px;
width: 15px;
right: 10px;
top: 20px;
border-radius: 5px;
overflow: hidden;
background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(red), color-stop(0.5, yellow), to(green));
box-shadow: 0 0 4px #2AC3FF;
-webkit-animation: glow2 1s infinite alternate ease-in-out;
}
<div class="blood bloodA">
<div style="bottom: 0px; "></div>
</div>
文字描边效果：
<html>
<head>
<style type="text/css">
.text-shadow {
color: #FFE339;
font-family: "微软雅黑";
font-size: 18px;
text-shadow: 1px 0 0 #000000, -1px 0 0 #000000, 0 1px 0 #000000, 0 -1px 0 #000000;
} </style>
</head>
<body>
<div class="text-shadow"> 精彩游戏</div>
</body>
</html>
Canvas 立方体 Cube 效果：
demo 地址：http://www.imengwang.net/css3d/css3-cube.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
body{margin: ;padding:;}
#cas{margin:100px auto;display: block;}
</style>
<title>CUBE</title>
</head>
<body>
<canvas id="cas" width="" height="">您的浏览器不支持canvas</canvas>
<script>
var canvas = document.getElementById("cas");
var ctx = canvas.getContext("2d");
var fallLength = , centerX = canvas.width/ , centerY = canvas.height/; Array.prototype.foreach = function(callback){
for(var i=;i<this.length;i++){
callback.apply(this[i] , [i])
}
} var Vector = function(x,y,z){
this.x = x;
this.y = y;
this.z = z;
this._get2d = function(){
var scale = fallLength/(fallLength+this.z);
var x = centerX + this.x*scale;
var y = centerY + this.y*scale;
return {x:x , y:y};
}
} var Cube = function(length){
this.length = length;
this.faces = [];
}
Cube.prototype = {
_initVector:function(){
this.vectors = [];
this.vectors.push(new Vector(-this.length/ , -this.length/ , this.length/)); //
this.vectors.push(new Vector(-this.length/ , this.length/ , this.length/)); //
this.vectors.push(new Vector(this.length/ , -this.length/ , this.length/)); //
this.vectors.push(new Vector(this.length/ , this.length/ , this.length/)); // this.vectors.push(new Vector(this.length/ , -this.length/ , -this.length/)); //
this.vectors.push(new Vector(this.length/ , this.length/ , -this.length/)); //
this.vectors.push(new Vector(-this.length/ , -this.length/ , -this.length/)); //
this.vectors.push(new Vector(-this.length/ , this.length/ , -this.length/)); // },
_draw:function(){
this.faces[] = new Face(this.vectors[] , this.vectors[] , this.vectors[] , this.vectors[] , "#6c6");
this.faces[] = new Face(this.vectors[] , this.vectors[] , this.vectors[] , this.vectors[] , "#6cc");
this.faces[] = new Face(this.vectors[] , this.vectors[] , this.vectors[] , this.vectors[] , "#cc6");
this.faces[] = new Face(this.vectors[] , this.vectors[] , this.vectors[] , this.vectors[] , "#c6c");
this.faces[] = new Face(this.vectors[] , this.vectors[] , this.vectors[] , this.vectors[] , "#666");
this.faces[] = new Face(this.vectors[] , this.vectors[] , this.vectors[] , this.vectors[] , "#ccc"); this.faces.sort(function(a , b){
return b.zIndex - a.zIndex;
});
this.faces.foreach(function(){
this.draw();
})
}
} var Face = function(vector1,vector2,vector3,vector4,color){
this.v1 = vector1;
this.v2 = vector2;
this.v3 = vector3;
this.v4 = vector4;
this.color = color;
this.zIndex = this.v1.z + this.v2.z + this.v3.z + this.v4.z;
this.draw = function(){
ctx.save();
ctx.beginPath();
ctx.moveTo(this.v1._get2d().x , this.v1._get2d().y);
ctx.lineTo(this.v2._get2d().x , this.v2._get2d().y);
ctx.lineTo(this.v3._get2d().x , this.v3._get2d().y);
ctx.lineTo(this.v4._get2d().x , this.v4._get2d().y);
ctx.closePath();
// ctx.fillStyle = "rgba("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+",0.2)";
ctx.fillStyle = this.color;
ctx.fill();
}
} var angleX = 0.05;
var angleY = 0.05; if("addEventListener" in window){
/*window.addEventListener("mousemove" , function(event){
var x = event.clientX - canvas.offsetLeft - centerX;
var y = event.clientY - canvas.offsetTop - centerY;
angleY = x*0.0001;
angleX = y*0.0001;
});*/ /****************/
var startx=startY=endx=endY=deltax=deltay=;
/********************************/
canvas.addEventListener('touchstart',function(event){
//阻止网页默认动作（即网页滚动）
event.preventDefault(); startx=event.touches[].pageX;
startY=event.touches[].pageY;
//alert("startx:"+startx+",startY:"+startY);
},false); canvas.addEventListener("touchmove",function(event){
//阻止网页默认动作（即网页滚动）
event.preventDefault();
endx = event.targetTouches[].pageX;
endY = event.targetTouches[].pageY;
},false); canvas.addEventListener('touchend',function(event){
//alert("endx:"+endx+",endY:"+endY);
//阻止网页默认动作（即网页滚动）
event.preventDefault();
var x = endx - canvas.offsetLeft - centerX;
var y = endY - canvas.offsetTop - centerY;
angleY = x*0.00001;
angleX = y*0.00001;
animate();
},false); }
else {
/*window.attachEvent("onmousemove" , function(event){
var x = event.clientX - canvas.offsetLeft - centerX;
var y = event.clientY - canvas.offsetTop - centerY;
angleY = x*0.0001;
angleX = y*0.0001;
});*/ /****************/
var startx=startY=endx=endY=deltax=deltay=;
/********************************/
canvas.attachEvent('touchstart',function(event){
//阻止网页默认动作（即网页滚动）
event.preventDefault(); startx=event.touches[].pageX;
startY=event.touches[].pageY;
//alert("startx:"+startx+",startY:"+startY);
},false); canvas.attachEvent("touchmove",function(event){
//阻止网页默认动作（即网页滚动）
event.preventDefault();
endx = event.targetTouches[].pageX;
endY = event.targetTouches[].pageY;
},false); canvas.attachEvent('touchend',function(event){
//alert("endx:"+endx+",endY:"+endY);
//阻止网页默认动作（即网页滚动）
event.preventDefault();
var x = endx - canvas.offsetLeft - centerX;
var y = endY - canvas.offsetTop - centerY;
angleY = x*0.00001;
angleX = y*0.00001;
animate();
},false);
} function rotateX(vectors){
var cos = Math.cos(angleX);
var sin = Math.sin(angleX);
vectors.foreach(function(){
var y1 = this.y * cos - this.z * sin;
var z1 = this.z * cos + this.y * sin;
this.y = y1;
this.z = z1;
});
} function rotateY(vectors){
var cos = Math.cos(angleY);
var sin = Math.sin(angleY);
vectors.foreach(function(){
var x1 = this.x * cos - this.z * sin;
var z1 = this.z * cos + this.x * sin;
this.x = x1;
this.z = z1;
})
} cube = new Cube();
cube._initVector();
function initAnimate(){
cube._draw(); animate();
} function animate(){
ctx.clearRect(,,canvas.width,canvas.height) rotateY(cube.vectors);
rotateX(cube.vectors);
cube._draw();
requestAnimationFrame(animate);
} initAnimate();
</script>
</body>
</html>
CSS3 制作Drop-Shadows效果:
地址：http://www.cnblogs.com/Li-Cheng/p/3853227.html
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhYAAADfCAIAAAAlXQ3RAAAUwklEQVR4nO3de3Ab9YHAcf3lDHAtFMowF9oL0OtRyIMbaC8ww11Jb5i5OxIeocCRFq4tXFuud0Aoj0CgQAuZocfwKqUEE145aBOgbkJKYhI/8nJMol2tHquXJVmSbcmSJfkVO08798d616u3/IssJ83381cSWfLqt9J+s7/VrizHAAAQYpnpBQAAnKxICABAEAkBAAgiIQAAQSQEACCIhAAABE05IVYAwF8cEgIAEERCAACCSAgAQBAJAQAIIiEAAEEkBAAgiIQAAASREACAIBICABBEQgAAgkgIAEAQCQEACCIhAABBJAQAIIiEAAAEkRAAgCASAgAQREIAAIJICABAEAkBAAgiIQAAQSQEACCIhAAABJEQAIAgEgIAEERCAACCSAgAQBAJAQAIIiEAAEEkBAAgiIQAAASREACAIBICABBEQgAAgkgIAEAQCQEACCIhAABBJAQAIIiEAAAEkRAAgCASAgAQREIAAIJICABAEAkBAAgiIQAAQSQEACCIhAAABJEQAIAgEgIAEERCAACCSAgAQBAJAQAIIiEAAEEkBAAgiIQAAASREACAIBICABBEQgAAgkgIAEAQCQEACCIhAABBJAQAIIiEAAAEkRAAgCASAgAQREIAAIJICABAEAkBAAgiIQAAQSQEACCIhAAABJEQAIAgEgIAEERCAACCSAgAQBAJAQAIIiEAAEEkBAAgiIQAAASREACAIBICABBEQgAAgkgIAEAQCQEACCIhAABBJAQAIIiEoNYkSXI0LP+GRXPxfR/KpX9YUV663lLEkpclSSpx9z0tG9799X13XLNg9uyzT9PvdNrZsy9bdM/KNzfslnN/tSRJDcsv1hftgQ/zfiCfLH/4wMXG8rwiZ98l6wHLuPj+jxXj6WSPksViqfvW45vKLowkSXb75HBd96Kt7F2sVqu1rXnjO88tv+Oay8zDZDnt7Nl/u/Df7nms/uPW9vLjgFMTCUGtKYoSanxk3sR26tLlDc4SPyzLss/32i3Ftro3rVYUpeAd93z6xqPXff20YnfUtsrnLXps/V7zRl9RlMZHLtEXbWWDs9SyaZzOhpWX6o+4tN7hcOQ82ckHLGPuQ5t8xsJkj5K2uP/8zLYySbDZbIHA67fq97j+VXfpn5f2fLrm/kVfKT1MFkvdF+bd+vzG/OICJAS15nA4uptXLpjYOs17YINa4odlWQ4GV99ebNt285qcTbbVarVad36w4h/Pq6tsu113++tut7HhdjgczUYQ5j25QS21bBpV3fCksaW/5R2Xy5XzZCcfsIz5j2wJmpfENEoTvnj9qy0l97oURYlE6pfpP3/Da74SP7z7gxXfrnSYLBaLZd6KzTZbZbs1OGWQENTaVBPi8/mSyeT+/fsPfmhsG7+3bmQknU6HQqGcvRBJ2vr67ReYt4tnXLjo7lW/b7EFutP7h4eHh4b6unxS89pn7r569iyLxWK5vT4cNh5kehOyYJV1ZGSoiGQy6fP5SifEYjnn9vp9JRam4oS0NT5/U1Y+zpi/+PFXPt3jCye0URoaTnR6PLs/Xf3M3ddccIbFYrFYLl3Z7KxgtwynFBKCWptSQiRJUhTF7XYHg8G+94wZmn+vD4c9Ho/D4TAfC8ntxxnzf/y+o3doKJFIRCKRQCDg8/l8Pl9HR0dnZ2csFuvZ+9aP5v7ozWjU2JWZ3oTMe/qzcNhXhNvtVpTJYyHZozR3yZKvTfzxb376bvEjExUmpOmlxWdP1uPca1dt86aGc0bJ7/cHAoFIJBKPx3vVpt/dPfdbT+xQKxgQnFJICGptSgnJuteam/Wt3q2/KbQty9oynvv9Dzr6E4lEMBhUVdW8dZYkyWazOZ1Ov98f9vvVjo4a7YVU9oCTz3dylBY8s23Nklnan+vmPtRQ7EMElSTE9tHP5xmZnfXNh5siyWQyf5SsVqssy4qiuFwun88XiUR8Ph97IchBQlBr05QQufWFG744uWV8Zm9/LBbzeDwlpu9lWbbb7Xa7vUbHQsQTMu8XO/tcr/yTHpErV35S+EmVTYgkbXxqoRGQc5etD5cdJevEB73sDodD5og6spEQ1No0JeQP93zVCMjit6O9vb1u03HyypftxEzIis/CyeTOVfrf6xY9t7XQjkj5vZDVt56p33rRIzuiQqMEGEgIam06EiLLq+8wNo1f+0VzOm0+ND2lZTsxE/LQJl8oFOprelA/JHLOTa/uzL9X6YRIUssL1+q7ILNurA8KjhJgICGotelIiH3t3bP12656UY1Go3a7XWzZTsyE/Hyj2+VyxWLhLf/15Yl/O/uO1XnH1UsnRNnx7LX6TWf95ycB0VECDCQEtTYdCdn08Fz9psue2tPv8/lKn7Ve4recmAl5YIOqfb45E1r3w3Mn/vXi+/64J/tplk6I67Wlxj7Ibe/3Co8SYCAhqLWqJ0SSpN/eoN9i+d67iUTOdnxKy3bCJsRqtdrt9kgkEnr/5i9p/1w3/8GPs06LKZEQSZI2PWhcMOWKX+4WHyXAQEJQa1VPiCxv/tWV+i0Lnm3u7i50ynqly1bxyeSFHMfZ6Ytfspv3CQqOkiRJqqr29jrfXqx/OOs7WcfVSyREluW1dxrHi5atOY5RAgwkBLVW9YTYbB+tMC5DteDZbccxxT+DCbnx9YD5k7XFRkmW5Y6OjgHlxWsmInLmv7zQYtyrREJsNtsbNxm/bdmbRUZJ/vC+4leF/MbyBgdzXzAjIai1qidEUT5+1EjI/Ge2RiLFrr1YyW+ZqYQsrc9a7BKj5HA4urq6pOcun4jI2be80jp5ccZiCVEUpX6p8duW1RcZJWfD8uKLO++RxtwryuAUR0JQa9OQkC2rrtJv+crDf6pWQkpe0sowMmI1TtcQvkZWKpUKBCraC7FarZIkeTyevp7tv9Rv/uqPP9COq5dOSMPP/lq/5bqXHIVHSd3wQNblgbMsWNnM9BeykBDU2jRMZNneus0443rxy66u6kxklbyklSEc/uzp475GlsfjsdvLHwsxKIoSCoVSzcZpIpf89/q91nITWU2PzzdK+z8bCo+S0+ns7u4eGBiYbOQ640LJJAS5SAhqbRoOp8ufrTQ2jrO++3ZY+FJOJ/gnsgySJOWcJlK38OmNklT6cHpg7Z1n6Tdd+nhLwVGSZdnlcnm9XiNv0TeN+S8SglwkBLU2HR/q9a77yfn6bWf98CPFXearlkr8lpMiIVb9Mvim00TqrlnVUvpDvV7Hb2+bpd+28LnGykbJ95rxiWkSglwkBLU2HacWulzrH7xAv9Ey/5EtQbEvRzqJEmLVTxPpXHOd/uGsG1/Z7SxxaqHTKa37gfG53i/f+X9lrq6oISEogYSg1qYjIYqi7Fx1lfE/7Lq/f6LBpgp8/PTkSogkSW63O5HY++q39Q9n3fFuIPpm0QucKErnxvsuMlJ7zl1vVTBKJAQlkBDU2nQkRJIkr2Pd8gstk5vHpa9vtVZwEkNbW1v2bzmJEmKd+LL0wGD7qismIjLn3k/eKH6ZRcnj+fwP3z/HGKXTr3jio3KjREJQAglBrU3Txd7tdnug8dHLjT0Ri+X0K+5/e5tUfPvY1rr+uVu+fstLJ8P3hZQYJafT2d0d2vvUxAcK6q6+7l/1g+b5F3tXFCVsf/s/9Es1WiyWuotu+98Nn5eoCAlBCSQEtTZNCdEu/uF4+7umzaPFYjn9777zs5Vvrt/c3DaxlWxr3vznD9547CeLLv2rOovFYln6u5PgWwtLjZIsy16vNxXbsuIiS45CXzklqaoaluqXZQ1T3XnfvHX582sbGrcb123cte3PDe/+evniS78w+U3CJAS5SAhqLXvjWM7FyxscL19f7NYlL+d8UavX63VtfPDKMyp8dItl1p3v1Oy708ta8op5f6jy0CqK0tnZmdr003OzH6/gF9/KsuzxeOKODSunMEyaK57cTkKQhYSg1qaWkEtWbAmuvqXYrTetzjnF2mazeb3eeHDne3fPLbeBnDX76vvX2vo6OztrtBdS1tJ6c8wqT4h2mkg87v3TD7J2LgomxGq1yrLsdrt7ejqs79x1+ZmzCixJjjMuXHR/fYsnaR4rwEpCUHtTS8jcx5u61txe7Nab1+T/p1iWZVVVw+Fw*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" alt="" />
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:; padding:;}
.box {
width: 500px;
height: 200px;
position: relative;
background: #ccc;
margin:100px auto;
font:35px/200px "微软雅黑";
text-align:center;
text-shadow: 1px 1px #fff;
} .box:before,
.box:after {
content: "";
position: absolute;
z-index: -;
bottom: 15px;
left: 10px;
width: %;
max-width: 150px;
height: %;
/*添加阴影效果*/
-webkit-box-shadow: 15px 10px rgba(,,,0.8);
-moz-box-shadow: 15px 10px rgba(,,,0.8);
box-shadow: 15px 10px rgba(,,,0.8);
/*添加transform属性*/
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
} .box:after {
right:10px;
left: auto;
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
} </style>
</head> <body>
<div class="box">LICHENG</div>
</body>
</html>
text-fill-color 文字遮罩动画效果实例:
地址： http://www.zhangxinxu.com/study/201006/text-fill-color-mask-text-demo.html
文字折叠，翻转的效果！
demo: http://xg.qq.com/xg 腾讯云推送效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body {
color: #333333;
font-family: hiragino sans gb, microsoft yahei, arial, sans-sarif;
}
.subtitle {
display: block;
float: right;
font-size: 47px;
line-height: 18px;
margin: 20px 200px 0 0;
color: black;
} .subtitle:hover {
color: #5BAA2B;
text-decoration: none;
transition: color 0.25s linear 0s;
} /*******滚动显示字幕的效果************/
.subtitle {
opacity: 0;
-webkit-filter: blur(10px);
-webkit-transform: scale(0.6, 0.6) rotateX(180deg);
-moz-transform: scale(0.8, 0.6) rotateX(180deg);
-ms-transform: scale(0.6, 0.6) rotateX(180deg);
transform: scale(0.6, 0.6) rotateX(180deg);
transition: all 0s ease 0s;
} .current {
visibility: visible;
opacity: 1;
-webkit-filter: blur(0);
-webkit-transform: scale(1, 1) rotateX(0deg);
-moz-transform: scale(1, 1) rotateX(0deg);
-ms-transform: scale(1, 1) rotateX(0deg);
transform: scale(1, 1) rotateX(0deg);
transition: all 1.5s ease 0s;
} </style>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var timer=setInterval(function(){
$(".subtitle").addClass("current");
clearInterval(timer);
},1000);
});
</script>
</head>
<body>
<i class="fa fa-paper-plane"></i>
<span class="subtitle">Hello Wolrd Cordova!</span>
</body>
</html>
Css3 按钮效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZIAAACOCAIAAACUgxn5AAAHh0lEQVR4nO3a309b5x3H8f4jS5MMmqTZnzEVwt2utgswq6b96FanU1RNTXDwTIDEp+FHGrh4LixgEhBCSkiE09Ze0zVli5dqytZO0YyqbbCdTgeiSefunKNjdxc2CbGNVeKzWt/neb/0ubAeHx8d9UhvVbQvfAUAorzQ7gcAgIMhWwCEIVsAhCFbAIQhWwCEIVsAhCFbAIQhWwCEIVsAhCFbAIQhWwCEIVsAhCFbAIQhWwCEIVsAhCFbAIQhWwCEIVsAhCFbAIQhWwCEIVsAhCFbAIQhWwCEIVsAhCFbAIQhWwCEIVsAhCFbAIQhWwCEIVsAhCFbAIQhWwCEIVsAhCFbAIQhWwCEIVsAhCFbAIQhWwCEIVsAhCFbAIQhWwCEIVsAhCFbAIQhWwCEIVsAhCFbAIQhWwCEIVsAhCFbAIQhWwCEIVsAhDEoW+VyuVQqhWEYBIHv+57WfN8PgiAMw1KpVC6X2/3PHoiSKdmqNMvzPNd1t7e3bdve2tra1NTW1pZt29vb267rep5HuaAZU7JVadbGf+/PPf5B2vmO9pvd+f76xsrGxsbjx48r5Wr3GwAiY0q2wjB0XXdp57WL/zlpyOa+/GE+ny8Wi67rhmHY7jcARMaUbAVB4DjOxS9PGrVMJlMoFBzHCYKg3W8AiIwp2fJ937btEfukUUun0/l83rZt3/fb/QaAyJiSLc/zNjc3R/79slFLpVLZbHZzc9PzvHa/ASAyZmXrwr9eNmrJZHJtbY1sQTNmZWto84RRGxwcJFvQj1nZSv3zhFEjW9CSWdn69T9OGDWyBS2Zla3k348bNbIFLZmVrcEvjps1sgUdmZWt818c/8b2dr6/4fnobUspa+J+3fXXlVLn3470GcgWtGRWthIbx1pb/zvqIJb6629iLanpWz0N7/xOrmfkDy0+4TMjW9CSWdkaKB6LcMO3LLXU3+wk12/V/qpnfE5dydXdLZdQc28MR/p4A0WyBT2Zla1zfzsW4YZXLbXU3/ykdutvTKtEuva8Z2zOGluvfO6/0vwOBxnZgpbMytZbj16KcEOrlroWa35Su/cTau700KOX3nrUMzanpld7qod7f/V+QqnEpSiekGxBS2Trm8lW7Mru37umryWmn36ODT2KXamL1NCqpZQ19gnZAhowK1u/+mtnhEvdtNS1WPOTZ3fq8px1+V7lc2xSWZfvxSaVmnyvM3XTavAX/Wa3+lojW9CSYdn6vDPCVSO1z0mlRJPv7f1JbFIlLlY+f3x6SiUu7l42dfNU/c3rDw86sgUtmZWtNz/rbGGxyYP8zw9TK6fe/KxzdDEx+uQOdxJqMdbg8/9tZAtaMixbf+mIcKOLamqle+9JcsVSi31Nrp+8U//b7tE73TVXJlesJ1e2MrIFLZmVrTN/7ohwI4tq6t3uvSeD71pqsW+f67ut2cRI9XPfhLKsj56cN/zXtScXP//IFrRkWLYedkS3vgllWXefOaxmq+H1d+NTSk1kO8487DiTTajZ+GD1q25rdvd8d9UgtvyQZAtaMitbv/zTtyPbh/Gp2fj5Zw/P37DUQl+TXw0v7P7l60b37mG3Nasm1mov23PB849sQUtk6zk3vFDbmq+TrWrvKumqVo9sAQdjVrZOf3o0mt0eUAu99ecDN6yG53vWlZ5R47ePnv60d1ypqze69pw83YWFyletPifZgpbMylb8wdEIlo9fnYkPNPpqYNlS871NfnthXo3ffnqf8eWu+INqtmouu7rc1fqjki1oyaxsvf7Ho63u1oCaiZ/b59tzy5aa793vt0PzavxW/XnXpZkG/x3x6nJX609LtqAls7L1i/tHWtnQvFLzvU0uOHv99aHGX71yaUaNre7z1fXae5794JUWH7UysgUtmZWtn98/YtTIFrRkVrZe+/0Ro0a2oCWzsvWz9cNGjWxBS2Zl66efHDZqZAtaMitbP7l32KiRLWjJrGz9+HcvGjWyBS2Zla0fffSiUSNb0JJh2bp7yKglk0myBf2Yla1XPzxk1FKpVDabJVvQjCnZ8n3ftm3rQe+rvz1kyFL3vpdOp/P5vG3bvu+3+w0AkTElW0EQOI7zwcPrA+td/blvab+zH3/X+s3ZTCZTKBQcxwmCoN1vAIiMKdkKw9B13WKxmMvlMplMOp1OpVLJZHJQO8lkMpVKpdPpTCaTy+WKxaLrumEYtvsNAJExJVulUsnzvJ2dnWKxWCgU8vl8Nptd01Q2m83n84VCoVgs7uzseJ5XKpXa/QaAyJiSrXK5XCmX67qO49i2vak127Ydx3Fdt9Kscrnc7jcARMaUbH21W64wDIMg8H3f05rv+0EQhGFIs6Afg7IFQA9kC4AwZAuAMGQLgDBkC4AwZAuAMGQLgDBkC4AwZAuAMGQLgDBkC4AwZAuAMGQLgDBkC4AwZAuAMGQLgDBkC4AwZAuAMGQLgDBkC4AwZAuAMGQLgDBkC4AwZAuAMGQLgDBkC4AwZAuAMGQLgDBkC4AwZAuAMGQLgDBkC4AwZAuAMGQLgDBkC4AwZAuAMGQLgDBkC4AwZAuAMGQLgDBkC4AwZAuAMGQLgDBkC4Aw/wPEL5nmLP21vwAAAABJRU5ErkJggg==" alt="" />
<style type="text/css">
body{margin:;padding:;}
.login-submit {
margin:100px; background: -moz-linear-gradient(center top , #89E92C, #5FBA1D) repeat scroll transparent;
border: none;
border-radius: 2px 2px 2px 2px;
box-shadow: 1px 1px 2px #;
color: #;
cursor: pointer;
font-size: 20px;
padding: 8px 20px;
width: 40px;
}
</style>
<div class="login-submit">开始</div>
飞的效果
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css"> .fa-paper-plane {
background:url("http://www.imengwang.net/images/logo.png");
width:49px;
height:35px;
position: absolute;
left: 120px;
top: 20px;
color: #3498db;
text-shadow: 20px 2px rgba(,,,.);
-webkit-animation: page-index-banner-plane 5s ease-out infinite;
animation: page-index-banner-plane 5s ease-out infinite;
}
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: ;
line-height: ;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} @keyframes page-index-banner-plane {
% {
opacity: ;
transform: translate3d(-120px, 100px, 0px);
}
% {
opacity: ;
transform: translate3d(0px, 0px, 0px);
}
% {
opacity: ;
transform: translate3d(0px, -4px, 0px);
}
% {
opacity: ;
transform: translate3d(0px, 0px, 0px);
}
% {
opacity: ;
transform: translate3d(0px, 4px, 0px);
}
% {
opacity: ;
transform: translate3d(0px, 0px, 0px);
}
% {
opacity: ;
transform: translate3d(50px, -50px, 0px);
}
% {
opacity: ;
-moz-transform: translate3d(50px, -50px, 0px);
}
}
@-webkit-keyframes page-index-banner-plane {
% {
opacity: ;
-webkit-transform: translate3d(-120px, 100px, 0px);
}
% {
opacity: ;
-webkit-transform: translate3d(0px, 0px, 0px);
}
% {
opacity: ;
-webkit-transform: translate3d(0px, -4px, 0px);
}
% {
opacity: ;
-webkit-transform: translate3d(0px, 0px, 0px);
}
% {
opacity: ;
-webkit-transform: translate3d(0px, 4px, 0px);
}
% {
opacity: ;
-webkit-transform: translate3d(0px, 0px, 0px);
}
% {
opacity: ;
-webkit-transform: translate3d(50px, -50px, 0px);
}
% {
opacity: ;
-webkit-transform: translate3d(50px, -50px, 0px);
}
} @-moz-keyframes page-index-banner-plane {
% {
opacity: ;
-moz-transform: translate3d(-120px, 100px, 0px);
}
% {
opacity: ;
-moz-transform: translate3d(0px, 0px, 0px);
}
% {
opacity: ;
-moz-transform: translate3d(0px, -4px, 0px);
}
% {
opacity: ;
-moz-transform: translate3d(0px, 0px, 0px);
}
% {
opacity: ;
-moz-transform: translate3d(0px, 4px, 0px);
}
% {
opacity: ;
-moz-transform: translate3d(0px, 0px, 0px);
}
% {
opacity: ;
-moz-transform: translate3d(50px, -50px, 0px);
}
% {
opacity: ;
-moz-transform: translate3d(50px, -50px, 0px);
}
}
</style>
</head>
<body>
<i class="fa fa-paper-plane"></i>
</body>
</html>
Css3
body{
background-color:#;
font-size:12px;
}
.texts {
position:absolute;
-webkit-animation:demo-an .5s ease-out infinite;
border-radius:.4em;
color:#eee;
font:bold 4em/normal \5FAE\8F6F\96C5\9ED1,tahoma,arial,\5b8b\4f53,sans-serif;
text-align:center;
margin-left:48px;
width:12em;
zoom:
}
.demo{
-webkit-animation:demo-an .5s ease-out infinite;
border-radius:.4em;
color:#fff;
font:bold 4em/normal \5FAE\8F6F\96C5\9ED1,tahoma,arial,\5b8b\4f53,sans-serif;
margin:1em;
-webkit-mask:-webkit-linear-gradient(left,rgba(,,,) %,rgba(,,,) %,rgba(,,,) %) -500px no-repeat content;
text-align:center;
text-shadow:1px 1px #ccc;
width:12em;
}
@-webkit-keyframes demo-an{
to{ -webkit-mask-position:500px ; }
}
<div class="texts">测试效果</div>
<div class="demo">测试效果</div>
2:
body{
background-color:#;
font-size:12px;
}
.demo{
-webkit-animation:demo-an .5s ease-out infinite;
border-radius:.4em;
color:#fff;
font:bold 4em/normal \5FAE\8F6F\96C5\9ED1,tahoma,arial,\5b8b\4f53,sans-serif;
margin:1em;
-webkit-mask:-webkit-linear-gradient(left,rgba(,,,) %,rgba(,,,) %,rgba(,,,) %) -500px no-repeat content;
text-align:center;
text-shadow:1px 1px #ccc;
width:12em;
}
@-webkit-keyframes demo-an{
to{ -webkit-mask-position:500px ; }
}
<div class="demo">原来我的真身是一把名刀</div><!-- end demo -->
http://ued.ctrip.com/blog/wp-content/webkitcss/index.html
http://www.w3cplus.com/sites/default/files/blogs/2013/1311/CubeInformation/index.html
http://ecd.tencent.com/css3/html/animation/transform-style.html#
http://www.html5tricks.com/demo/html5-circle-music-player/index.html#seek
卡片式翻转效果：
http://www.webhek.com/css-flip/
超链接特效：
http://www.webhek.com/misc/link-style/
图片展台3D效果：
http://www.webhek.com/misc/3d-album/
携程UED:
http://ued.ctrip.com/blog/wp-content/webkitcss/prop/flex.html