用CSS3写的钟表

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style id="css">
        #wrap{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            border-radius: 50%;
            margin: 100px auto;
            position: relative;
        }
        #wrap ul{
            margin: 0;padding: 0;
            height: 200px;
            list-style: none;
            position: relative;
        }
        #wrap ul li{
            width: 2px;height: 8px;background: #000;
            position: absolute;
            left: 99px;
            top:0;
            -webkit-transform-origin: center 100px;
        }
        /*#wrap ul li:nth-of-type(1){
            -webkit-transform: rotate(0deg);
        }
        #wrap ul li:nth-of-type(2){
            -webkit-transform: rotate(6deg);
        }
        #wrap ul li:nth-of-type(3){
            -webkit-transform: rotate(12deg);
        }
        #wrap ul li:nth-of-type(4){
            -webkit-transform: rotate(18deg);
        }
        #wrap ul li:nth-of-type(5){
            -webkit-transform: rotate(24deg);
        }
        #wrap ul li:nth-of-type(6){
            -webkit-transform: rotate(30deg);
        }
        #wrap ul li:nth-of-type(7){
            -webkit-transform: rotate(36deg);
        }
        #wrap ul li:nth-of-type(8){
            -webkit-transform: rotate(42deg);
        }*/
        #wrap ul li:nth-of-type(5n+1){
            height: 12px;
        }
        #hour{
            width: 6px;
            height: 45px;
            background: #000;
            position: absolute;
            left: 97px;
            top:55px;
            -webkit-transform-origin: bottom;
        }
        #min{
            width: 4px;
            height: 65px;
            background: #999;
            position: absolute;
            left: 98px;
            top: 35px;
            -webkit-transform-origin: bottom;
        }
        #sec{
            width: 2px;
            height: 80px;
            background: red;
            position: absolute;
            left: 99px;
            top: 20px;
            -webkit-transform-origin: bottom;
        }
        #icon{
            width: 20px;height: 20px;
            background: #000;
            border-radius: 50%;
            position: absolute;
            left: 90px;
            top: 90px;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <ul id="list">
            <!--<li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>-->
        </ul>
        <div id="hour"></div>
        <div id="min"></div>
        <div id="sec"></div>
        <div id="icon"></div>
    </div>
    <script>
        var oList=document.getElementById(‘list‘);
        var oCss=document.getElementById(‘css‘);
        var oHour=document.getElementById(‘hour‘);
        var oMin=document.getElementById(‘min‘);
        var oSec=document.getElementById(‘sec‘);
        var aLi=‘‘;
        var sCss=‘‘;
        for(var i= 0;i<60;i++){
            sCss+=‘#wrap ul li:nth-of-type(‘+(i+1)+‘){-webkit-transform: rotate(‘+i*6+‘deg);}‘;
            aLi+=‘<li></li>‘;
        }
        oList.innerHTML=aLi;
        oCss.innerHTML+=sCss;
        setInterval(toTime,1000);
        toTime();
        function toTime(){
            var oDate=new Date();
            var iSec=oDate.getSeconds();
            var iMin=oDate.getMinutes()+iSec/60;
            var iHour=oDate.getHours()+iMin/60;
            oSec.style.WebkitTransform=‘rotate(‘+iSec*6+‘deg)‘;
            oMin.style.WebkitTransform=‘rotate(‘+iMin*6+‘deg)‘;
            oHour.style.WebkitTransform=‘rotate(‘+iHour*30+‘deg)‘;
        }
    </script>
</body>
</html>

    

  在写的过程中,发现了一个小问题:

  

  时分秒的顺序不能写错,开始我把时写在最上面,时针和分针怎么都没反映,这是执行顺序的原因吗?

时间: 2024-11-02 00:27:28

用CSS3写的钟表的相关文章

纯CSS3写的10个不同的酷炫图片遮罩层效果

纯CSS3写的10个不同的酷炫图片遮罩层效果 这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <!DOCTYPE html PUBLIC "-//W3C/

纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

使用css3写出来的表情包,酷酷的!!!

纯css3写的表情包大家可以封装一下打包自己用哟,哎 大家见谅了,我是大老粗,随后会自定义页面编辑,这样看到太丑陋了 html: css: .emoji { width: 120px; height: 120px; margin: 15px 15px 40px; background: #FFDA6A; display: inline-block; border-radius: 50%; position:relative; } .emoji:after { position: absolute

用纯原生态javascript+css3 写的3D魔方动画旋扭特效

一直从事于后端编程工作,工作中也经常接触和使用一些前段技术,但大多数还是用于操作和控制数据与客户端交互工作.随着互联网技术的发展以及硬件性能的不断提升,人们对于交互式体验已变得越来越重视,进而前端技术已经越来越突显出它的重要性,特别是一些炫酷的特效,精美的UI设计,都使人眼前一亮,顿时觉得网站平台都高大上不少,很博人们眼球,给人们以很好的视觉冲击,特别是现在的css3,HTML5技术的更新,使得以更小的代价就可以轻松实现这些效果,故此,俺也顿时膜拜起前端技术,悠然起了兴趣,跃跃欲试,随机利用cs

极客编程小挑战#30:用CSS3实现各种钟表的显示效果

本期挑战: 利用css3制作钟表表盘效果.发挥想象.可以电子表或者是石英表,尽量做得炫酷.以下为两个示范,点击即可查看. 提交方式: 录制代码编写过程或最终代码:点击开始 跟帖发布代码预览地址(使用GB按钮可以直接嵌入发帖回复中):演示地址 [强烈提醒]尽量通过添加课程,在本文评论中附上链接的方式提交答案,有特别奖励- [强烈提醒]提交了答案的人,请扫描下图中的二维码,加入微信群,方便工作人员进行信息统计 赞助商[时速云]介绍: 时速云TenxCloud是国内最早的容器云平台之一(Contain

css3写出0.5px的边框

一说到0.5px的边框,我们一般认为是不行的,因为在ps中0.5px的线也是做不出来的,这个计算机的像素有关系. 废话不多说了,0.5px 其实用的是css3新特性,box-shadow:阴影设置 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div sty

用CSS3写圆角(超简单)

前缀: -moz(例如 -moz-border-radius)用于Firefox-webkit(例如:-webkit-border-radius)用于Safari和Chrome. CSS3圆角(所有的) 使用CSS3,我们可以用几行代码来创建圆角. 这是一个5px普通边框和15px边框半径的设置: #roundCorderC{ font-family: Arial; border: 5px solid #dedede; -moz-border-radius: 15px; -webkit-bord

css3写的地图坐标

看到别的网站有个这么个小东西,感觉挺有趣就模范着做了下,只支持了webkit内核的 浏览器. html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/demo_1.css" /> </head>

CSS3写折纸

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>折纸选项卡</title> <style> @-webkit-keyframes open { 0% { -webkit-transform:rotateX(-120deg);