Kummy's Blog

o(︶︿︶)o { name : 'Kummy' , job : 'Feser' }

那些不错的 [ Html5 + CSS3 + Canvas ] 效果！

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{width: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         width: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         width: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:"\5FAE\8F6F\96C5\9ED1";
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">&nbsp;</div>
58      <div class="circle2">&nbsp;</div>
59      <div class="circle3">&nbsp;</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; }　　
 
 
图片,平滑的转动360度效果：
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:0;top:0;right:0;bottom:0;margin:auto;border-radius:50%;background-color:#CCC;}
     div:before,
     div:after{position:absolute;content:"";width: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;width: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;
  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: 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 {
    width: 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;
    width: 50%;
    max-width: 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;
  width: 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");
         width: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 \5FAE\8F6F\96C5\9ED1,tahoma,arial,\5b8b\4f53,sans-serif;
    text-align:center;
    margin-left:48px;
    width:12em;
    zoom:1
}
.demo{
    -webkit-animation:demo-an 2.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(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;
    width: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 \5FAE\8F6F\96C5\9ED1,tahoma,arial,\5b8b\4f53,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;
    width: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

posted @ 2014-07-21 17:27  李 维  阅读(3768)  评论(3)  编辑  收藏  举报