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的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有 ...

随机推荐

PHP通过sql生成CSV文件并下载,PHP实现文件下载
/** * PHP通过sql生成CSV文件并下载 * @param string $sql 查询sql,结果为二维数组 * @param array $title 数据,CSV文件标题 * @para ...
Direct2D 第2篇绘制椭圆
原文:Direct2D 第2篇绘制椭圆 #include <windows.h> #include <d2d1.h> #include <d2d1helper.h> ...
ansible Ansible Galaxy ansible-playbook 安装使用命令笔记生成密钥管控机被管控机 wget epel源
笔记 ansible 安装与salt对比相同都是为了同时在多台机器上执行相同的命令都是python开发不同 agent(saltstack需要安装.ansible不需要) 配置(salt配置 ...
一个挺好用的自己写的小插件（用与把一般的图片转换成预制）——UNITY3D
首先下载一个DLL文件,名字:System.Windows.Forms. 然后把这个文件放在资源目录,位置随便. 接着上代码 : using System.IO; using UnityEditor ...
HDU - 4788 Hard Disk Drive （成都邀请赛H 水题）
HDU - 4788 Hard Disk Drive Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I ...
将数组对象转换成DataSet
public static DataSet ObjectArrayToDataSet(object[] objArr) { if (objArr.Length == 0) return null; D ...
Spring_MVC
SpringMVC处理流程分析: M-Model 模型(完成业务逻辑:有javaBean构成,service+dao+entity) V-View 视图(做界面的展示 jsp,html……) C- ...
【JZOJ4845】【NOIP2016提高A组集训第5场11.2】寻找
题目描述 "我有个愿望,我希望穿越一切找到你." 这是个二维平面世界,平面上有n个特殊的果实,我从(0,0)点出发,希望得到尽量多的果实,但是出于某种特殊的原因,我的运动方式只有三 ...
【时光回溯】【JZOJ3571】【GDKOI2014】内存分配
题目描述输入输出输出m行,每行一个整数,代表输入中每次程序变化后系统所需要的空闲内存单位数. 样例输入 2 3 1 4 1 4 2 2 1 2 1 1 1 1 1 样例输出 2 3 1 数据范围 ...
php 正则学习取反符号~
php 正则学习取反符号~ ~(<a .*?>.*?</a>|<.*?>)~i 先看正则图形,有点偏差,但可以初步看出结果. 关于 ~ 是取反符号,看下面说明.

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

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

随机推荐

热门专题