html5精选特效代码分享收藏

HTML5精选特效代码分享

HTML5拥有丰富的特效API和CSS3属性，可以实现各种炫酷的特效，下面我将分享一些常用的HTML5特效代码。

1. canvas绘制动画

canvas可以让我们利用js代码绘制各种图形和动画，下面是一个简单的canvas动画，绘制了一个随机移动的小球。

  <canvas id="myCanvas" width="400" height="400"></canvas>
  <script>
      var canvas=document.getElementById("myCanvas");
      var ctx=canvas.getContext("2d");
      var ball={
          x:50,
          y:50,
          r:10,
          vx:3,
          vy:4,
          draw:function(){
              ctx.beginPath();
              ctx.arc(this.x,this.y,this.r,0,Math.PI*2,true);
              ctx.fillStyle="#0095DD";
              ctx.fill();
              ctx.closePath();
          }
      };

      function draw(){
          ctx.clearRect(0,0,canvas.width,canvas.height);
          ball.draw();
          ball.x+=ball.vx;
          ball.y+=ball.vy;
          if(ball.x+ball.r>=canvas.width||ball.x-ball.r<=0){
              ball.vx=-ball.vx;
          }
          if(ball.y+ball.r>=canvas.height||ball.y-ball.r<=0){
              ball.vy=-ball.vy;
          }
          requestAnimationFrame(draw);
      }
      draw();
  </script>

2. 圆角边框

以前要实现圆角边框需要利用图片或hack方式，而现在可以通过CSS3的border-radius属性轻松实现，下面是一个示例代码。

  <div style="width:200px;height:100px;border:1px solid #ccc;border-radius:20px;"></div>

3. 拖拽上传

HTML5的拖拽API可以让我们实现文件的拖拽上传，下面是一个示例代码，可以将拖拽的图片在网页中显示出来。

  <div id="dropzone" style="width:200px;height:200px;border:2px dashed #ccc;">将图片拖到此区域上传</div>
  <img id="preview" src="" style="display:none;">
  <script>
      var dropzone=document.getElementById('dropzone');
      dropzone.addEventListener('dragover',function(e){
          e.stopPropagation();
          e.preventDefault();
      },false);
      dropzone.addEventListener('drop',function(e){
          e.stopPropagation();
          e.preventDefault();
          var file=e.dataTransfer.files[0];
          if(!file.type.match(/image.*/)){
            alert('只能上传图片文件');
            return false;
          }
          var reader=new FileReader();
          reader.onload=function(e){
            var img=document.getElementById('preview');
            img.src=e.target.result;
            img.style.display='block';
          };
          reader.readAsDataURL(file);
      },false);
  </script>

4. 视频弹幕

通过HTML5的video标签和JS代码，可以为视频添加弹幕功能，下面是一个示例代码。

  <video src="video.mp4" controls="controls" style="width:500px;height:300px;" id="video"></video>
  <div style="width:500px;height:30px;border:1px solid #ccc;position:relative;">
      <input type="text" style="width:300px;height:20px;margin:5px;"/>
      <button onclick="addComment()">发布</button>
  </div>
  <script>
      var video=document.getElementById('video');
      var commentBox=document.createElement('div');
      commentBox.style.position='absolute';
      commentBox.style.width='100%';
      commentBox.style.height='100%';
      commentBox.style.top=0;
      commentBox.style.zIndex=9999;
      var comments=[];
      video.parentNode.appendChild(commentBox);
      video.addEventListener('play',function(){
          setInterval(function(){
              var currentTime=video.currentTime;
              var duration=video.duration;
              for(var i=0;i<comments.length;i++){
                  if(currentTime>comments[i].time+5||comments[i].time>currentTime){
                      continue;
                  }
                  var commentDiv=document.createElement('div');
                  commentDiv.style.position='absolute';
                  commentDiv.style.left='500px';
                  commentDiv.style.top=Math.floor(Math.random()*250)+'px';
                  commentDiv.style.width='100px';
                  commentDiv.style.height='20px';
                  commentDiv.style.backgroundColor='#ccc';
                  commentDiv.style.fontSize='12px';
                  commentDiv.innerHTML=comments[i].comment;
                  commentBox.appendChild(commentDiv);
              }
          },1000);
      },false);

      function addComment(){
          var commentInput=document.querySelector('input[type="text"]');
          var comment=commentInput.value;
          if(comment==''){
              alert('请输入弹幕内容');
              return false;
          }
          var currentTime=video.currentTime;
          comments.push({comment:comment,time:currentTime});
          commentInput.value='';
      }
  </script>