酷炫的基于HTML5的2D和3D粒子引擎——Proton

html-css048

酷炫的基于HTML5的2D和3D粒子引擎——Proton,第1张

Proton是一个灵活的html5粒子引擎。他默认支持canvas,dom,webgl,easeljs,pixel五种渲染方式,当然你还可以轻易的自定义自己的渲染器。只需10几行代码就可以打造你想要的粒子效果。同时具有2D版本和3D版本,适合不同的使用场景!

2D版本:

3D版本:

3D版本:

下面通过录制的Gif来演示一部分效果,上面已经有一些了,下面再展示一些:

Proton是一个实现例子效果非常合适的2D和3D例子效果库,非常简单实用,从上面的动图效果也能看出来实现的效果非常的炫酷,而且代码非常简单,文档又非常详细!

CSS3除了为开发者提供二维变形之外,还将动画从二维平面推动到了三维立体状态,能够实现真正的三维特效。

三维变形和二维变形一样,均使用的是transform属性。想要触发三维变形有两种方式:一种方式是通过语法告知浏览器“请采用三维方式进行变形处理”,另一种方式是直接使用CSS3三维变形的语法。

触发方法1:告知浏览器变形方式

-webkit-transform-style:preserve-3d

Tips:IE不支持三维变形,在移动端,绝大多数的浏览器均为WebKit内核,因此,在此句代码之前需要书写-webkit-的前缀内核。

Tips:不要为body元素设置-webkit- transform-style: preserve 3d,否则会对position:fixed定位的元素造成布局影响。在开发当中,如果当前元素属于body的子级元素,又希望应用三维变形,则在body和当前元素之间多嵌套一层结构,并为这层元素应用三维变形即可。

触发方法2:直接使用CSS3变形语法

<!DOCTYPE html>

<head>

    <meta charset="UTF-8">

    <title>言成科技/title>

    <style>

        .box1 {

            width: 150px

            height: 150px

            border: 2px solid blue

        }

        .box1 div {

            height: 150px

            background: rgba(0, 0, 0, 0.5)

            -webkit-transform: translate3d(30px, 60px, 20px) rotateX(30deg)

            transform: translate3d(30px, 60px, 20px) rotateX(30deg)

        }

    </style>

</head>

<body>

    <div class="box1">

        <div></div>

    </div>

</body>

</html>

具体三维变形的具体属性详见《CSS3-3D相关知识详解—视角以及变形方向》

3D效果制作

需求

制作一个立方体,并进行旋转

代码实例

<!DOCTYPE HTML>

<html>

<head>

 <meta charset="utf-8" />

 <title>言成科技</title>

 <link rel="stylesheet" type="text/css" href="https://css.h5course.cn/reset-1.0.0.css" />

 <style>

  .main-bac { -webkit-perspective:1500 } /*设定透视距离*/

  .main{

   width:200px 

   height:200px 

   margin: 0 auto

   position:relative

   -webkit-transform-style:preserve-3d

   -webkit-transition:-webkit-transform 2s ease 0s/*过渡时间*/

  }

  /*基本样式*/

  .main p{

   position: absolute 

   margin: 0 

   padding: 0 

   width: 200px 

   height: 200px  

   text-align: center 

   line-height: 200px 

   font-size: 26px 

   opacity:0.5

  }

  /*将第一个元素Z轴向前移动100px,形成第一个面(正面)*/

  .main p:nth-of-type(1) {

   background-color:red

   -webkit-transform:translateZ(100px)

  }

  /*将第一个元素Z轴向前移动100px,绕x轴旋转90度形成上面的面*/

  .main p:nth-of-type(2) {

   background-color:orange 

   -webkit-transform:rotateX(90deg) translateZ(100px)

  }

  /*将第一个元素Z轴向前移动100px,绕x轴旋转-90度形成下边的面*/

  .main p:nth-of-type(3) {

   background-color:yellow

   -webkit-transform:rotateX(-90deg) translateZ(100px)

  }

  /*将第一个元素Z轴向前移动100px,绕y轴旋转90度形成右侧的面*/

  .main p:nth-of-type(4) {

   background-color:green

   -webkit-transform:rotateY(90deg) translateZ(100px)

  }

  /*将第一个元素Z轴向前移动100px,绕y轴旋转-90度形成左侧的面*/

  .main p:nth-of-type(5) {

   background-color:#b435bf

   -webkit-transform:rotateY(-90deg) translateZ(100px)

  }

  /*将第一个元素Z轴向前移动100px,绕y轴旋转180度形成后面(背面)*/

  .main p:nth-of-type(6) {

   background-color:blue

   -webkit-transform:rotateY(180deg) translateZ(100px)

  }

  /*鼠标移入时绕Y轴旋转180度,绕Z轴旋转180度*/

  .main:hover {-webkit-transform:rotateY(180deg) rotateZ(180deg) }   

 </style>

</head>

<body>

 <div class="main-bac">

  <div class="main">

   <p>言成科技</p>

   <p>3D立方体</p>

   <p>HTML5学堂</p>

   <p>3D立方体</p>

   <p>码匠</p>

   <p>JavaScript</p>

  </div>              

 </div>

</body>

</html>

代码解析

当鼠标移入的时候,立方体逐渐的发生旋转(非突变),围绕X轴旋转45度的同时,围绕Y轴旋转45度。

当鼠标移出立方体时,立方体恢复到初始状态。在最开始状态时,并没有采用无限远的视角,设置一定的视角,让刚开始时直视立方体时,不会觉得是一个平面。

3D效果制作-目标效果图

以上资料来源:《HTML5布局之路》