css3 动画数字-jQuery和CSS3令人眼花缭乱的查找因子3D动画特效

这是一个特别耀眼的jQuery和CSS3耀眼的搜索素动画特效。 此特效会在屏幕中间显示当前正在搜索的号码，并在页面上显示已经搜索过的号码。 如果质数中间的数字将以3D淡出动画的形式显示质数，并在质数墙中突出显示质数。

制作方法 HTML结构

素数搜索效果的HTML结构分为三个部分：section.output用于显示已经搜索到的数字，即素数墙。 section.display是当前正在查找的数字css3 动画数字，也就是屏幕中间数字的动画。 还有一个位于屏幕右上角的元素css3 动画数字，可以暂停当前的素数搜索。

     


    


    ►
    ∎
           
              

CSS 样式

用于查找主要动画的 CSS 样式特别简单。 它为c0-c5不同类别的素数设置不同的颜色。 然后当前正在动画的数字使用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);
}               
              

脚本语言

查找和显示素数是通过 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("" + n + "");
      }
  }
  function outputNormal(n) {
      if(n) {
          $output.append("" + n + "");
      }
  }
  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);
          }
      }
  }
              

1.HTML5画布耀眼的3D蓝宝石动漫

几天前，我们与您分享了一部基于HTML5 Canvas的3D砖石动漫，制作非常逼真。今天我们要分享另一部基于 HTML5Canvas 的 3D 蓝宝石动漫，我们可以通过键盘的拖拽来实现对蓝宝石各个角度的观察，并通过键盘滚轮缩放宝石的大小酷炫css3，同时蓝宝石的表面会不时发出耀眼的光芒， 不得不说，Canvas在网页素描方面真的是无所不能的。

在线演示

源代码下载

2.SVG/CSS3 3D阴影文字阴影腰线流动效果

今天我们就和大家分享另一款基于 SVG 和 CSS3 的文字动漫酷炫css3，它的特点是文字中的阴影效果，呈现出 3D 立体的视觉效果，而且这不是通常的阴影，而是使用了 SVG 路径素描功能，阴影衬里，影腰线也可以随着键盘略读呈现流畅的动漫效果， 您还可以支持文本。

在线演示

源代码下载

3. CSS3 3D文字拉伸发光动漫

自诞生以来

CSS3标准，我们网页上的元素也变得越来越生动，甚至最单调的文字也变得非常吸引人。这次要分享的基于CSS3的3D文字拉伸动漫非常好，当我们把键盘略过文字时，文字会出现拉伸发光的动漫特效，看起来非常大气。

在线演示

源代码下载

4. CSS3/SVG火背景笔划文字动漫

我们之前分享过一些令人眼花缭乱的带有笔触的 CSS3 文本动画效果，比如这个基于 P5 .JS的 HTML5 文本笔触粒子动画。今天要分享一部CSS3笔画文字动画，这次笔画以动态燃烧的火焰为背景，还用SVG路径功能勾勒出文字的镂空造型，非常耀眼。

在线演示

源代码下载

5. CSS3 3D立方体菜单导航

很久以前，我们分享了一个特别耀眼的 CSS3 3D 动漫菜单，当鼠标悬停在菜单项上时，它会以 3D 形式翻转。这次我们将介绍另一个基于 CSS3 的 3D 立方体菜单导航，这个菜单项以小图标的形式显示在六面体的每个面上，当点击主菜单时，六面体会旋转以显示相应的子菜单。

在线演示

源代码下载

6. 普通CSS3简单下拉菜单 您可以为菜单项定义不同的颜色

我们共享了各种 jQuery 和 CSS3 下拉菜单，包括下拉菜单

支持右键菜单，如jQuery自定义下拉菜单选择菜单，以及多级下拉菜单，如jQuery两侧带有小图标的多级下拉菜单。今天我们将分享一个基于纯CSS的建议下拉菜单，它的特点是外观非常简单，但看起来也很漂亮，因为每个菜单项都有不同的颜色边框。同时，此菜单可以默认展开菜单项，也可以点击按钮展开，使用起来更灵活。

在线演示

源代码下载

7.SVG/CSS3 抠图3D自行车骑行动漫之前我们分享过一些基于 CSS3 和 SVG 的自行车动漫，

比如这款 SVG/CSS3 自行车模拟自行车驾驶动漫和纯 CSS3 3D 自行车动漫，非常酷。今天我们就给大家介绍另一部基于SVG的3D镂空自行车骑行动漫，与上面的自行车动漫不同，这部自行车动漫有一个运动员在步行，而自行车是镂空的形状，通过SVG腰线渲染动态改变腰线的位置和颜色，让自行车呈现出三维运动的视觉效果。

在线演示

源代码下载

8.漂亮的jQuery第一屏产品显示焦点图插件

这是一个非常精致简洁的jQuery产品显示焦点图插件，首先，图片切换过渡动画采用淡入淡出动画特效，其次，图片上方左右浮动两个切换按钮，当鼠标悬停在图片上时，就会显示这两个切换按钮。同时，我们还可以点击图片下方的一排按钮切换到任意图片。

在线演示

源代码下载

9.jQuery简单甜蜜标签菜单插件 可以初始化多个实例

不久前，我们分享了一个轻量级，甜美的jQuery选项卡菜单插入，具有非常个性化的外观。这次我们还将向您介绍一个基于 jQuery 的 Tab 菜单插件，这个 jQuery Tab 插件非常简单，唯一的 CSS 渲染是选项卡菜单项的边框颜色。此外，这个 Tab 插件还可以同时实例化多个菜单实例，所以更实用。

在线演示

源代码下载

10.8 令人眼花缭乱的HTML5画布星空背景动漫

今天我们就和大家分享一个基于HTML5Canvas的星空背景动漫，动画主要模拟星空背景快速移动的视觉效果。只要我们在星空中掠过键盘，星空就会加速运动，看起来特别有风。同时，总共有8种不同的星空动漫，我们可以将其用作自己的博客背景。

在线演示

源代码下载