基于Canvas实现的炫酷3D动画大背景

  • 首页 > 代码研究院
  • 作者:梓熙
  • 时间: 2016年9月8日 20:50
  • 字数:654 个
  • 字号:
  • 评论:0 条
  • 浏览:1196 次
  • 百度:百度已收录
  • 分类: 代码研究院
  • 时间:2016-9-8 20:50 热度:1196° 评论:0 条 

    前言

    HTML5 中新增标签Canvas,Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作。利用JS,可以实现一些超炫酷的效果。本文所介绍的是基于Canvas实现的炫酷3D动画大背景。

    案例一

    原版

    QQ 官网 http://im.qq.com/pcqq/

    demo

    http://zixiylw.top/demo/Canvas/Canvas1.html

    使用

    为方便大家使用,轩枫阁已将主体代码抽出,并示范使用方法(具体看源码),只需加载相关JS并调用即可。不依赖jQery,但是需注意代码执行顺序。

    特点

    改变3D大背景块颜色,清晰可见,适用于文字较少、加以配图的页面。

    案例二


    demo

    http://zixiylw.top/demo/Canvas/Canvas2.html

    特点

    相比于demo1,这个方案主要是通过改变body的背景色来变换主题,配合CSS3渐变动画使得衔接自然。3D背景透明度降低,起衬托作用,适用于文字较多的页面。

    资源下载

    http://pan.baidu.com/s/1miIuNji

    正文到此结束
    您阅读这篇文章共花了: 
    本文链接:http://zixiylw.top/Canvas3D.html
    版权声明:若无特殊注明,本文皆为《梓熙》原创,转载请保留文章出处。
    捐赠支持:如果觉得这篇文章对您有帮助,请“扫一扫”鼓励作者!

    热门推荐

    Hello! How do you see it?

    你还可以输入250 / 250 个字

    嘻嘻 大笑 可怜 吃惊 害羞 调皮 鄙视 示爱 大哭 开心 偷笑 嘘 奸笑 委屈 抱抱 愤怒 思考 日了狗


    既然没有吐槽,那就赶紧抢沙发吧!
    返回顶部    返回首页    手气不错    后花园   
    版权所有:梓熙博客    站点维护: 梓熙   +主题模板:【PJAX 梓熙主题】        sitemap