那些不错的 [ 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

 <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">&nbsp;</div>

      <div class="circle2">&nbsp;</div>

      <div class="circle3">&nbsp;</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; }

图片,平滑的转动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:;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+FwLGBtWvurexf/w5zzJzeTs848f87CJfet+n2zO5nJZKLRqKpOfipphhNiuvtUp/tkWfb7/Rnfu7d+afLxiiVE+3mn0xkKhZLJsNr03rP3Ll44Z865k9Wddeb5c+YsXHLXypf/2OKK9g0lEolQKOR0OrnMIsxICGpNuzhHOp0ue/mpdDodDoeDwWAymSx4ayhU+Kp/kiQpiuJ2u0OhUE9PT19fX39/v3avwcHBdDodj8fD4bDX63U4sj6PZCzbwMBAd3d3JWe5G1cEyWQykUgkJ2mVP9mcuwssid1u7+zszGQy2gMmEgl3yZMHJUmy2WyqqgYCge7u7mQymclkBgcHtVHq7+9PpVLxeDwSifj9flVVFUWhH8hBQlBrkiQ5HA6Px1P28lMej8fpdDocDrfbXfDWnADk/yKbzeZwOFRV9Xg82kU7vF6v2+12Op0FN4jGsnm9XpfLVcn3ihtXBPF6vU6nM+culT/ZnLsLLIkkSXa73fhdbre7wvMrZVnOHyWPx1NioAANCQEACCIhAABBJAQAIIiEAAAEkRAAgCASAgAQREIAAIJICABAEAkBAAgiIQAAQSQEACCIhAAABJEQAIAgEgIAEERCAACCSAgAQBAJAQAIIiEAAEEkBAAgiIQAAASREACAIBICABBEQgAAgkgIAEAQCQEACCIhAABBJAQAIIiEAAAEkRAAgCASAgAQREIAAIJICABAEAkBAAgiIQAAQSQEACCIhAAABJEQAIAgEgIAEERCAACCSAgAQBAJAQAIIiEAAEG1SMj4+PhMP00AQPWREACAIBICABA0Pj5OQgAAIqY9IePj4yQEAP4ikRAAgKBaJGRsbGymnyYAoPpICABAEAkBAAjSDlWQEADAlJEQAIAgEgIAEDQ2NkZCAAAi2AsBAAgiIQAAQSQEACCIhAAABJEQAIAgEgIAEERCAACCSAgAQBAJAQAIIiEAAEEkBAAgiIQAAATxlVMAAEEkBAAgiIQAAASREACAIBICABBEQgAAgkgIAEAQCQEACCIhAABBJAQAIIiEAAAEkRAAgCASAgAQVIuEjI+Pz/TTBABUHwkBAAia9oRoFZnppwkAqD4SAgAQVKOEjI2NjY2NHTly5PDhwwcPHhwZGRkeHu7v70+lUolEoqenJxqNhkKhjo4On8/ndrtdLpfT6bTb7Xa7XVEUG2aUoijaunA6nS6Xy+12+3y+jo6OUCgUjUZ7enoSiUQqlerv7x8eHh4ZGTl48ODhw4ePHDmirXexFxlOfOO6sbGxo0ePam/wQ4cOHThwYGRkZP/+/UNDQ4ODg/39/el0OpVK9fX1JZPJRCLR29sbj8fj8XgsFovFYj26bl2XLqqL6MK6Tl1IF9QFAoFAINCh8/v9fr/fp/PqPB6Px+Nx61RVVVXVpXPqHA6Hw+Gw6xRFMW+UZJ0kSZIkGdvWffv27du3b6/uc117e3t7e/seXVtbW1tb227drl27du3atVO3Y8eOHTt2bNe1tra2tra26Jp1TU1NTU1N23RbdZ/pGhsbGxsbt+g2b968efNm7c+NjY1bt25tampqaWnZsWNHW1vbvn37FEVRVdXv94fD4Z6enmQymclkhoaGRkdHtXf30aNHtbd2jRJifpFprzDt5WVUJBaLdXV1RSKRUCikrXtjTXtM3Kgh88hr60IrRyAQCIVCkUikq6srFosZ/RgaGtq/f/+BAwcOHTp05MiR43yR4aRgvLtzKnLw4EEjJMPDw1pLBgYG+vv7M5lMOp3WoqLpM0nqErpeXVwX0/WY5OSniu0x8lO6PUZ+qtIeIz/T0R6z1tbW7du379y5c/fu3e3t7VarVVEUl8vl8/m0/yPG4/FUKjUwMJDz7j6et/bUEnKs0I7I6OioUZF0Ot3X19fb2xuLxbq7u7W1bqzpEE4A2roIh8ORSCQajXZ3d8disd7e3r6+vnQ6bfTD+E8KuyCnjvyK5IRkdHTUaImWE82gbiBbvy5jkjaZ1vbk5+cEaY+Rn6q0x7Bnz5729va9e/darVZZlu12u6qqPp8vGAxGIpFYLGbsguRMMNQ6ITl7u0ZFhoeHjV3dvr4+YyfXvKa7MaO0taCtkXg83tvbm0gkjHgMDg4ODw/n9INdkFOKuSL5ITFaouVEM2KyP9twtiGTwWy1b8+Upt2q3h4jP6XbY+SndHskSdL+qk1WOxwOVVU9Ho/f7w+Z5qjT6bS2CzI6OpozwSD8ghFPSE5F8udMzTu5BVczasy8FlKplLZ2MpmMFg9t52NkZOTAgQM5/SAhpxTzcRHtbW6ERHu/aw7pDhZyIM9otpFslbcnJz/F2mPOT1XaU3DXp2x7jPyUbY+Rn6m2x0ybtdamqYPBYDgcjkaj5jlq7Rhn/hy18Ktlygk5VqQi5l1d40VgrOyCKxi1Z6wIbb0MDQ1pux3af0y0eBw6dIh+nOLGTcZMjpocMTlc3KEiCoaH9lRyyCe/PYZgMKhNVofD4a6urp6enng8nkwmzXPUWj+O/0C6RiQhxwpVJD8kxsrejxOStna0NZUTD/qBY9khyc9Jwa4UdKQ42pPfntKHfPLbk0Obr9YOcCaTyVQqlclkBgYGtEMgVZ+jFkzIsZJzpuZp0xIrGDPFvF60NaWttZx40A8Y8nNSNi3FlE0O7clpjzk/+e3JYcxaa9PU2pSDMX9V9WOc4gk5ljdnmj9tWnZlYwblrCZt3eXEg34gR+mWTMmUwnMqtycnPwXbYzCmrI2Zam3n44A+f1XdOYbjSsix4nOmU13lmCn5a828To/z5QEYaE+12pOfn3zmmeoDJY9xznBCSrw+prqaMVPy1121XhXA8TvZ2yOQH+H2GIc2jSlrY6Y6Z6ahWm/2qiXErIqrHDUzHa8EYAZV8d1xsrTHkDNfbY7HWFWPcU5LQgDg5FXF9kw1P9Vqj5GNgnse1erHMRICANUyg+0pLeeRq/iUSQgAzLDqtqeY6VhyEgIAJ6sZyYbZ/wPeanpEDH016wAAAABJRU5ErkJggg==" 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>

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

那些不错的 [ Html5 + CSS3 + Canvas ] 效果！的更多相关文章

HTML5+CSS3 loading 效果收集－－转载
用gif图片来做loading的时代已经过去了,它显得太low了,而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收集了几十个用html5和 ...
html5 css3 loading 效果
canvas html5load1 主要思路update 实现12个点的绘制和旋转效果 var update = function() { ctx.save();// 把当前绘图状态保存起来 ct ...
推荐7款新鲜出炉的HTML5/CSS3应用
1.HTML5/CSS3发光文字可自定义文字色彩效果很赞要分享的这款HTML5/CSS3文字效果很帅,鼠标滑过文字时,文字会出现发光的特效,并且我们可以自定义文字和颜色. 在线演示源码下载 2.H ...
9款极具创意的HTML5/CSS3进度条动画（免积分下载）
尊重原创,原文地址:http://www.cnblogs.com/html5tricks/p/3622918.html 免积分打包下载地址:http://download.csdn.net/detai ...
9款极具创意的HTML5/CSS3进度条动画
今天我们要分享9款极具创意的HTML5/CSS3进度条动画,这些进度条也许可以帮你增强用户交互和提高用户体验,喜欢的朋友就收藏了吧. 1.HTML5/CSS3图片加载进度条可切换多主题今天要分享的 ...
分享9款极具创意的HTML5/CSS3进度条动画
1.HTML5/CSS3图片加载进度条可切换多主题今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加载场景,插件会默认去从服务器下载几张比较大的图片,然后让该进度条展现当前读取图片的进度 ...
24个 HTML5 & CSS3 下拉菜单效果及制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
让你心动的 HTML5 & CSS3 效果【附源码下载】
这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...
结合 CSS3 & Canvas 模拟人行走的效果
HTML5 和 CSS3 技术给 Web 带来了新的利器,点燃了 Web 开发人员的激情.所谓只有想不到,没有做不到,的确如此.下面给大家分享一个结合 CSS3 & Canvas 模拟人行走的 ...

随机推荐

windows-spidermonkey
听过Mozilla(火狐浏览器的娘家)的javascript引擎吗?感兴趣吗?想在windows平台的应用开发中使用这个引擎吗? 肯定? 好,往下看! 本文给出Windows平台SpiderMonke ...
使用dynamic引发的异常：无法对 null 引用执行运行时绑定
今天上午运营反映有商户的账单没有生成. 查看日志,在批量生成账单服务执行过程中,因为如下异常而中断了: 跑批异常 Microsoft.CSharp.RuntimeBinder.RuntimeBinde ...
linux临时网络配置
1.设置IP地址: ifconfig ens33 192.168.60.231/24 2.添加默认网关路由 $Route add default gw <默认网关地址> 例:#route ...
加减plugin
plugin插件↓↓ ;(function (underfined) { "use strict" var _global; //插件函数 /* var plugin = { ad ...
es6generator
yield语句由于Generator函数返回的遍历器对象,只有调用next方法才会遍历下一个内部状态,所以其实提供了一种可以暂停执行的函数.yield语句就是暂停标志. yield语句只能用在 Ge ...
依赖反转Ioc和unity,autofac,castle框架教程及比较
1.依赖倒置的相关概念 http://www.cnblogs.com/fuchongjundream/p/3873073.html IoC模式(依赖.依赖倒置.依赖注入.控制反转) 2.依赖倒置的方式 ...
PHP运行脚本
PHP运行脚本 php.exe -f "php文件" php.exe -r "php代码" 例如:在cmd中 C:\Users\Administrator.SK ...
hdu1757 构造矩阵
Lele now is thinking about a simple function f(x). If x < 10 f(x) = x.If x >= 10 f(x) = a0 * f ...
sitecore系统教程之内容创作入门
在Sitecore中,有两种编辑工具,您可以在其中创建和编辑网站上的内容: 内容编辑器 - 专为熟悉Sitecore及其包含的功能的经验丰富的内容作者而设计的应用程序. 体验编辑器 - 一种直观的编辑 ...
tetrahedron (公式)
我是直接搬运了某大佬的代码,毕竟我不清楚如何计算这个东西. 其中四点共面的求法就是体积为0,然后圆心和半径就公式了. #include<cstdio> #include<iostre ...

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

那些不错的 [ Html5 + CSS3 + Canvas ] 效果！的更多相关文章

随机推荐

热门专题