CSS3黑色时钟

一个朋友写的，收藏之

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
    .divBox {
        width:600px;
        height: 600px;
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        margin:auto;
    }
    .circle {
        width: 400px;
        height: 400px;
        border-radius: 50%;
        -webkit-border-radius:50%;
        -moz-border-radius:50%;
        -ms-border-radius:50%;
        position: absolute;
        top:0px;
        bottom:0px;
        left: 0px;
        right: 0px;
        margin:auto;
        border:12px solid #000;
    }
    .line {
        height:20px;
        width: 0px;
        border:8px solid #000;
        position: absolute;
    }
    .lineTop {top:0px;left:0px;right:0px;margin:0 auto;}
    .lineBottom {bottom:0px;left: 0px;right: 0px;margin:0 auto;}
    .lineLeft {
        left:0px;
        top:0px;
        bottom: 0px;
        margin:auto;
        transform:rotate(90deg);
        -webkit-transform:rotate(90deg);
        -moz-transform:rotate(90deg);
        -ms-transform:rotate(90deg);
        -o-transform:rotate(90deg);
    }
    .lineRight {
        right:0px;
        top:0px;
        bottom: 0px;
        margin:auto;
        transform:rotate(90deg);
        -webkit-transform:rotate(90deg);
        -moz-transform:rotate(90deg);
        -ms-transform:rotate(90deg);
        -o-transform:rotate(90deg);
    }
    .line1 {
        height: 10px;
        border:4px solid #000;
        position: absolute;
        top:27px;
        right: 98px;
        transform:rotate(30deg);
        -webkit-transform:rotate(30deg);
        -moz-transform:rotate(30deg);
        -ms-transform:rotate(30deg);
        -o-transform:rotate(30deg);
    }
    .line2 {
        height: 10px;
        border:4px solid #000;
        position: absolute;
        top:98px;
        right: 27px;
        transform:rotate(60deg);
        -webkit-transform:rotate(60deg);
        -moz-transform:rotate(60deg);
        -ms-transform:rotate(60deg);
        -o-transform:rotate(60deg);
    }
    .line4 {
        height: 10px;
        border:4px solid #000;
        position: absolute;
        bottom:98px;
        right: 27px;
        transform:rotate(-60deg);
        -webkit-transform:rotate(-60deg);
        -moz-transform:rotate(-60deg);
        -ms-transform:rotate(-60deg);
        -o-transform:rotate(-60deg);
    }
    .line5 {
        height: 10px;
        border:4px solid #000;
        position: absolute;
        bottom:27px;
        right: 98px;
        transform:rotate(-30deg);
        -webkit-transform:rotate(-30deg);
        -moz-transform:rotate(-30deg);
        -ms-transform:rotate(-30deg);
        -o-transform:rotate(-30deg);
    }
    .line7 {
        height: 10px;
        border:4px solid #000;
        position: absolute;
        bottom:27px;
        left: 98px;
        transform:rotate(30deg);
        -webkit-transform:rotate(30deg);
        -moz-transform:rotate(30deg);
        -ms-transform:rotate(30deg);
        -o-transform:rotate(30deg);
    }
    .line8 {
        height: 10px;
        border:4px solid #000;
        position: absolute;
        bottom:98px;
        left: 27px;
        transform:rotate(60deg);
        -webkit-transform:rotate(60deg);
        -moz-transform:rotate(60deg);
        -ms-transform:rotate(60deg);
        -o-transform:rotate(60deg);
    }
    .line10 {
        height: 10px;
        border:4px solid #000;
        position: absolute;
        top:98px;
        left: 27px;
        transform:rotate(-60deg);
        -webkit-transform:rotate(-60deg);
        -moz-transform:rotate(-60deg);
        -ms-transform:rotate(-60deg);
        -o-transform:rotate(30deg);
    }
    .line11 {
        height: 10px;
        border:4px solid #000;
        position: absolute;
        top:27px;
        left: 98px;
        transform:rotate(-30deg);
        -webkit-transform:rotate(-30deg);
        -moz-transform:rotate(-30deg);
        -ms-transform:rotate(-30deg);
        -o-transform:rotate(-30deg);
    }
    .center {
        width: 0px;
        height: 0px;
        border-radius: 50%;
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        margin:auto;
        border:20px solid #000;
    }
    .hourLine {
        width: 120px;
        border:6px solid #000;
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        position: absolute;
        left: 132px;
        right: 0px;
        margin:197px auto;
        transform:rotate(-90deg);
        -webkit-transform-origin: 0% 50%;
        -moz-transform-origin: 0% 50%;
        -ms-transform-origin: 0% 50%;
        -o-transform-origin: 0% 50%;
        animation:hour 43200s linear infinite;
        -webkti-animation:hour 43200s linear infinite;
        -moz-animation:hour 43200s linear infinite;
        -ms-animation:hour 43200s linear infinite;
        -o-animation:minute 43200s linear infinite;
    }
    .minuteLine {
        width: 130px;
        border:4px solid #000;
        position: absolute;
        left: 138px;
        right: 0px;
        margin:197px auto;
        transform:rotate(-90deg);
        -webkit-transform-origin: 0% 50%;
        -moz-transform-origin: 0% 50%;
        -ms-transform-origin: 0% 50%;
        -o-transform-origin: 0% 50%;
        animation:minute 3600s linear infinite;
        -webkit-animation:minute 3600s linear infinite;
        -moz-animation:minute 3600s linear infinite;
        -ms-animation:minute 3600s linear infinite;
        -o-animation:minute 3600s linear infinite;
    }
    .secondLine {
        width: 140px;
        border:2px solid #000;
        position: absolute;
        left: 144px;
        right: 0px;
        margin:197px auto;
        transform:rotate(-90deg);
        -webkit-transform-origin: 0% 50%;
        -webkit-transform-origin: 0% 50%;
        -moz-transform-origin: 0% 50%;
        -ms-transform-origin: 0% 50%;
        -o-transform-origin: 0% 50%;
        animation:second 60s linear infinite;
        -webkit-animation:second 60s linear infinite;
        -moz-animation:second 60s linear infinite;
        -ms-animation:second 60s linear infinite;
        -o-animation:second 60s linear infinite;
    }
    @keyframes second {
        0%{transform:rotate(-90deg);}
        100%{transform:rotate(270deg);}

    }
    @-webkit-keyframes second {
        0%{transform:rotate(-90deg);}
        100%{transform:rotate(270deg);}

    }
    @-moz-keyframes second {
        0%{transform:rotate(-90deg);}
        100%{transform:rotate(270deg);}

    }
    @keyframes minute {
        0%{transform:rotate(-90deg);}
        100%{transform:rotate(270deg);}
    }
    @-webkit-keyframes minute {
        0%{transform:rotate(-90deg);}
        100%{transform:rotate(270deg);}
    }
    @-moz-keyframes minute {
        0%{transform:rotate(-90deg);}
        100%{transform:rotate(270deg);}
    }
    @-keyframes hour {
        0%{transform:rotate(-90deg);}
        100%{transform:rotate(270deg);}
    }
    @-webkit-keyframes hour {
        0%{transform:rotate(-90deg);}
        100%{transform:rotate(270deg);}
    }
    @-moz-keyframes hour {
        0%{transform:rotate(-90deg);}
        100%{transform:rotate(270deg);}
    }
</style>
</head>

<body>
<div class="divBox">
    <div class="circle">
        <div class="line lineTop"></div>
        <div class="line lineBottom"></div>
        <div class="line lineLeft"></div>
        <div class="line lineRight"></div>
        <div class="line_1 line1"></div>
        <div class="line_1 line2"></div>
        <div class="line_1 line4"></div>
        <div class="line_1 line5"></div>
        <div class="line_1 line7"></div>
        <div class="line_1 line8"></div>
        <div class="line_1 line10"></div>
        <div class="line_1 line11"></div>
        <div class="center"></div>
        <div class="hourLine"></div>
        <div class="minuteLine"></div>
        <div class="secondLine"></div>
    </div>
    <div class="lineDom">
    </div>
</div>
</body>
</html>

时间： 2024-11-03 08:06:12

CSS3黑色时钟的相关文章

15个超强悍的CSS3圆盘时钟动画赏析

在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间.今天我们给大家收集了15个超强悍的圆盘时钟动画,很多都是基于CSS3,也有一部分利用jQuery和SVG,让我们一起来看看吧. 1.纯CSS3/SVG实现的带秒针表盘圆盘复古时钟现在的网页上圆盘时钟越来越少见了,更多的是数字时钟和数字日历.之前我们分享过一些基于jQuery和CSS3的圆盘时钟动画,比如纯CSS3 3D立体圆盘时钟动画和jQuery实现一个挂在墙上的圆盘

JS+CSS3实现时钟

使用js和css3实现的时钟效果,支持firefox,chrom等标准浏览器.下载效果如图: javascript: <script type="text/javascript" src="jquery-1.8.2.min.js"></script><script type="text/javascript">$(function () { function rotateHand() {

css3 简易时钟

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1"> <meta name="viewport" content="width=devi

css3制作时钟

制作时钟之前需要了解几点知识: 一.圆上点坐标的计算二.时钟上时针.分针.秒针的换算我们观察一下时钟,首先想到的是与角度有关.再有是,秒针,分针,时针之间的进位关系. 比如说h时m分s秒,时针.分针.秒针此时此刻的角度:(-90,是因为rotateZ角度旋转规则,默认是从水平开始,逆时针为+,顺时针为-) ds = s*6-90; dm = m*6+(s/60*6)-90; dh = h*30+(m/60*30)-90; 我们都知道1s = 1 / 60min,1min = 1 /

一款CSS3制作个性网页时钟

<!DOCTYPE html> <html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <title>一款CSS3制作个性网页时钟丨电影院椅子|kiddy安全座椅</titl

14款超时尚的HTML5时钟动画

时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画.今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画,其中有圆盘时钟.3D时钟.个性化时钟等,强大的HTML5为时钟动画增添了不少精彩,希望能给大家带来帮助. 1.可爱的CSS3圆盘时钟动画今天要分享的也是一款可爱的CSS3圆盘时钟动画,时钟背景是乳白色的,显得非常干净,另外,时钟也可以和你本地的时候保持同步. 在线演示源码下载 2.HTML5 SVG圆盘时钟动画 5种时钟样式今天我

10款功能强大的jQuery/CSS3图片特效插件

1.CSS3实现的底部带滚动云彩效果的网站登录页面 CSS3实现的底部带滚动云彩效果的网站登录页面特效源码,是一段实现页面底部拥有滚动云彩动态效果的特效源码,想要在网站中实现此类效果的朋友们可以前来下载使用.本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码. 在线演示源码下载 2.HTML5实现的3D球体斑点运动动画特效源码这是一个很酷的HTML5 3D动画效果,是一个小球,小球表面出现跳动的斑点,斑点跳动时形成各种各样的形状,其实这款动画并不是正宗的HTML5 3D动画,而是

9款精美别致的CSS3菜单和按钮

1.超具立体感的CSS3 3D菜单菜单项带小图标记得之前向大家分享过不少CSS3 3D菜单,比如CSS3 3D动画菜单 3D立方体菜单项和HTML5/CSS3自定义下拉框 3D卡片折叠动画,效果都很漂亮.今天我们要再分享一款更酷的CSS3 3D立体菜单,这款菜单侧躺在页面上,每个菜单项都有不错的小图标. 在线演示源码下载 2.纯CSS3立体动画菜单菜单项按下有内阴影这次小编来分享一款利用纯CSS3实现的立体动画菜单,该菜单的实现非常简单,并没有太多的特效渲染,但是看起来却非常干净漂亮,

10大经典CSS3菜单应用欣赏

很多时候,我们的网页菜单需要个性化,从而来适应各种行业的用户视觉操作体验.本文将带领大家一起来欣赏10个非常经典的CSS3菜单应用,菜单涉及到动画菜单.Tab菜单.面包屑菜单等. 1.CSS3飘带状3D菜单菜单带小图标这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形成非常酷的3D视觉效果.这款CSS3飘带状3D菜单非常适合作一些活动页面的菜单导航. 在线演示源码下载