您正在使用IPV4(3.92.28.52)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情       【腾讯云】爆款1核2G云服务器首年48元,还有iPad Pro、Bose耳机、京东卡等你来抽!      
虚位以待
2021年 冬至节 20
2021年 圣诞节 24
2022年 元 旦 31
2022年 春 节 62
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    纯CSS3打造精致时钟
    内容摘要: !DOCTYPEhtmlhtmllang='zh-CN'headmetacharset='UTF-8'/metahttp-equiv='X-UA-Compatible'content='IE=edge,chrome=1'metaname='renderer'content='webkit'title纯CSS3打造精致时钟/title/headbodydivc......
    <!DOCTYPEhtml>

    <htmllang="zh-CN">

    <head>

    <metacharset="UTF-8"/>

    <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">

    <metaname="renderer"content="webkit">

    <title>纯CSS3打造精致时钟</title>

    </head>

    <body>

    <divclass="demo-wrapper">

    <style>

    .demo-wrapper.demo-title{color:rgba(255,255,255,.85);}

    .demo-linksa{color:rgba(255,255,255,.5);}

    .copyrighta{color:rgba(255,255,255,.5)}

    body{

    font-size:62.5%;

    margin:1em;

    background:#232425;

    }

    ul{

    list-style:none;

    margin:0;

    padding:0;

    }

    #watch{

    font-size:1em;

    position:relative;

    margin:10em0;

    }

    #watch.frame-face{

    position:relative;

    width:30em;

    height:30em;

    margin:2emauto;

    border-radius:15em;

    background:-webkit-linear-gradient(top,#f9f9f9,#666);

    background:-moz-linear-gradient(top,#f9f9f9,#666);

    background:-webkit-linear-gradient(tobottom,#f9f9f9,#666);

    background:linear-gradient(tobottom,#f9f9f9,#666);

    box-shadow:rgba(0,0,0,.8).5em.5em4em;

    }

    #watch.frame-face:before{

    content:'';

    width:29.4em;

    height:29.4em;

    border-radius:14.7em;

    position:absolute;

    top:.3em;

    left:.3em;

    background:-webkit-linear-gradient(135deg,rgba(246,248,249,0)0%,rgba(229,235,238,1)50%,rgba(205,212,217,1)51%,rgba(245,247,249,0)100%),-webkit-radial-gradient(center,ellipsecover,rgba(246,248,249,1)0%,rgba(229,235,238,1)65%,rgba(205,212,217,1)66%,rgba(245,247,249,1)100%);

    background:-moz-linear-gradient(135deg,rgba(246,248,249,0)0%,rgba(229,235,238,1)50%,rgba(205,212,217,1)51%,rgba(245,247,249,0)100%),-moz-radial-gradient(center,ellipsecover,rgba(246,248,249,1)0%,rgba(229,235,238,1)65%,rgba(205,212,217,1)66%,rgba(245,247,249,1)100%);

    background:-webkit-linear-gradient(-45deg,rgba(246,248,249,0)0%,rgba(229,235,238,1)50%,rgba(205,212,217,1)51%,rgba(245,247,249,0)100%),-webkit-radial-gradient(ellipseatcenter,rgba(246,248,249,1)0%,rgba(229,235,238,1)65%,rgba(205,212,217,1)66%,rgba(245,247,249,1)100%);

    background:linear-gradient(135deg,rgba(246,248,249,0)0%,rgba(229,235,238,1)50%,rgba(205,212,217,1)51%,rgba(245,247,249,0)100%),radial-gradient(ellipseatcenter,rgba(246,248,249,1)0%,rgba(229,235,238,1)65%,rgba(205,212,217,1)66%,rgba(245,247,249,1)100%);

    }

    #watch.frame-face:after{

    content:'';

    width:28em;

    height:28em;

    border-radius:14.2em;

    position:absolute;

    top:.9em;

    left:.9em;

    box-shadow:insetrgba(0,0,0,.2).2em.2em1em;

    border:.1emsolidrgba(0,0,0,.2);

    background:-webkit-linear-gradient(top,#fff,#ccc);

    background:-moz-linear-gradient(top,#fff,#ccc);

    background:-webkit-linear-gradient(tobottom,#fff,#ccc);

    background:linear-gradient(tobottom,#fff,#ccc);

    }

    #watch.minute-marksli{

    display:block;

    width:.2em;

    height:.6em;

    background:#929394;

    position:absolute;

    top:50%;

    left:50%;

    margin:-.4em00-.1em;

    }

    #watch.minute-marksli:first-child{

    -webkit-transform:rotate(6deg)translateY(-12.7em);

    -moz-transform:rotate(6deg)translateY(-12.7em);

    transform:rotate(6deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(2){

    -webkit-transform:rotate(12deg)translateY(-12.7em);

    -moz-transform:rotate(12deg)translateY(-12.7em);

    transform:rotate(12deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(3){

    -webkit-transform:rotate(18deg)translateY(-12.7em);

    -moz-transform:rotate(18deg)translateY(-12.7em);

    transform:rotate(18deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(4){

    -webkit-transform:rotate(24deg)translateY(-12.7em);

    -moz-transform:rotate(24deg)translateY(-12.7em);

    transform:rotate(24deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(5){

    -webkit-transform:rotate(36deg)translateY(-12.7em);

    -moz-transform:rotate(36deg)translateY(-12.7em);

    transform:rotate(36deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(6){

    -webkit-transform:rotate(42deg)translateY(-12.7em);

    -moz-transform:rotate(42deg)translateY(-12.7em);

    transform:rotate(42deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(7){

    -webkit-transform:rotate(48deg)translateY(-12.7em);

    -moz-transform:rotate(48deg)translateY(-12.7em);

    transform:rotate(48deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(8){

    -webkit-transform:rotate(54deg)translateY(-12.7em);

    -moz-transform:rotate(54deg)translateY(-12.7em);

    transform:rotate(54deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(9){

    -webkit-transform:rotate(66deg)translateY(-12.7em);

    -moz-transform:rotate(66deg)translateY(-12.7em);

    transform:rotate(66deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(10){

    -webkit-transform:rotate(72deg)translateY(-12.7em);

    -moz-transform:rotate(72deg)translateY(-12.7em);

    transform:rotate(72deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(11){

    -webkit-transform:rotate(78deg)translateY(-12.7em);

    -moz-transform:rotate(78deg)translateY(-12.7em);

    transform:rotate(78deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(12){

    -webkit-transform:rotate(84deg)translateY(-12.7em);

    -moz-transform:rotate(84deg)translateY(-12.7em);

    transform:rotate(84deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(13){

    -webkit-transform:rotate(96deg)translateY(-12.7em);

    -moz-transform:rotate(96deg)translateY(-12.7em);

    transform:rotate(96deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(14){

    -webkit-transform:rotate(102deg)translateY(-12.7em);

    -moz-transform:rotate(102deg)translateY(-12.7em);

    transform:rotate(102deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(15){

    -webkit-transform:rotate(108deg)translateY(-12.7em);

    -moz-transform:rotate(108deg)translateY(-12.7em);

    transform:rotate(108deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(16){

    -webkit-transform:rotate(114deg)translateY(-12.7em);

    -moz-transform:rotate(114deg)translateY(-12.7em);

    transform:rotate(114deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(17){

    -webkit-transform:rotate(126deg)translateY(-12.7em);

    -moz-transform:rotate(126deg)translateY(-12.7em);

    transform:rotate(126deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(18){

    -webkit-transform:rotate(132deg)translateY(-12.7em);

    -moz-transform:rotate(132deg)translateY(-12.7em);

    transform:rotate(132deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(19){

    -webkit-transform:rotate(138deg)translateY(-12.7em);

    -moz-transform:rotate(138deg)translateY(-12.7em);

    transform:rotate(138deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(20){

    -webkit-transform:rotate(144deg)translateY(-12.7em);

    -moz-transform:rotate(144deg)translateY(-12.7em);

    transform:rotate(144deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(21){

    -webkit-transform:rotate(156deg)translateY(-12.7em);

    -moz-transform:rotate(156deg)translateY(-12.7em);

    transform:rotate(156deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(22){

    -webkit-transform:rotate(162deg)translateY(-12.7em);

    -moz-transform:rotate(162deg)translateY(-12.7em);

    transform:rotate(162deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(23){

    -webkit-transform:rotate(168deg)translateY(-12.7em);

    -moz-transform:rotate(168deg)translateY(-12.7em);

    transform:rotate(168deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(24){

    -webkit-transform:rotate(174deg)translateY(-12.7em);

    -moz-transform:rotate(174deg)translateY(-12.7em);

    transform:rotate(174deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(25){

    -webkit-transform:rotate(186deg)translateY(-12.7em);

    -moz-transform:rotate(186deg)translateY(-12.7em);

    transform:rotate(186deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(26){

    -webkit-transform:rotate(192deg)translateY(-12.7em);

    -moz-transform:rotate(192deg)translateY(-12.7em);

    transform:rotate(192deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(27){

    -webkit-transform:rotate(198deg)translateY(-12.7em);

    -moz-transform:rotate(198deg)translateY(-12.7em);

    transform:rotate(198deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(28){

    -webkit-transform:rotate(204deg)translateY(-12.7em);

    -moz-transform:rotate(204deg)translateY(-12.7em);

    transform:rotate(204deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(29){

    -webkit-transform:rotate(216deg)translateY(-12.7em);

    -moz-transform:rotate(216deg)translateY(-12.7em);

    transform:rotate(216deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(30){

    -webkit-transform:rotate(222deg)translateY(-12.7em);

    -moz-transform:rotate(222deg)translateY(-12.7em);

    transform:rotate(222deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(31){

    -webkit-transform:rotate(228deg)translateY(-12.7em);

    -moz-transform:rotate(228deg)translateY(-12.7em);

    transform:rotate(228deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(32){

    -webkit-transform:rotate(234deg)translateY(-12.7em);

    -moz-transform:rotate(234deg)translateY(-12.7em);

    transform:rotate(234deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(33){

    -webkit-transform:rotate(246deg)translateY(-12.7em);

    -moz-transform:rotate(246deg)translateY(-12.7em);

    transform:rotate(246deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(34){

    -webkit-transform:rotate(252deg)translateY(-12.7em);

    -moz-transform:rotate(252deg)translateY(-12.7em);

    transform:rotate(252deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(35){

    -webkit-transform:rotate(258deg)translateY(-12.7em);

    -moz-transform:rotate(258deg)translateY(-12.7em);

    transform:rotate(258deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(36){

    -webkit-transform:rotate(264deg)translateY(-12.7em);

    -moz-transform:rotate(264deg)translateY(-12.7em);

    transform:rotate(264deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(37){

    -webkit-transform:rotate(276deg)translateY(-12.7em);

    -moz-transform:rotate(276deg)translateY(-12.7em);

    transform:rotate(276deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(38){

    -webkit-transform:rotate(282deg)translateY(-12.7em);

    -moz-transform:rotate(282deg)translateY(-12.7em);

    transform:rotate(282deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(39){

    -webkit-transform:rotate(288deg)translateY(-12.7em);

    -moz-transform:rotate(288deg)translateY(-12.7em);

    transform:rotate(288deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(40){

    -webkit-transform:rotate(294deg)translateY(-12.7em);

    -moz-transform:rotate(294deg)translateY(-12.7em);

    transform:rotate(294deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(41){

    -webkit-transform:rotate(306deg)translateY(-12.7em);

    -moz-transform:rotate(306deg)translateY(-12.7em);

    transform:rotate(306deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(42){

    -webkit-transform:rotate(312deg)translateY(-12.7em);

    -moz-transform:rotate(312deg)translateY(-12.7em);

    transform:rotate(312deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(43){

    -webkit-transform:rotate(318deg)translateY(-12.7em);

    -moz-transform:rotate(318deg)translateY(-12.7em);

    transform:rotate(318deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(44){

    -webkit-transform:rotate(324deg)translateY(-12.7em);

    -moz-transform:rotate(324deg)translateY(-12.7em);

    transform:rotate(324deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(45){

    -webkit-transform:rotate(336deg)translateY(-12.7em);

    -moz-transform:rotate(336deg)translateY(-12.7em);

    transform:rotate(336deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(46){

    -webkit-transform:rotate(342deg)translateY(-12.7em);

    -moz-transform:rotate(342deg)translateY(-12.7em);

    transform:rotate(342deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(47){

    -webkit-transform:rotate(348deg)translateY(-12.7em);

    -moz-transform:rotate(348deg)translateY(-12.7em);

    transform:rotate(348deg)translateY(-12.7em);

    }

    #watch.minute-marksli:nth-child(48){

    -webkit-transform:rotate(354deg)translateY(-12.7em);

    -moz-transform:rotate(354deg)translateY(-12.7em);

    transform:rotate(354deg)translateY(-12.7em);

    }

    #watch.digits{

    width:30em;

    height:30em;

    border-radius:15em;

    position:absolute;

    top:0;

    left:50%;

    margin-left:-15em;

    }

    #watch.digitsli{

    font-size:1.6em;

    display:block;

    width:1.6em;

    height:1.6em;

    position:absolute;

    top:50%;

    left:50%;

    line-height:1.6em;

    text-align:center;

    margin:-.8em00-.8em;

    font-weight:bold;

    }

    #watch.digitsli:nth-child(1){

    -webkit-transform:translate(3.9em,-6.9em);

    -moz-transform:translate(3.9em,-6.9em);

    transform:translate(3.9em,-6.9em);

    }

    #watch.digitsli:nth-child(2){

    -webkit-transform:translate(6.9em,-4em);

    -moz-transform:translate(6.9em,-4em);

    transform:translate(6.9em,-4em);

    }

    #watch.digitsli:nth-child(3){

    -webkit-transform:translate(8em,0);

    -moz-transform:translate(8em,0);

    transform:translate(8em,0);

    }

    #watch.digitsli:nth-child(4){

    -webkit-transform:translate(6.8em,4em);

    -moz-transform:translate(6.8em,4em);

    transform:translate(6.8em,4em);

    }

    #watch.digitsli:nth-child(5){

    -webkit-transform:translate(3.9em,6.9em);

    -moz-transform:translate(3.9em,6.9em);

    transform:translate(3.9em,6.9em);

    }

    #watch.digitsli:nth-child(6){

    -webkit-transform:translate(0,8em);

    -moz-transform:translate(0,8em);

    transform:translate(0,8em);

    }

    #watch.digitsli:nth-child(7){

    -webkit-transform:translate(-3.9em,6.9em);

    -moz-transform:translate(-3.9em,6.9em);

    transform:translate(-3.9em,6.9em);

    }

    #watch.digitsli:nth-child(8){

    -webkit-transform:translate(-6.8em,4em);

    -moz-transform:translate(-6.8em,4em);

    transform:translate(-6.8em,4em);

    }

    #watch.digitsli:nth-child(9){

    -webkit-transform:translate(-8em,0);

    -moz-transform:translate(-8em,0);

    transform:translate(-8em,0);

    }

    #watch.digitsli:nth-child(10){

    -webkit-transform:translate(-6.9em,-4em);

    -moz-transform:translate(-6.9em,-4em);

    transform:translate(-6.9em,-4em);

    }

    #watch.digitsli:nth-child(11){

    -webkit-transform:translate(-3.9em,-6.9em);

    -moz-transform:translate(-3.9em,-6.9em);

    transform:translate(-3.9em,-6.9em);

    }

    #watch.digitsli:nth-child(12){

    -webkit-transform:translate(0,-8em);

    -moz-transform:translate(0,-8em);

    transform:translate(0,-8em);

    }

    #watch.digits:before{

    content:'';

    width:1.6em;

    height:1.6em;

    border-radius:.8em;

    position:absolute;

    top:50%;

    left:50%;

    margin:-.8em00-.8em;

    background:#121314;

    }

    #watch.digits:after{

    content:'';

    width:4em;

    height:4em;

    border-radius:2.2em;

    position:absolute;

    top:50%;

    left:50%;

    margin:-2.1em00-2.1em;

    border:.1emsolid#c6c6c6;

    background:-webkit-radial-gradient(center,ellipsecover,rgba(200,200,200,0),rgba(190,190,190,1)90%,rgba(130,130,130,1)100%);

    background:-moz-radial-gradient(center,ellipsecover,rgba(200,200,200,0),rgba(190,190,190,1)90%,rgba(130,130,130,1)100%);

    background:-webkit-radial-gradient(ellipseatcenter,rgba(200,200,200,0),rgba(190,190,190,1)90%,rgba(130,130,130,1)100%);

    background:radial-gradient(ellipseatcenter,rgba(200,200,200,0),rgba(190,190,190,1)90%,rgba(130,130,130,1)100%);

    }

    @-webkit-keyframeshours{

    to{

    -webkit-transform:rotate(335deg)

    }

    }

    @-moz-keyframeshours{

    to{

    -moz-transform:rotate(335deg)

    }

    }

    @keyframeshours{

    to{

    transform:rotate(335deg)

    }

    }

    #watch.hours-hand{

    width:.8em;

    height:7em;

    border-radius:00.9em.9em;

    background:#232425;

    position:absolute;

    bottom:50%;

    left:50%;

    margin:00-.8em-.4em;

    box-shadow:#232425002px;

    -webkit-transform-origin:0.4em6.2em;

    -webkit-transform:rotate(-25deg);

    -webkit-animation:hours43200slinear0sinfinite;

    -moz-transform-origin:0.4em6.2em;

    -moz-transform:rotate(-25deg);

    -moz-animation:hours43200slinear0sinfinite;

    transform-origin:0.4em6.2em;

    transform:rotate(-25deg);

    animation:hours43200slinear0sinfinite;

    }

    #watch.hours-hand:before{

    content:'';

    background:inherit;

    width:1.8em;

    height:.8em;

    border-radius:00.8em.8em;

    box-shadow:#232425001px;

    position:absolute;

    top:-.7em;

    left:-.5em;

    }

    #watch.hours-hand:after{

    content:'';

    width:0;

    height:0;

    border:.9emsolid#232425;

    border-width:0.9em2.4em.9em;

    border-left-color:transparent;

    border-right-color:transparent;

    position:absolute;

    top:-3.1em;

    left:-.5em;

    }

    @-webkit-keyframesminutes{

    to{

    -webkit-transform:rotate(422deg)

    }

    }

    @-moz-keyframesminutes{

    to{

    -moz-transform:rotate(422deg)

    }

    }

    @keyframesminutes{

    to{

    transform:rotate(422deg)

    }

    }

    #watch.minutes-hand{

    width:.8em;

    height:12.5em;

    border-radius:.5em;

    background:#343536;

    position:absolute;

    bottom:50%;

    left:50%;

    margin:00-1.5em-.4em;

    box-shadow:#343536002px;

    -webkit-transform-origin:0.4em11em;

    -webkit-transform:rotate(62deg);

    -webkit-animation:minutes3600slinear0sinfinite;

    -moz-transform-origin:0.4em11em;

    -moz-transform:rotate(62deg);

    -moz-animation:minutes3600slinear0sinfinite;

    transform-origin:0.4em11em;

    transform:rotate(62deg);

    animation:minutes3600slinear0sinfinite;

    }

    @-webkit-keyframesseconds{

    to{

    -webkit-transform:rotate(480deg)

    }

    }

    @-moz-keyframesseconds{

    to{

    -moz-transform:rotate(480deg)

    }

    }

    @keyframesseconds{

    to{

    transform:rotate(480deg)

    }

    }

    #watch.seconds-hand{

    width:.2em;

    height:14em;

    border-radius:.1em.1em00/10em10em00;

    background:#c00;

    position:absolute;

    bottom:50%;

    left:50%;

    margin:00-2em-.1em;

    box-shadow:rgba(0,0,0,.8)00.2em;

    -webkit-transform-origin:0.1em12em;

    -webkit-transform:rotate(120deg);

    -webkit-animation:seconds60ssteps(60,end)0sinfinite;

    -moz-transform-origin:0.1em12em;

    -moz-transform:rotate(120deg);

    -moz-animation:seconds60ssteps(60,end)0sinfinite;

    transform-origin:0.1em12em;

    transform:rotate(120deg);

    animation:seconds60ssteps(60,end)0sinfinite;

    }

    #watch.seconds-hand:after{

    content:'';

    width:1.4em;

    height:1.4em;

    border-radius:.7em;

    background:inherit;

    position:absolute;

    left:-.65em;

    bottom:1.35em;

    }

    #watch.seconds-hand:before{

    content:'';

    width:.8em;

    height:3em;

    border-radius:.2em.2em.4em.4em/.2em.2em2em2em;

    box-shadow:rgba(0,0,0,.8)00.2em;

    background:inherit;

    position:absolute;

    left:-.35em;

    bottom:-3em;

    }

    #watch.digital-wrap{

    width:9em;

    height:3em;

    border:.1emsolid#222;

    border-radius:.2em;

    position:absolute;

    top:50%;

    left:50%;

    margin:3em00-4.5em;

    overflow:hidden;

    background:#4c4c4c;

    background:-webkit-linear-gradient(top,#4c4c4c0%,#0f0f0f100%);

    background:-moz-linear-gradient(top,#4c4c4c0%,#0f0f0f100%);

    background:-ms-linear-gradient(top,#4c4c4c0%,#0f0f0f100%);

    background:-o-linear-gradient(top,#4c4c4c0%,#0f0f0f100%);

    background:-webkit-linear-gradient(tobottom,#4c4c4c0%,#0f0f0f100%);

    background:-moz-linear-gradient(tobottom,#4c4c4c0%,#0f0f0f100%);

    background:linear-gradient(tobottom,#4c4c4c0%,#0f0f0f100%);

    }

    #watch.digital-wrapul{

    float:left;

    width:2.85em;

    height:3em;

    border-right:.1emsolid#000;

    color:#ddd;

    font-family:Consolas,monaco,monospace;

    }

    #watch.digital-wrapul:last-child{

    border:none

    }

    #watch.digital-wrapli{

    font-size:1.5em;

    line-height:2;

    letter-spacing:2px;

    text-align:center;

    position:relative;

    left:1px;

    }

    #watch.digit-minutesli{

    -webkit-animation:dsm3600ssteps(60,end)0sinfinite;

    -moz-animation:dsm3600ssteps(60,end)0sinfinite;

    animation:dsm3600ssteps(60,end)0sinfinite;

    }

    #watch.digit-secondsli{

    -webkit-animation:dsm60ssteps(60,end)0sinfinite;

    -moz-animation:dsm60ssteps(60,end)0sinfinite;

    animation:dsm60ssteps(60,end)0sinfinite;

    }

    @-webkit-keyframesdsm{

    to{

    -webkit-transform:translateY(-120em)

    }

    }

    @-moz-keyframesdsm{

    to{

    -moz-transform:translateY(-120em)

    }

    }

    @keyframesdsm{

    to{

    transform:translateY(-120em)

    }

    }

    .footer{

    text-align:center;

    font:12px"OpenSansLight","OpenSans","SegoeUI",Helvetica,Arial;

    }

    .footera{

    color:#999;

    text-decoration:none;

    }

    </style>

    <divid="watch">

    <divclass="frame-face"></div>

    <ulclass="minute-marks">

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    </ul>

    <divclass="digital-wrap">

    <ulclass="digit-hours">

    <li>23</li>

    <li>00</li>

    <li>01</li>

    <li>02</li>

    <li>03</li>

    <li>04</li>

    <li>05</li>

    <li>06</li>

    <li>07</li>

    <li>08</li>

    <li>09</li>

    <li>10</li>

    <li>11</li>

    <li>12</li>

    <li>13</li>

    <li>14</li>

    <li>15</li>

    <li>16</li>

    <li>17</li>

    <li>18</li>

    <li>19</li>

    <li>20</li>

    <li>21</li>

    <li>22</li>

    </ul>

    <ulclass="digit-minutes">

    <li>10</li>

    <li>11</li>

    <li>12</li>

    <li>13</li>

    <li>14</li>

    <li>15</li>

    <li>16</li>

    <li>17</li>

    <li>18</li>

    <li>19</li>

    <li>20</li>

    <li>21</li>

    <li>22</li>

    <li>23</li>

    <li>24</li>

    <li>25</li>

    <li>26</li>

    <li>27</li>

    <li>28</li>

    <li>29</li>

    <li>30</li>

    <li>31</li>

    <li>32</li>

    <li>33</li>

    <li>34</li>

    <li>35</li>

    <li>36</li>

    <li>37</li>

    <li>38</li>

    <li>39</li>

    <li>40</li>

    <li>41</li>

    <li>42</li>

    <li>43</li>

    <li>44</li>

    <li>45</li>

    <li>46</li>

    <li>47</li>

    <li>48</li>

    <li>49</li>

    <li>50</li>

    <li>51</li>

    <li>52</li>

    <li>53</li>

    <li>54</li>

    <li>55</li>

    <li>56</li>

    <li>57</li>

    <li>58</li>

    <li>59</li>

    <li>00</li>

    <li>01</li>

    <li>02</li>

    <li>03</li>

    <li>04</li>

    <li>05</li>

    <li>06</li>

    <li>07</li>

    <li>08</li>

    <li>09</li>

    </ul>

    <ulclass="digit-seconds">

    <li>20</li>

    <li>21</li>

    <li>22</li>

    <li>23</li>

    <li>24</li>

    <li>25</li>

    <li>26</li>

    <li>27</li>

    <li>28</li>

    <li>29</li>

    <li>30</li>

    <li>31</li>

    <li>32</li>

    <li>33</li>

    <li>34</li>

    <li>35</li>

    <li>36</li>

    <li>37</li>

    <li>38</li>

    <li>39</li>

    <li>40</li>

    <li>41</li>

    <li>42</li>

    <li>43</li>

    <li>44</li>

    <li>45</li>

    <li>46</li>

    <li>47</li>

    <li>48</li>

    <li>49</li>

    <li>50</li>

    <li>51</li>

    <li>52</li>

    <li>53</li>

    <li>54</li>

    <li>55</li>

    <li>56</li>

    <li>57</li>

    <li>58</li>

    <li>59</li>

    <li>00</li>

    <li>01</li>

    <li>02</li>

    <li>03</li>

    <li>04</li>

    <li>05</li>

    <li>06</li>

    <li>07</li>

    <li>08</li>

    <li>09</li>

    <li>10</li>

    <li>11</li>

    <li>12</li>

    <li>13</li>

    <li>14</li>

    <li>15</li>

    <li>16</li>

    <li>17</li>

    <li>18</li>

    <li>19</li>

    </ul>

    </div>

    <ulclass="digits">

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

    <li>6</li>

    <li>7</li>

    <li>8</li>

    <li>9</li>

    <li>10</li>

    <li>11</li>

    <li>12</li>

    </ul>

    <divclass="hours-hand"></div>

    <divclass="minutes-hand"></div>

    <divclass="seconds-hand"></div>

    </div>

    </body>

    </html>

    版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
    上一篇:获取鼠标位置的代码 下一篇:Vue实现跑马灯简单效果
    发布日期:2021/10/26
    手机扫二维码直达本页
    发布时间:14:35:01
    点击:250
    录入:壹家怡园
    相关文章
    Baidu
    YiJiaCMS 6.0.9.10888 Build 21.11.30(MSSQL) 闽ICP备05000814号-1
    本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
    ©2000-2021