css+div实现创意条形时钟时间走动效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css+div实现创意条形时钟时间走动效果代码，三个条子分别代码时分秒，分秒每走到60进位。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
  @-webkit-keyframes hour{0%{-webkit-transform:translateX(0px)}4.1666666667%{-webkit-transform:translateX(-120px)}8.3333333333%{-webkit-transform:translateX(-240px)}12.5%{-webkit-transform:translateX(-360px)}16.6666666667%{-webkit-transform:translateX(-480px)}20.8333333333%{-webkit-transform:translateX(-600px)}25%{-webkit-transform:translateX(-720px)}29.1666666667%{-webkit-transform:translateX(-840px)}33.3333333333%{-webkit-transform:translateX(-960px)}37.5%{-webkit-transform:translateX(-1080px)}41.6666666667%{-webkit-transform:translateX(-1200px)}45.8333333333%{-webkit-transform:translateX(-1320px)}50%{-webkit-transform:translateX(-1440px)}54.1666666667%{-webkit-transform:translateX(-1560px)}58.3333333333%{-webkit-transform:translateX(-1680px)}62.5%{-webkit-transform:translateX(-1800px)}66.6666666667%{-webkit-transform:translateX(-1920px)}70.8333333333%{-webkit-transform:translateX(-2040px)}75%{-webkit-transform:translateX(-2160px)}79.1666666667%{-webkit-transform:translateX(-2280px)}83.3333333333%{-webkit-transform:translateX(-2400px)}87.5%{-webkit-transform:translateX(-2520px)}91.6666666667%{-webkit-transform:translateX(-2640px)}95.8333333333%{-webkit-transform:translateX(-2760px)}99%{-webkit-transform:translateX(-3000px)}}@-moz-keyframes hour{0%{-moz-transform:translateX(0px)}4.1666666667%{-moz-transform:translateX(-120px)}8.3333333333%{-moz-transform:translateX(-240px)}12.5%{-moz-transform:translateX(-360px)}16.6666666667%{-moz-transform:translateX(-480px)}20.8333333333%{-moz-transform:translateX(-600px)}25%{-moz-transform:translateX(-720px)}29.1666666667%{-moz-transform:translateX(-840px)}33.3333333333%{-moz-transform:translateX(-960px)}37.5%{-moz-transform:translateX(-1080px)}41.6666666667%{-moz-transform:translateX(-1200px)}45.8333333333%{-moz-transform:translateX(-1320px)}50%{-moz-transform:translateX(-1440px)}54.1666666667%{-moz-transform:translateX(-1560px)}58.3333333333%{-moz-transform:translateX(-1680px)}62.5%{-moz-transform:translateX(-1800px)}66.6666666667%{-moz-transform:translateX(-1920px)}70.8333333333%{-moz-transform:translateX(-2040px)}75%{-moz-transform:translateX(-2160px)}79.1666666667%{-moz-transform:translateX(-2280px)}83.3333333333%{-moz-transform:translateX(-2400px)}87.5%{-moz-transform:translateX(-2520px)}91.6666666667%{-moz-transform:translateX(-2640px)}95.8333333333%{-moz-transform:translateX(-2760px)}99%{-moz-transform:translateX(-3000px)}}@keyframes hour{0%{-webkit-transform:translateX(0px);-moz-transform:translateX(0px);-ms-transform:translateX(0px);-o-transform:translateX(0px);transform:translateX(0px)}4.1666666667%{-webkit-transform:translateX(-120px);-moz-transform:translateX(-120px);-ms-transform:translateX(-120px);-o-transform:translateX(-120px);transform:translateX(-120px)}8.3333333333%{-webkit-transform:translateX(-240px);-moz-transform:translateX(-240px);-ms-transform:translateX(-240px);-o-transform:translateX(-240px);transform:translateX(-240px)}12.5%{-webkit-transform:translateX(-360px);-moz-transform:translateX(-360px);-ms-transform:translateX(-360px);-o-transform:translateX(-360px);transform:translateX(-360px)}16.6666666667%{-webkit-transform:translateX(-480px);-moz-transform:translateX(-480px);-ms-transform:translateX(-480px);-o-transform:translateX(-480px);transform:translateX(-480px)}20.8333333333%{-webkit-transform:translateX(-600px);-moz-transform:translateX(-600px);-ms-transform:translateX(-600px);-o-transform:translateX(-600px);transform:translateX(-600px)}25%{-webkit-transform:translateX(-720px);-moz-transform:translateX(-720px);-ms-transform:translateX(-720px);-o-transform:translateX(-720px);transform:translateX(-720px)}29.1666666667%{-webkit-transform:translateX(-840px);-moz-transform:translateX(-840px);-ms-transform:translateX(-840px);-o-transform:translateX(-840px);transform:translateX(-840px)}33.3333333333%{-webkit-transform:translateX(-960px);-moz-transform:translateX(-960px);-ms-transform:translateX(-960px);-o-transform:translateX(-960px);transform:translateX(-960px)}37.5%{-webkit-transform:translateX(-1080px);-moz-transform:translateX(-1080px);-ms-transform:translateX(-1080px);-o-transform:translateX(-1080px);transform:translateX(-1080px)}41.6666666667%{-webkit-transform:translateX(-1200px);-moz-transform:translateX(-1200px);-ms-transform:translateX(-1200px);-o-transform:translateX(-1200px);transform:translateX(-1200px)}45.8333333333%{-webkit-transform:translateX(-1320px);-moz-transform:translateX(-1320px);-ms-transform:translateX(-1320px);-o-transform:translateX(-1320px);transform:translateX(-1320px)}50%{-webkit-transform:translateX(-1440px);-moz-transform:translateX(-1440px);-ms-transform:translateX(-1440px);-o-transform:translateX(-1440px);transform:translateX(-1440px)}54.1666666667%{-webkit-transform:translateX(-1560px);-moz-transform:translateX(-1560px);-ms-transform:translateX(-1560px);-o-transform:translateX(-1560px);transform:translateX(-1560px)}58.3333333333%{-webkit-transform:translateX(-1680px);-moz-transform:translateX(-1680px);-ms-transform:translateX(-1680px);-o-transform:translateX(-1680px);transform:translateX(-1680px)}62.5%{-webkit-transform:translateX(-1800px);-moz-transform:translateX(-1800px);-ms-transform:translateX(-1800px);-o-transform:translateX(-1800px);transform:translateX(-1800px)}66.6666666667%{-webkit-transform:translateX(-1920px);-moz-transform:translateX(-1920px);-ms-transform:translateX(-1920px);-o-transform:tran.........完整代码请登录后点击上方下载按钮下载查看