建站技术

一个非常漂亮的css时钟

Pioneer · 11月9日 · 2019年 ·

说明

css时钟,md风格,非常漂亮,代码如下,请自行添加<html>、<head>、<body>等标签。

演示地址

代码

<meta charset="UTF-8">
<title>庞博客</title>
<style>
    body {
  background: #eee;
}

svg {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.filler {
  background: #20B7AF;
  position: absolute;
  bottom: 50%;
  top: 0;
  left: 0;
  right: 0;
}
  </style>
<script>
  window.console = window.console || function(t) {};
</script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>



<div class="filler"></div>
<svg width="200" height="200">
<filter id="innerShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" result="blur"></feGaussianBlur>
<feOffset in="blur" dx="2.5" dy="2.5"></feOffset>
</filter>
<g>
<circle id="shadow" style="fill:rgba(0,0,0,0.1)" cx="97" cy="100" r="87" filter="url(#innerShadow)"></circle>
<circle id="circle" style="stroke: #FFF; stroke-width: 12px; fill:#20B7AF" cx="100" cy="100" r="80"></circle>
</g>
<g>
<line x1="100" y1="100" x2="100" y2="55" transform="rotate(80 100 100)" style="stroke-width: 3px; stroke: #fffbf9;" id="hourhand">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="43200s" repeatCount="indefinite"></animateTransform>
</line>
<line x1="100" y1="100" x2="100" y2="40" style="stroke-width: 4px; stroke: #fdfdfd;" id="minutehand">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="3600s" repeatCount="indefinite"></animateTransform>
</line>
<line x1="100" y1="100" x2="100" y2="30" style="stroke-width: 2px; stroke: #C1EFED;" id="secondhand">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="60s" repeatCount="indefinite"></animateTransform>
</line>
</g>
<circle id="center" style="fill:#128A86; stroke: #C1EFED; stroke-width: 2px;" cx="100" cy="100" r="3"></circle>
</svg>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>
<script id="rendered-js">
      var hands = [];
hands.push(document.querySelector('#secondhand > *'));
hands.push(document.querySelector('#minutehand > *'));
hands.push(document.querySelector('#hourhand > *'));

var cx = 100;
var cy = 100;

function shifter(val) {
  return [val, cx, cy].join(' ');
}

var date = new Date();
var hoursAngle = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var minuteAngle = 360 * date.getMinutes() / 60;
var secAngle = 360 * date.getSeconds() / 60;

hands[0].setAttribute('from', shifter(secAngle));
hands[0].setAttribute('to', shifter(secAngle + 360));
hands[1].setAttribute('from', shifter(minuteAngle));
hands[1].setAttribute('to', shifter(minuteAngle + 360));
hands[2].setAttribute('from', shifter(hoursAngle));
hands[2].setAttribute('to', shifter(hoursAngle + 360));

for (var i = 1; i <= 12; i++) {if (window.CP.shouldStopExecution(0)) break;
  var el = document.createElementNS('http://www.w3.org/2000/svg', 'line');
  el.setAttribute('x1', '100');
  el.setAttribute('y1', '30');
  el.setAttribute('x2', '100');
  el.setAttribute('y2', '40');
  el.setAttribute('transform', 'rotate(' + i * 360 / 12 + ' 100 100)');
  el.setAttribute('style', 'stroke: #ffffff;');
  document.querySelector('svg').appendChild(el);
}window.CP.exitedLoop(0);
      //# sourceURL=pen.js
    </script>

一键复制
友情提示

转载请注明文章来源为庞博客,如果此文内容侵犯了您的权益,请 联系 我们,我们将立即处理,感谢您的支持!

0 条回应

页面加载时间:0.676(秒) 页面查询次数:79(次)
网站共有:154 篇文章  本周更新:2 篇文章  今日更新:0 篇文章 
测试窗口  测试窗口  测试窗口
曾经的海枯石烂,抵不过好聚好散。