CSS3创意个性数字时钟动画特效代码下载



18 69 24



特效描述:CSS3 创意个性 数字时钟动画,CSS3创意个性数字时钟动画特效代码下载

代码结构

1. HTML代码

<div class="container">
	<!-- Hours -->
    <div class="spinner" id="spinner_h1">
      <div class="num num_0" id="num_0_h1">
        <div>0</div>
      </div>
      <div class="num num_1" id="num_1_h1">
        <div>1</div>
      </div>
      <div class="num num_2" id="num_2_h1">
        <div>2</div>
      </div>
    </div>
    <div class="spinner" id="spinner_h2">
      <div class="num num_0" id="num_0_h2">
        <div>0</div>
      </div>
      <div class="num num_1" id="num_1_h2">
        <div>1</div>
      </div>
      <div class="num num_2" id="num_2_h2">
        <div>2</div>
      </div>
      <div class="num num_3" id="num_3_h2">
        <div>3</div>
      </div>
      <div class="num num_4" id="num_4_h2">
        <div>4</div>
      </div>
      <div class="num num_5" id="num_5_h2">
        <div>5</div>
      </div>
      <div class="num num_6" id="num_6_h2">
        <div>6</div>
      </div>
      <div class="num num_7" id="num_7_h2">
        <div>7</div>
      </div>
      <div class="num num_8" id="num_8_h2">
        <div>8</div>
      </div>
      <div class="num num_9" id="num_9_h2">
        <div>9</div>
      </div>
    </div>
    <!-- Minutes -->
    <div class="spinner" id="spinner_m1">
      <div class="num num_0" id="num_0_m1">
        <div>0</div>
      </div>
      <div class="num num_1" id="num_1_m1">
        <div>1</div>
      </div>
      <div class="num num_2" id="num_2_m1">
        <div>2</div>
      </div>
      <div class="num num_3" id="num_3_m1">
        <div>3</div>
      </div>
      <div class="num num_4" id="num_4_m1">
        <div>4</div>
      </div>
      <div class="num num_5" id="num_5_m1">
        <div>5</div>
      </div>
    </div>
    <div class="spinner" id="spinner_m2">
      <div class="num num_0" id="num_0_m2">
        <div>0</div>
      </div>
      <div class="num num_1" id="num_1_m2">
        <div>1</div>
      </div>
      <div class="num num_2" id="num_2_m2">
        <div>2</div>
      </div>
      <div class="num num_3" id="num_3_m2">
        <div>3</div>
      </div>
      <div class="num num_4" id="num_4_m2">
        <div>4</div>
      </div>
      <div class="num num_5" id="num_5_m2">
        <div>5</div>
      </div>
      <div class="num num_6" id="num_6_m2">
        <div>6</div>
      </div>
      <div class="num num_7" id="num_7_m2">
        <div>7</div>
      </div>
      <div class="num num_8" id="num_8_m2">
        <div>8</div>
      </div>
      <div class="num num_9" id="num_9_m2">
        <div>9</div>
      </div>
    </div>
    <!-- Seconds -->
    <div class="spinner" id="spinner_s1">
      <div class="num num_0" id="num_0_s1">
        <div>0</div>
      </div>
      <div class="num num_1" id="num_1_s1">
        <div>1</div>
      </div>
      <div class="num num_2" id="num_2_s1">
        <div>2</div>
      </div>
      <div class="num num_3" id="num_3_s1">
        <div>3</div>
      </div>
      <div class="num num_4" id="num_4_s1">
        <div>4</div>
      </div>
      <div class="num num_5" id="num_5_s1">
        <div>5</div>
      </div>
    </div>
    <div class="spinner" id="spinner_s2">
      <div class="num num_0" id="num_0_s2">
        <div>0</div>
      </div>
      <div class="num num_1" id="num_1_s2">
        <div>1</div>
      </div>
      <div class="num num_2" id="num_2_s2">
        <div>2</div>
      </div>
      <div class="num num_3" id="num_3_s2">
        <div>3</div>
      </div>
      <div class="num num_4" id="num_4_s2">
        <div>4</div>
      </div>
      <div class="num num_5" id="num_5_s2">
        <div>5</div>
      </div>
      <div class="num num_6" id="num_6_s2">
        <div>6</div>
      </div>
      <div class="num num_7" id="num_7_s2">
        <div>7</div>
      </div>
      <div class="num num_8" id="num_8_s2">
        <div>8</div>
      </div>
      <div class="num num_9" id="num_9_s2">
        <div>9</div>
      </div>
    </div>
    <div class="top">></div>
</div>
<script>
//These functions help add, remove or toggle css classes
function tog_class(id, cl) {
  var elem = document.getElementById(id);
  if (elem == null) {
    return 0;
  }
  if (elem.classList.contains(cl) === true) {
    elem.classList.remove(cl);
  } else {
    elem.classList.add(cl);
  }
}
function add_class(id, cl) {
  var elem = document.getElementById(id);
  if (elem == null) {
    return 0;
  }
  if (elem.classList.contains(cl) !== true) {
    elem.classList.add(cl);
  }
}
function rem_class(id, cl) {
  var elem = document.getElementById(id);
  if (elem == null) {
    return 0;
  }
  if (elem.classList.contains(cl) === true) {
    elem.classList.remove(cl);
  }
}
//This function gets the date and does operations using H/M/S
function startTime() {
  var today = new Date();
  var h = today.getHours();
  var m = today.getMinutes();
  var s = today.getSeconds();
  var h1 = (h - h % 10) / 10;
  var h2 = h % 10;
  var m1 = (m - m % 10) / 10;
  var m2 = m % 10;
  var s1 = (s - s % 10) / 10;
  var s2 = s % 10;
  set_spin_class("s1", s1);
  set_spin_class("s2", s2);
  set_spin_class("m1", m1);
  set_spin_class("m2", m2);
  set_spin_class("h1", h1);
  set_spin_class("h2", h2);
  var t = setTimeout(startTime, 500);
}
//This function calls the appropriate class changes
// It receives the type of spinner to change (m1 for example) and changes classes based on the current time
function set_spin_class(target, val) {
  for (i = 0; i < 10; i++) {
    if (i != val) {
      rem_class("spinner_" + target, "spinner_" + target + "_" + i);
      rem_class("num_" + i + "_" + target, "lit");
    }
  }
  add_class("spinner_" + target, "spinner_" + target + "_" + val);
  add_class("num_" + val + "_" + target, "lit");
  if (val === 0) {
    deswitcher(target, val);
  } /*These functions prevent the clock from changing direction*/
  setTimeout(function() {
    switcher(target, val);
  }, 500);
}
function switcher(target, val) {
  switch ("spinner_" + target + "_" + val) {
    case "spinner_h1_2":
      rem_class("spinner_h1", "spinner_h1_2");
      add_class("spinner_h1", "spinner_h1_switch");
      break;
    case "spinner_h2_9":
      rem_class("spinner_h2", "spinner_h1_2");
      add_class("spinner_h2", "spinner_h2_switch");
      break;
    case "spinner_m1_5":
      rem_class("spinner_m1", "spinner_m1_5");
      add_class("spinner_m1", "spinner_m1_switch");
      break;
    case "spinner_m2_9":
      rem_class("spinner_m2", "spinner_m2_9");
      add_class("spinner_m2", "spinner_m2_switch");
      break;
    case "spinner_s1_5":
      rem_class("spinner_s1", "spinner_s1_5");
      add_class("spinner_s1", "spinner_s1_switch");
      break;
    case "spinner_s2_9":
      rem_class("spinner_s2", "spinner_s2_9");
      add_class("spinner_s2", "spinner_s2_switch");
      break;
  }
}
function deswitcher(target, val) {
  rem_class("spinner_" + target, "spinner_" + target + "_switch");
}
//Do stuff here
window.onload = function() {
  startTime();
};
</script>
<div style="text-align:center;margin:80px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 h5图片动画 h5图标动画 html5图片动画 html5图标动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到