制作一个精美的CSS3时钟能学到不少东西

以前制作时针,大多使用flash,HTML5和CSS3出来后,flash冷了,使用HTML5和CSS3制作一个漂亮的时针,会用到许多新特性,这里推荐一个很容易使用的插件供参考,查看效果:

http://hovertree.com/h/bjaf/hoverclock.htm

 

示例代码:

<link rel="stylesheet" href="http://hovertree.com/texiao/hoverclock/jquery.hoverclock.2.1.0.css" />
<script src="http://hovertree.com/ziyuan/jquery/jquery-2.1.4.min.js"></script>
<script src="http://hovertree.com/texiao/hoverclock/jquery.hoverclock.2.1.0.js"></script>

<div id="hoverclock"></div>
<script>
$("#hoverclock").hoverclock({
"h_width":500,
"h_height":500,
//"h_hourNumSize": "80",
// "h_hourNumRadii": "200",
// "h_hourNumShow": false,
// "h_minuteNumShow":false,
"h_hourNumColor": "deeppink",
"h_backColor": "yellow",
// "h_borderColor": "gold",
//"h_frontColor":"red",
"h_linkText": "HoverClock"
});
</script>

 效果图图下:

制作一个精美的CSS3时钟能学到不少东西_第1张图片

 

完整代码如下:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
    <link rel="stylesheet" href="http://hovertree.com/texiao/hoverclock/jquery.hoverclock.2.1.0.css" />
    <script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        div {
            padding: 0px;
        }
    </style><meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>HoverClock - HoverTree</title><base target="_blank" />
</head>

<body>
    <div style="width:500px;margin:10px auto;">
        <div id="hoverclock">
        </div>
        <div><br /><a href="http://hovertree.com/h/bjaf/hoverclock.htm">Help</a> <a href="http://hovertree.com/texiao/hoverclock/">Demo 1</a> <a href="http://hovertree.com/texiao/hoverclock/demo2.htm">Demo 2</a>
<a href="http://hovertree.com/texiao/hoverclock/demo3.htm">Demo 3</a> <a href="http://hovertree.com/texiao/hoverclock/demo4.htm">Demo 4</a></div>
    </div>
    <script src="http://hovertree.com/texiao/hoverclock/jquery.hoverclock.2.1.0.js"></script>
    <script>
        $("#hoverclock").hoverclock({
            "h_width":500,
            "h_height":500,
            //"h_hourNumSize": "80",
            // "h_hourNumRadii": "200",
            // "h_hourNumShow": false,
            // "h_minuteNumShow":false,
            "h_hourNumColor": "deeppink",
            "h_backColor": "yellow",
            // "h_borderColor": "gold",
            //"h_frontColor":"red",
            "h_linkText": "HoverClock"
        });
    </script>
</body>
</html>

 更多特效: http://ini.iteye.com/blog/2165698 

你可能感兴趣的:(JavaScript,jquery,css,html5,css3)