css3 h5特效

CSS3和H5相结合，让网页变得更加炫酷，视觉效果更加出众，让许多程序员和设计师受益匪浅。下面介绍几个常见的CSS3和H5特效。

/* 使用CSS3实现圆形图片 */img {
      border-radius: 50%;
}
/* 使用CSS3实现动态旋转 */@keyframes rotate {
  from {
        transform: rotate(0deg);
  }
  to {
        transform: rotate(360deg);
  }
}
div {
      animation: rotate 2s linear infinite;
}
/* 使用CSS3实现边框渐变 */div {
      border-image: linear-gradient(to right, red, yellow, green);
}
    /* 使用H5 Canvas实现简单动画 */var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
setInterval(function() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.beginPath();
      ctx.arc(50, 50, 40, 0, 2 * Math.PI);
      ctx.fillStyle = 'blue';
      ctx.fill();
}
    , 1000);
    

以上几个特效只是冰山一角，CSS3和H5可以实现的特效还有非常多，让网页更加生动、更加好看，也更有趣。因此，程序员和设计师都应该深入学习CSS3和H5的各种特效，让自己能够创造出更加优秀的网页。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！