jQuery+css3实现极具创意的罗盘旋转时钟效果源码

效果

HTML代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>jQuery+css3实现极具创意的罗盘旋转时钟效果源码</title>

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

        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <!--背景-->

        <div class="clock-container">

            <!--左边时间-->

            <div class="clock-digital">

                <div class="date"></div>

                <div class="time"></div>

                <div class="day"> </div>

            </div>

            <!--表盘-->

            <div class="clock-analog">

                <!--红线-->

                <div class="spear"></div>

                <!--时钟-->

                <div class="hour"></div>

                <!--分钟-->

                <div class="minute"></div>

                <!--秒钟-->

                <div class="second"></div>

                <!--表盘边框-->

                <div class="dail"></div>

            </div>

        </div>

        <script src="js/index.js" type="text/javascript" charset="utf-8"></script>

    </body>

</html>

css代码

*,

*:after,

*:before {

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}

html {

    overflow: hidden;

    font-size: 16px;

}

.clock-container {

    position: absolute;

    left: 50%;

    top: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    width: 480px;

    height: 480px;

    border-radius: 50%;

    overflow: hidden;

    background: #111;

}

.clock-container .spear {

    position: absolute;

    width: 220px;

    background: red;

    left: 50%;

    top: 50%;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%);

    z-index:;

    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);

    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);

}

.clock-container .spear:after {

    content: '';

    position: absolute;

    border: 7px solid transparent;

    border-right-color: red;

    right:;

    top: -7px;

}

.clock-container .spear:before {

    content: '';

    position: absolute;

    border: 7px solid transparent;

    border-left-color: red;

    left: 2px;

    top: -7px;

}

.clock-container .clock-analog {

    width: 440px;

    height: 440px;

    border-radius: 50%;

    margin: 20px;

    background: #fff;

    z-index:;

    position: relative;

}

.clock-container .clock-analog .hour,

.clock-container .clock-analog .minute,

.clock-container .clock-analog .second {

    width: 50px;

    height: 20px;

    position: absolute;

    left:;

    top:;

    right:;

    bottom:;

    margin: auto;

    z-index:;

    -webkit-transition: 0.2s 0.2s ease-in;

    transition: 0.2s 0.2s ease-in;

    -webkit-transform: rotate(0deg);

    transform: rotate(0deg);

}

.clock-container .clock-analog .hour span,

.clock-container .clock-analog .minute span,

.clock-container .clock-analog .second span {

    position: absolute;

    width: 50px;

    height: 20px;

    line-height: 20px;

    text-align: center;

    -webkit-transform-origin: 50%;

    transform-origin: 50%;

    z-index:;

}

.clock-container .clock-analog .hour span:after,

.clock-container .clock-analog .minute span:after,

.clock-container .clock-analog .second span:after {

    content: '';

    width: 4px;

    height: 1px;

    background: #000;

    position: absolute;

    left: 130%;

    top: -10%;

    opacity: 0.3;

}

.clock-container .clock-analog .hour span:nth-child(5n+2):after,

.clock-container .clock-analog .minute span:nth-child(5n+2):after,

.clock-container .clock-analog .second span:nth-child(5n+2):after {

    width: 7px;

    opacity:;

    left: 110%;

}

.clock-container .clock-analog .hour {

    z-index:;

}

.clock-container .clock-analog .hour span:after {

    opacity:;

    width: 4px;

    height: 1px;

    color: #666;

    -webkit-transform: translate(5px, 12px);

    transform: translate(5px, 12px);

}

.clock-container .clock-analog .hour:after {

    content: '';

    background: #fff;

    position: absolute;

    left: 50%;

    top: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    width: 250px;

    height: 250px;

    border-radius: 50%;

    -webkit-box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.6) inset;

    box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.6) inset;

}

.clock-container .clock-analog .minute {

    color: #fff;

}

.clock-container .clock-analog .minute span:after {

    background: #fff;

    -webkit-transform: translate(10px, -7px) rotate(-9deg);

    transform: translate(10px, -7px) rotate(-9deg);

}

.clock-container .clock-analog .minute:after {

    content: '';

    background: #333;

    position: absolute;

    left: 50%;

    top: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

    width: 350px;

    height: 350px;

    border-radius: 50%;

    -webkit-box-shadow: 0 0 25px 2px #000 inset;

    box-shadow: 0 0 25px 2px #000 inset;

}

.clock-container .clock-analog .second span:after {

    -webkit-transform: translate(5px, -10px);

    transform: translate(5px, -10px);

}

.clock-container .clock-analog .dail {

    width: 20px;

    height: 20px;

    position: absolute;

    left:;

    top:;

    right:;

    bottom:;

    margin: auto;

    z-index:;

}

.clock-container .clock-analog .dail span {

    width: 20px;

    height: 20px;

    line-height: 20px;

    -webkit-transform-origin: 50%;

    transform-origin: 50%;

    text-indent: 1000px;

    overflow: hidden;

    position: absolute;

}

.clock-container .clock-analog .dail span:after {

    content: '';

    position: absolute;

    width: 4px;

    height: 4px;

    border-radius: 50%;

    background-color: #7d7e7d;

    *zoom:;

    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF7D7E7D', endColorstr='#FF0E0E0E');

    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBlMGUwZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==");

    background-size: 100%;

    background-image: -webkit-gradient(linear, left top, right top, from(#7d7e7d), to(#0e0e0e));

    background-image: linear-gradient(to right, #7d7e7d 0%, #0e0e0e 100%);

    left: 50%;

    top: 50%;

    -webkit-transform: translate(-50%, -50%);

    transform: translate(-50%, -50%);

}

.clock-container .clock-analog .dail span:nth-child(5n+1):after {

    width: 8px;

}

.clock-container .clock-digital {

    position: absolute;

    z-index:;

    height: 444px;

    width: 224px;

    background: #090909;

    left: 18px;

    top: 18px;

    border-radius: 220px 0 0 220px;

    -webkit-box-shadow: 5px 0 15px #000;

    box-shadow: 5px 0 15px #000;

}

.clock-container .clock-digital:after {

    content: '';

    position: absolute;

    border: 15px solid white;

    border-right: none;

    height: 400px;

    width: 200px;

    border-radius: 220px 0 0 220px;

    left: 25px;

    top: 25px;

}

.clock-container .clock-digital .time {

    background: #111;

    position: absolute;

    right: 20px;

    top: 50%;

    -webkit-transform: translateY(-50%);

    transform: translateY(-50%);

    color: #fff;

    border-radius: 50px;

    font-size: 24px;

    padding: 2px 20px;

    -webkit-box-shadow: 0 0 15px #000 inset;

    box-shadow: 0 0 15px #000 inset;

}

.clock-container .clock-digital .day {

    background: #111;

    position: absolute;

    right: 20px;

    bottom: 100px;

    color: #fff;

    border-radius: 20px;

    -webkit-box-shadow: 0 0 15px #000 inset;

    box-shadow: 0 0 15px #000 inset;

    padding: 2px 20px;

    font-size: 16px;

}

.clock-container .clock-digital .date {

    background: #111;

    position: absolute;

    right: 20px;

    top: 100px;

    color: #fff;

    border-radius: 20px;

    font-size: 16px;

    -webkit-box-shadow: 0 0 10px #000 inset;

    box-shadow: 0 0 10px #000 inset;

    padding: 2px 20px;

}

JavaScript代码

(function() {

    var months = ["January", "February", "March", "April", "May", "June",

            "July", "August", "September", "October", "November", "December"

        ],

        days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

    function getTime() {

        var date = new Date(),

            second = date.getSeconds(),

            minute = date.getMinutes(),

            hour = date.getHours(),

            time = date.toLocaleString('en-US', {

                hour: 'numeric',

                minute: 'numeric',

                hour12: true

            }),

            day = date.getDay(),

            month = date.getMonth(),

            date = date.getDate() + ' . ' + months[month],

            ds = second * -6,

            dm = minute * -6,

            dh = hour * -30;

        $('.second').css('transform', 'rotate(' + ds + 'deg)');

        $('.minute').css('transform', 'rotate(' + dm + 'deg)');

        $('.hour').css('transform', 'rotate(' + dh + 'deg)');

        $('.time').text(time);

        $('.day').text(days[day]);

        $('.date').text(date)

    }

    function second(selector, size) {

        for(var s = 0; s < 60; s++) {

            $(selector).append('<span style="transform: rotate(' + 6 * s + 'deg) translateX(' + size + 'px)">' + s + '秒' + '</span>')

        }

    }

    function minute(selector, size) {

        for(var s = 0; s < 60; s++) {

            $(selector).append('<span style="transform: rotate(' + 6 * s + 'deg) translateX(' + size + 'px)">' + s + '分' + '</span>')

        }

    }

    function dail(selector, size) {

        for(var s = 0; s < 60; s++) {

            $(selector).append('<span style="transform: rotate(' + 6 * s + 'deg) translateX(' + size + 'px)">' + s + '</span>')

        }

    }

    second('.second', 195);

    minute('.minute', 145);

    dail('.dail', 230);

    for(var s = 1; s < 13; s++) {

        $('.hour').append('<span style="transform: rotate(' + 30 * s + 'deg) translateX(100px)">' + s + '点' + '</span>')

    }

    setInterval(getTime, 1000);

    getTime();

}());

jQuery+css3实现极具创意的罗盘旋转时钟效果源码的更多相关文章

9款极具创意的HTML5/CSS3进度条动画（免积分下载）
尊重原创,原文地址:http://www.cnblogs.com/html5tricks/p/3622918.html 免积分打包下载地址:http://download.csdn.net/detai ...
9款极具创意的HTML5/CSS3进度条动画
今天我们要分享9款极具创意的HTML5/CSS3进度条动画,这些进度条也许可以帮你增强用户交互和提高用户体验,喜欢的朋友就收藏了吧. 1.HTML5/CSS3图片加载进度条可切换多主题今天要分享的 ...
分享9款极具创意的HTML5/CSS3进度条动画
1.HTML5/CSS3图片加载进度条可切换多主题今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加载场景,插件会默认去从服务器下载几张比较大的图片,然后让该进度条展现当前读取图片的进度 ...
jquery省市区三级联动(数据来源国家统计局官网)内附源码下载
很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + JSON,无数据库,纯JS代码,无加密,无压缩,可直接使用在任何项 ...
CorelDRAW极具创意的多边形工具
这是一个简单的教程,它展示了使用三种基本的CorelDRAW工具打造的创意性成果:多边形工具.挑选工具和形状工具. CorelDRAW 可让您以非常直观的方式创建多边形.尽管多边形工具乍看起来并不像一 ...
JQuery实现图片轮播效果源码
======================整体结构======================== <div class="banner"> <ul class ...
jQuery+Ajax滚屏异步加载数据实现（附源码）
一.CSS样式 body { font:12px/1.0em Microsoft Yahei; line-height:1.6em; background:#fff; line-height:1.2e ...
分享8款最新HTML5/CSS3功能插件及源码下载
1.HTML5/CSS3鬼脸表情下拉菜单超级可爱这款HTML5/CSS3鬼脸表情下拉菜单真的很特别,虽然菜单的实现并没有利用复杂的HTML5/CSS3技术,但是创意的确不错. 在线演示源码下载 ...
20+功能强大的jQuery/CSS3图片特效插件
以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3. 1.jQuery图片下滑切换播放效果这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有 ...

随机推荐

django中的路由规则
项目的目录结构外层的firstysite目录与Django无关,只是你项目的容器,可以任意重命名. #其中settings.py是django的总配置文件,即项目的总管家#urls.py,则是项目的 ...
mybatis中使用包装对象
在实际的应用中,很多时候我们需要的查询条件都是一个综合的查询条件,因此我们需要对已经存在的实体进行再一次的包装,以方便我们进行查询操作,于是包装对象的作用就很明显了,在这里我举一个简单的例子 1.首先 ...
ML面试1000题系列（51-60）
本文总结ML面试常见的问题集转载来源:https://blog.csdn.net/v_july_v/article/details/78121924 51.简单说下sigmoid激活函数常用的非线 ...
Thinkphp 调试方法
1.入口文件index.php配置APP_DEBUG,能直接发现页面上的错误 define('APP_DEBUG',True); 2.配置页面调试SHOW_PAGE_TRACE,可以在config里面 ...
python 中if __name__=="__main__"
if __name__=="__main__":表示当执行运行文件为当前代码所在文件时,则会执行if__name__=="__main__":后的语句. 如果这 ...
Ubuntu 12.04 安装 IQQ
1. 安装 IQQ 首先应安装jdk包 2. 百度网盘下载: http://pan.baidu.com/share/home?uk=3071047022 3. 运行 (1) Linux用户给IQQ-1 ...
dijkstra算法为什么不能有负边？
因为Dijkstra算法在计算最短路径时,不会因为负边的出现而更新已经计算过(收录过)的顶点的路径长度, 这样一来,在存在负边的图中,就可能有某些顶点最终计算出的路径长度不是最短的长度. 假设前两个数 ...
打印begin~end
要求: 输入:begin和end 输出:依次打印出begin到end import java.util.Scanner; //递归打印begin —— end public class demo1 { ...
Leetcode917.Reverse Only Letters仅仅反转字母
给定一个字符串 S,返回 "反转后的" 字符串,其中不是字母的字符都保留在原地,而所有字母的位置发生反转. 示例 1: 输入:"ab-cd" 输出:" ...
PLAY2.6-SCALA(十一) 模板常用场景
1.布局声明一个views/main.scala.html模板作为主布局模板 @(title: String)(content: Html) <!DOCTYPE html> <ht ...

jQuery+css3实现极具创意的罗盘旋转时钟效果源码

jQuery+css3实现极具创意的罗盘旋转时钟效果源码的更多相关文章

随机推荐

热门专题