jQuery和CSS3超炫查找质数动画

所属分类:其他-动画效果

 23621  336  查看评论 (1)
分享到微信朋友圈
X
jQuery和CSS3超炫查找质数动画 ie兼容9

实现方法

HTML结构

该查找质数特效的HTML结构分为三个部分:section.output是用于显示已经查找过的数字,即质数墙。section.display是当前正在查找的数字,也就是屏幕中间的数字动画。还有一个<button>元素,它位于屏幕的右上角,可以暂停当前的质数查找。

<section class="output">
      
</section>
 
<section class="display">
     
</section>
 
<button class="control">
    <span class="play"> > </span>
    <span class="pause"> || </span>
</button>

CSS样式

该查找质数动画的CSS样式非常简单。它分别为c0-c5的不同class的质数设置不同的颜色。然后当前正在动画的数字使用translate3d()函数来制作质数的3D动画效果。这里使用了多个不同的translate3d()函数,用以制作不同的3D动画效果。

.display.prime {
  color: #62efab;
  opacity: 0.7;
}
.display.prime.c0 {
  color: #d781f9;
}
.display.prime.c1 {
  color: #80e3f7;
}
.display.prime.c2 {
  color: #ffe868;
}
.display.prime.c3 {
  color: #ef7658;
}
.display.prime.c4 {
  color: #f26395;
}
.display.prime.c5 {
  color: #62efab;
}
.display.out {
  opacity: 0;
}
.display.out.lb {
  -webkit-transform: translate3d(-2em, 1em, 0em);
          transform: translate3d(-2em, 1em, 0em);
}
.display.out.l {
  -webkit-transform: translate3d(-2em, 0em, 0em);
          transform: translate3d(-2em, 0em, 0em);
}
.display.out.lt {
  -webkit-transform: translate3d(-2em, -1em, 0em);
          transform: translate3d(-2em, -1em, 0em);
}
.display.out.t {
  -webkit-transform: translate3d(0em, -1em, 0em);
          transform: translate3d(0em, -1em, 0em);
}
.display.out.rt {
  -webkit-transform: translate3d(2em, -1em, 0em);
          transform: translate3d(2em, -1em, 0em);
}
.display.out.r {
  -webkit-transform: translate3d(2em, 0em, 0em);
          transform: translate3d(2em, 0em, 0em);
}
.display.out.rb {
  -webkit-transform: translate3d(2em, 1em, 0em);
          transform: translate3d(2em, 1em, 0em);
}
.display.out.b {
  -webkit-transform: translate3d(0em, 1em, 0em);
          transform: translate3d(0em, 1em, 0em);
}

 JAVASCRIPT

质数的查找和显示都是在jQuery代码中完成的。isPrime()函数用于判断一个数是不是质数。outputPrime()和outputNormal()函数分别用于输出质数和非质数。display()方法则用于查找质数的动画。具体代码请参考下载文件。

function isPrime(n) {
    var i = 2, n = n || 1;
    if ( n === 1 ) { return false; }
    if ( n < 4 ) { return true; }
    while( i < n ) {
      if ( n % i === 0 ) { return false; }
      i++;
    }
    return true;
  }
  function outputPrime(n, c) {
      if(n) {
          $output.append("<i class='prime" + c + "'>" + n + "</i>");
      }
  }
  function outputNormal(n) {
      if(n) {
          $output.append("<i>" + n + "</i>");
      }
  }
  function display(n, prime, c) {           
      var $temp, pos;
      if(n) {
          $display.text(n);
          console.log(arguments);
          if(prime) {
              pos = Math.floor(Math.random()*coord.length);
              $temp = $display
                  .clone()
                  .addClass("prime c" + c)
                  .insertAfter( $display );
              setTimeout(function() {
                  $temp
                      .addClass("out")
                      .addClass(coord[pos]);
              }, 10);         
              setTimeout(function() {
                  $temp.remove();
              }, 1200);
          }
      }
  }
相关插件-动画效果

超简单自定义粒子背景动画插件(原创)

这是一个可以自定义粒子背景的插件,可实现全屏,鼠标跟随,自定义坐标三种方式的动画控制,同时也可以使用不同颜色或者不同的图片实现粒子的个性化
  动画效果
 32604  308

图片酷炫粒子动画效果

学习es6顺便写的 使用canvas粒子化图片 利用easying.js里面的公式计算粒子动态轨迹方程 x轴方向和y轴方向的公式均可以选择 可以设置粒子运动时间档
  动画效果
 53657  487

步骤填写表单

美观的填写表单界面
  动画效果
 47333  411

仿机场的文字切换特效

这是一款模仿机场文字切换的简单的css文字动画效果,一共有六种模式。
  动画效果
 31219  412

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    DFFZMXJ 0
    2019/1/29 10:45:04
    可以自动滚到底,这样应该会更好。 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复