Giter Club home page Giter Club logo

vector's Introduction

vector

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

前言

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

案例一

原版

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

demo

http://xuanfengge.com/demo/201411/vector/demo1.html

使用

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

特点

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

sdfdsf

案例二

应用

http://www.xuanfengge.com/nav

demo

http://xuanfengge.com/demo/201411/vector/demo2.html

特点

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

sdfgfdg

vector's People

Contributors

xuanfeng avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.