纯CSS时钟特效代码

来源:https://www.sucaihuo.com/js/2778.html 2017-08-19 16:18浏览(1545) 收藏

一款纯CSS的时钟特效代码,没有使用一行javascript代码,所以不能同步当前的时间,显示的也只是从零开始运行了多少时间,通过看时针、分针、秒针的位置来判断运行了多少时间,当页面刷新的时候,立即恢复初始值,从零开始计时。
纯CSS时钟特效代码
分类:日期时间 > 计时器 难易:初级
查看演示 下载资源 下载积分: 10 积分

页面的head部分,需引入一个CSS样式文件即可,代码如下:

<link type="text/css" rel="stylesheet" href="css/style.css"/>

页面的bodyb部分,用了多个div容器的嵌套结构,代码如下:

<div class="watch">
  <div class="face">
    <div class="numbers">
      <div class="number number-1"> <span>1</span></div>
      <div class="number number-2"> <span>2</span></div>
      <div class="number number-3"> <span>3</span></div>
      <div class="number number-4"> <span>4</span></div>
      <div class="number number-5"> <span>5</span></div>
      <div class="number number-6"> <span>6</span></div>
      <div class="number number-7"> <span>7</span></div>
      <div class="number number-8"> <span>8</span></div>
      <div class="number number-9"> <span>9</span></div>
      <div class="number number-10"> <span>10</span></div>
      <div class="number number-11"> <span>11</span></div>
      <div class="number number-12"> <span>12</span></div>
    </div>
    <div class="arms">
      <div class="arm arm-second">
        <div class="body"></div>
      </div>
      <div class="arm arm-minute"></div>
      <div class="arm arm-hour"></div>
    </div>
  </div>
</div>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2