jquery+css实现汉字款转盘时钟效果代码-html代码-BFW代码库

jquery+css实现汉字款转盘时钟效果代码

代码语言：html

所属分类：其他

代码描述：jquery+css实现汉字款转盘时钟效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        *{
            margin: 0;padding: 0;
        }
        html,body{
            font-family: "Microsoft YaHei UI";
        }
        a{
            text-decoration: none;
        }
        span,em,b,i{
            font-style: normal;
        }
        li{
            list-style: none;
        }
        html,body{
            font-size: 62.5%;
            background: #000;
        }
        .clock{
            width: 700px;height: 700px;margin: 0 auto;position: relative;z-index: 6;padding-top: 50px;
        }
        .second{
            width: 502px;height: 502px;position: absolute;left: 20px;top: 20px;
            border-radius: 100%;
        }
        .second ul{
            width: 500px;height: 500px;position: relative;z-index: 8;
            border-radius: 100%;overflow: hidden;
            background: #293C55;
            /*transform: rotate(6deg);*/
        }
        .second ul li,.minute ul li,.hour ul li{
            height: 60px;position: absolute;z-index: 9;width: 16px;text-align: center;display: table;
            /*background: #273341;*/padding: 0 2px;
            transform-origin: 10px 0;
        }
        .second ul li span,.minute ul li span,.hour ul li span{
            display: table-cell;vertical-align: middle;width: 100%;height: 100%;font-size: 10px;color: #fff;
        }
        .minute{
            width: 380px;height:380px;position: absolute;left: 80px;top: 80px;z-index: 14;border-radius: 100%;
            transform: rotate(6deg);
            background: #273341;
        }
     .........完整代码请登录后点击上方下载按钮下载查看