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
1 <html> 2 <head> 3 <title></title> 4 <style type="text/css"> 5 .circle{200px;height:200px;position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;} 6 .circle1, .circle2, .circle3, .circle4, .circle5, .circle6, .center{ 7 position:absolute; 8 left:50%; 9 top:50%; 10 margin:-30px 0 0 -30px; 11 60px; 12 height:60px; 13 border-radius:30px; 14 background-color:#666666; 15 } 16 .center{ 17 position:absolute; 18 left:50%; 19 top:50%; 20 margin:-35px 0 0 -35px; 21 70px; 22 height:70px; 23 border-radius:35px; 24 background:#111111; 25 text-align:center; 26 line-height:70px; 27 color:#EAEAEA; 28 font-size:16px; 29 font-family:"5FAE8F6F96C59ED1"; 30 } 31 .circle1{ 32 -webkit-animation:circle 3s linear infinite; 33 animation:circle 3s linear infinite; 34 } 35 .circle2{ 36 -webkit-animation:circle 3s linear 0.8s infinite; 37 animation:circle 3s linear 0.8s infinite; 38 } 39 .circle3{ 40 -webkit-animation:circle 3s linear 1.6s infinite; 41 animation:circle 3s linear 1.6s infinite; 42 } 43 @-webkit-keyframes circle{ 44 from{ 45 opacity:1; 46 -webkit-transform:scale(0); 47 } 48 to{ 49 opacity:0; 50 -webkit-transform:scale(3); 51 } 52 } 53 </style> 54 </head> 55 <body> 56 <div class="circle"> 57 <div class="circle1"> </div> 58 <div class="circle2"> </div> 59 <div class="circle3"> </div> 60 <div class="center">AA</div> 61 </div> 62 </body> 63 </html>
View Code
模糊,毛玻璃效果 (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;200px;height:200px;left:0;top:0;right:0;bottom:0;margin:auto;border-radius:50%;background-color:#CCC;} div:before, div:after{position:absolute;content:"";50%;height:100%;top:0;left:0;background-color:#CCC;border-radius:100% 0 0 100%/50% 0 0 50%;z-index:1;transform-origin:100% 50%;-webkit-transform-origin:100% 50%;-moz-transform-origin:100% 50%;-o-transform-origin:100% 50%;} div.half, div:before{background-color:gold;} div{animation:run 10s steps(1,end);-webkit-animation:run 10s steps(1,end);-moz-animation:run 10s steps(1,end);-o-animation:run 10s steps(1,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;100%;height:22px;left:0;top:90px;font-size:20px;font-weight:bold;line-height:22px;text-align:center;z-index:5;} @keyframes run{ 50%, 100%{background-color:gold;} } @keyframes run1{ 100%{z-index:3;transform:rotate(360deg);} } @-webkit-keyframes run{ 50%, 100%{background-color:gold;} } @-webkit-keyframes run1{ 100%{z-index:2;-webkit-transform:rotate(360deg);} } </style> </head> <body> <div> <span>0</span> </div> <script> var div=document.querySelector("div"),span=div.querySelector("span"),step=0,timer, aniStart=function(e){ if(e.animationName=="run") { (function(){ span.innerHTML=step++; timer=setTimeout(arguments.callee,1000); })(); } },aniEnd=function(e){ if(e.animationName=="run") { span.innerHTML=10; clearTimeout(timer); step=0; } }; 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>
View Code
闪闪的效果:
.blood { position: absolute; height: 300px; 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: 0;padding:0;} #cas{margin:100px auto;display: block;} </style> <title>CUBE</title> </head> <body> <canvas id="cas" width="400" height="400">您的浏览器不支持canvas</canvas> <script> var canvas = document.getElementById("cas"); var ctx = canvas.getContext("2d"); var fallLength = 500 , centerX = canvas.width/2 , centerY = canvas.height/2; Array.prototype.foreach = function(callback){ for(var i=0;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/2 , -this.length/2 , this.length/2)); //0 this.vectors.push(new Vector(-this.length/2 , this.length/2 , this.length/2)); //1 this.vectors.push(new Vector(this.length/2 , -this.length/2 , this.length/2)); //2 this.vectors.push(new Vector(this.length/2 , this.length/2 , this.length/2)); //3 this.vectors.push(new Vector(this.length/2 , -this.length/2 , -this.length/2)); //4 this.vectors.push(new Vector(this.length/2 , this.length/2 , -this.length/2)); //5 this.vectors.push(new Vector(-this.length/2 , -this.length/2 , -this.length/2)); //6 this.vectors.push(new Vector(-this.length/2 , this.length/2 , -this.length/2)); //7 }, _draw:function(){ this.faces[0] = new Face(this.vectors[0] , this.vectors[1] , this.vectors[3] , this.vectors[2] , "#6c6"); this.faces[1] = new Face(this.vectors[2] , this.vectors[3] , this.vectors[5] , this.vectors[4] , "#6cc"); this.faces[2] = new Face(this.vectors[4] , this.vectors[5] , this.vectors[7] , this.vectors[6] , "#cc6"); this.faces[3] = new Face(this.vectors[6] , this.vectors[7] , this.vectors[1] , this.vectors[0] , "#c6c"); this.faces[4] = new Face(this.vectors[1] , this.vectors[3] , this.vectors[5] , this.vectors[7] , "#666"); this.faces[5] = new Face(this.vectors[0] , this.vectors[2] , this.vectors[4] , this.vectors[6] , "#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=0; /********************************/ canvas.addEventListener('touchstart',function(event){ //阻止网页默认动作(即网页滚动) event.preventDefault(); startx=event.touches[0].pageX; startY=event.touches[0].pageY; //alert("startx:"+startx+",startY:"+startY); },false); canvas.addEventListener("touchmove",function(event){ //阻止网页默认动作(即网页滚动) event.preventDefault(); endx = event.targetTouches[0].pageX; endY = event.targetTouches[0].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=0; /********************************/ canvas.attachEvent('touchstart',function(event){ //阻止网页默认动作(即网页滚动) event.preventDefault(); startx=event.touches[0].pageX; startY=event.touches[0].pageY; //alert("startx:"+startx+",startY:"+startY); },false); canvas.attachEvent("touchmove",function(event){ //阻止网页默认动作(即网页滚动) event.preventDefault(); endx = event.targetTouches[0].pageX; endY = event.targetTouches[0].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(200); cube._initVector(); function initAnimate(){ cube._draw(); animate(); } function animate(){ ctx.clearRect(0,0,canvas.width,canvas.height) rotateY(cube.vectors); rotateX(cube.vectors); cube._draw(); requestAnimationFrame(animate); } initAnimate(); </script> </body> </html>
View Code
CSS3 制作Drop-Shadows效果:
地址:http://www.cnblogs.com/Li-Cheng/p/3853227.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{ margin:0; padding:0;} .box { 500px; height: 200px; position: relative; background: #ccc; margin:100px auto; font:35px/200px "微软雅黑"; text-align:center; text-shadow: 0 1px 1px #fff; } .box:before, .box:after { content: ""; position: absolute; z-index: -1; bottom: 15px; left: 10px; 50%; max- 150px; height: 20%; /*添加阴影效果*/ -webkit-box-shadow: 0 15px 10px rgba(125,125,125,0.8); -moz-box-shadow: 0 15px 10px rgba(125,125,125,0.8); box-shadow: 0 15px 10px rgba(125,125,125,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>
View Code
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 按钮效果:
<style type="text/css"> body{margin:0;padding:0;} .login-submit { margin:100px; background: -moz-linear-gradient(center top , #89E92C, #5FBA1D) repeat scroll 0 0 transparent; border: 0 none; border-radius: 2px 2px 2px 2px; box-shadow: 1px 1px 2px #333333; color: #999; cursor: pointer; font-size: 20px; padding: 8px 20px; 40px; } </style> <div class="login-submit">开始</div>
View Code
飞的效果
<html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> .fa-paper-plane { background:url("http://www.imengwang.net/images/logo.png"); 49px; height:35px; position: absolute; left: 120px; top: 20px; color: #3498db; text-shadow: 0 20px 2px rgba(0,0,0,.1); -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: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @keyframes page-index-banner-plane { 0% { opacity: 0; transform: translate3d(-120px, 100px, 0px); } 20% { opacity: 1; transform: translate3d(0px, 0px, 0px); } 30% { opacity: 1; transform: translate3d(0px, -4px, 0px); } 40% { opacity: 1; transform: translate3d(0px, 0px, 0px); } 50% { opacity: 1; transform: translate3d(0px, 4px, 0px); } 60% { opacity: 1; transform: translate3d(0px, 0px, 0px); } 70% { opacity: 0; transform: translate3d(50px, -50px, 0px); } 100% { opacity: 0; -moz-transform: translate3d(50px, -50px, 0px); } } @-webkit-keyframes page-index-banner-plane { 0% { opacity: 0; -webkit-transform: translate3d(-120px, 100px, 0px); } 20% { opacity: 1; -webkit-transform: translate3d(0px, 0px, 0px); } 30% { opacity: 1; -webkit-transform: translate3d(0px, -4px, 0px); } 40% { opacity: 1; -webkit-transform: translate3d(0px, 0px, 0px); } 50% { opacity: 1; -webkit-transform: translate3d(0px, 4px, 0px); } 60% { opacity: 1; -webkit-transform: translate3d(0px, 0px, 0px); } 70% { opacity: 0; -webkit-transform: translate3d(50px, -50px, 0px); } 100% { opacity: 0; -webkit-transform: translate3d(50px, -50px, 0px); } } @-moz-keyframes page-index-banner-plane { 0% { opacity: 0; -moz-transform: translate3d(-120px, 100px, 0px); } 20% { opacity: 1; -moz-transform: translate3d(0px, 0px, 0px); } 30% { opacity: 1; -moz-transform: translate3d(0px, -4px, 0px); } 40% { opacity: 1; -moz-transform: translate3d(0px, 0px, 0px); } 50% { opacity: 1; -moz-transform: translate3d(0px, 4px, 0px); } 60% { opacity: 1; -moz-transform: translate3d(0px, 0px, 0px); } 70% { opacity: 0; -moz-transform: translate3d(50px, -50px, 0px); } 100% { opacity: 0; -moz-transform: translate3d(50px, -50px, 0px); } } </style> </head> <body> <i class="fa fa-paper-plane"></i> </body> </html>
View Code
Css3
body{ background-color:#000; font-size:12px; } .texts { position:absolute; -webkit-animation:demo-an 2.5s ease-out infinite; border-radius:.4em; color:#eee; font:bold 4em/normal 5FAE8F6F96C59ED1,tahoma,arial,5b8b4f53,sans-serif; text-align:center; margin-left:48px; 12em; zoom:1 } .demo{ -webkit-animation:demo-an 2.5s ease-out infinite; border-radius:.4em; color:#fff; font:bold 4em/normal 5FAE8F6F96C59ED1,tahoma,arial,5b8b4f53,sans-serif; margin:1em; -webkit-mask:-webkit-linear-gradient(left,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,0) 20%) -500px 0 no-repeat content; text-align:center; text-shadow:1px 1px 0 #ccc; 12em; } @-webkit-keyframes demo-an{ to{ -webkit-mask-position:500px 0; } } <div class="texts">测试效果</div> <div class="demo">测试效果</div>
2:
body{ background-color:#000; font-size:12px; } .demo{ -webkit-animation:demo-an 2.5s ease-out infinite; border-radius:.4em; color:#fff; font:bold 4em/normal 5FAE8F6F96C59ED1,tahoma,arial,5b8b4f53,sans-serif; margin:1em; -webkit-mask:-webkit-linear-gradient(left,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,0) 20%) -500px 0 no-repeat content; text-align:center; text-shadow:1px 1px 0 #ccc; 12em; } @-webkit-keyframes demo-an{ to{ -webkit-mask-position:500px 0; } } <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