时钟jquery特效代码_时钟js特效代码_时钟网页代码_时间日期

内容介绍

时钟jquery特效代码_时钟js特效代码_时钟网页代码下载

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>时钟jquery特效代码_时钟js特效代码_时钟网页代码</title>
</head>
<body>
<style>
 body {
 background: black;
 }

.clock {
 position: absolute;
 opacity: 1;
 }

.fill .clock {
 left: 50%;
 top: 50%;
 }

.centre {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 0;
 height: 0;
 }

.expand {
 position: absolute;
 top: 0;
 left: 0;
 transform: translate(-50%, -50%);
 }

.anchor {
 position: absolute;
 top: 0;
 left: 0;
 width: 0;
 height: 0;
 }

.element {
 position: absolute;
 top: 0;
 left: 0;
 }

.round {
 border-radius: 296px;
 }

.circle-1 {
 background: white;
 width: 12px;
 height: 12px;
 }

.circle-2 {
 background: #FA9F22;
 width: 8px;
 height: 8px;
 }

.circle-3 {
 background: black;
 width: 4px;
 height: 4px;
 }

.second {
 transform: rotate(180deg);
 }

.minute {
 transform: rotate(54deg);
 }

.second-hand {
 width: 2px;
 height: 164px;
 background: #FA9F22;
 transform: translate(-50%,-100%) translateY(24px);
 }

.hour {
 transform: rotate(304.5deg);
 }

.thin-hand {
 width: 4px;
 height: 50px;
 background: white;
 transform: translate(-50%,-100%);
 }

.fat-hand {
 width: 10px;
 height: 57px;
 border-radius: 10px;
 background: white;
 transform: translate(-50%,-100%) translateY(-18px);
 }

.minute-hand {
 height: 112px;
 }

.hour-text {
 position: absolute;
 font: 40px Hei, Helvetica, Arial, sans-serif;
 color: white;
 transform: translate(-50%,-50%);
 }

.hour-10 {
 padding-left: 0.4ex;
 }
 .hour-11 {
 padding-left: 0.25ex;
 }

.minute-text {
 position: absolute;
 font: 12px Avenir Next, Helvetica, Arial, sans-serif;
 color: white;
 transform: translate(-50%,-50%);
 }

.minute-line {
 background: white;
 width: 1px;
 height: 9px;
 transform: translate(-50%,-100%) translateY(-131px);
 opacity: 0.34;
 }
</style>
<h1 style="color:white">时钟jquery特效代码_时钟js特效代码_时钟网页代码</h1>
<div class="fill">
 <div class="reference"></div>
 <div class="clock" id="utility-clock" style="transform: scale(2.865);">
 <div class="centre">
 <div class="dynamic"><div class="anchor" style="transform: rotate(6deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(12deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(18deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(24deg);"><div class="element minute-line"></div></div><div class="minute-text" style="top: -116.9px; left: 67.5px;">05</div><div class="anchor" style="transform: rotate(36deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(42deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(48deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(54deg);"><div class="element minute-line"></div></div><div class="minute-text" style="top: -67.5px; left: 116.9px;">10</div><div class="anchor" style="transform: rotate(66deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(72deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(78deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(84deg);"><div class="element minute-line"></div></div><div class="minute-text" style="top: 0px; left: 135px;">15</div><div class="anchor" style="transform: rotate(96deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(102deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(108deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(114deg);"><div class="element minute-line"></div></div><div class="minute-text" style="top: 67.5px; left: 116.9px;">20</div><div class="anchor" style="transform: rotate(126deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(132deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(138deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(144deg);"><div class="element minute-line"></div></div><div class="minute-text" style="top: 116.9px; left: 67.5px;">25</div><div class="anchor" style="transform: rotate(156deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(162deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(168deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(174deg);"><div class="element minute-line"></div></div><div class="minute-text" style="top: 135px; left: 0px;">30</div><div class="anchor" style="transform: rotate(186deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(192deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(198deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(204deg);"><div class="element minute-line"></div></div><div class="minute-text" style="top: 116.9px; left: -67.5px;">35</div><div class="anchor" style="transform: rotate(216deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(222deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(228deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(234deg);"><div class="element minute-line"></div></div><div class="minute-text" style="top: 67.5px; left: -116.9px;">40</div><div class="anchor" style="transform: rotate(246deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(252deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(258deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(264deg);"><div class="element minute-line"></div></div><div class="minute-text" style="top: 0px; left: -135px;">45</div><div class="anchor" style="transform: rotate(276deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(282deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(288deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(294deg);"><div class="element minute-line"></div></div><div class="minute-text" style="top: -67.5px; left: -116.9px;">50</div><div class="anchor" style="transform: rotate(306deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(312deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(318deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(324deg);"><div class="element minute-line"></div></div><div class="minute-text" style="top: -116.9px; left: -67.5px;">55</div><div class="anchor" style="transform: rotate(336deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(342deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(348deg);"><div class="element minute-line"></div></div><div class="anchor" style="transform: rotate(354deg);"><div class="element minute-line"></div></div><div class="minute-text" style="top: -135px; left: 0px;">60</div><div class="hour-text hour-1" style="top: -90.9px; left: 52.5px;">1</div><div class="hour-text hour-2" style="top: -52.5px; left: 90.9px;">2</div><div class="hour-text hour-3" style="top: 0px; left: 105px;">3</div><div class="hour-text hour-4" style="top: 52.5px; left: 90.9px;">4</div><div class="hour-text hour-5" style="top: 90.9px; left: 52.5px;">5</div><div class="hour-text hour-6" style="top: 105px; left: 0px;">6</div><div class="hour-text hour-7" style="top: 90.9px; left: -52.5px;">7</div><div class="hour-text hour-8" style="top: 52.5px; left: -90.9px;">8</div><div class="hour-text hour-9" style="top: 0px; left: -105px;">9</div><div class="hour-text hour-10" style="top: -52.5px; left: -90.9px;">10</div><div class="hour-text hour-11" style="top: -90.9px; left: -52.5px;">11</div><div class="hour-text hour-12" style="top: -105px; left: 0px;">12</div></div>
 <div class="expand round circle-1"></div>
 <div class="anchor hour" style="transform: rotate(521.053deg);">
 <div class="element thin-hand"></div>
 <div class="element fat-hand"></div>
 </div>
 <div class="anchor minute" style="transform: rotate(6252.63deg);">
 <div class="element thin-hand"></div>
 <div class="element fat-hand minute-hand"></div>
 </div>
 <div class="anchor second" style="transform: rotate(375158deg);">
 <div class="element second-hand"></div>
 </div>
 <div class="expand round circle-2"></div>
 <div class="expand round circle-3"></div>
 </div>
 </div>
</div>

if (clock.parentNode.classList.contains('fill')) autoResize(clock, 295 + 32)

function autoResize(element, nativeSize) {
 var update = function() {
 var scale = Math.min(window.innerWidth, window.innerHeight) / nativeSize
 element.style.transform = element.style.webkitTransform = 'scale(' + scale.toFixed(3) + ')'
 }
 update()
 window.addEventListener('resize', update)
 }
</script>

</body></html>

本站所有特效都是站长亲自测试后发布的，如果运行代码无效果，请复制到您的本机运行

运行代码复制代码另存代码[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

全站搜索

时钟jquery特效代码_时钟js特效代码_时钟网页代码

内容介绍

最新推荐

本周排行