首页 > 其他分享> 文章详细

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

2019-06-21 20:47:53 阅读：267 来源： 互联网

标签：CSS3 opacity Canvas transform animation translate3d Html5 webkit 0px

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>

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

转载于:https://www.cnblogs.com/Kummy/p/3584324.html

标签：CSS3,opacity,Canvas,transform,animation,translate3d,Html5,webkit,0px
来源： https://blog.csdn.net/weixin_34326179/article/details/93230632

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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