时间戳

首页 > 技术文章 > HTML+CSS+JS制作一个漂亮的橙子动态时钟

HTML+CSS+JS制作一个漂亮的橙子动态时钟

wsgxg 2021-04-09 12:00 原文

HTML+CSS+JS制作一个漂亮的橙子动态时钟

直接跳转至代码处

1. 效果图：

2. 背景产生：

利用四块与圆同高的矩形转一定的角度将圆切分成八块形成橙子内里，利用径向渐变形成橙皮。

background: radial-gradient(ellipse at center, #fff 60%, #ffd36a calc( 60% + 1px ),#fab91f calc( 68% + 1px ));

radial-gradient() 函数用径向渐变创建 "图像"。径向渐变由中心点定义。center（默认）：设置中间为径向渐变圆心的纵坐标值。这个想要详细了解的话可以看看这篇深入理解CSS径向渐变radial-gradient文章。

transform:rotate(45deg);

transform就是变形的意思，rotate(angle)：通过指定的角度参数对原元素指定一个2D rotation（2D 旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。更加详细的可以看这篇CSS3 Transform。

3. 代码实现：

<!DOCTYPE html>
<html lang="ch" >
<head>
    <title>橙子时钟——戈小戈</title>
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
     <meta name="author" content="戈小戈">
<!-- CSS代码开始 -->
<style type="text/css">   
/* body {
  background-color: #fff;
  margin: 0;
} */

.wrapper {
  position: relative;
}
/* author:戈小戈 */
.face {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20vmin;
  height: 20vmin;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(ellipse at center, #fff 60%, #ffd36a calc( 60% + 1px ),#fab91f calc( 68% + 1px ));
  
}
.back{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height:80%;
  border-radius: 50%;
  position: relative;
  background-color:#fce05c;

}
.back div:nth-child(1){
  width:5%;
  height:100%;
  position: absolute;
  background-color:#fff;
}
.back div:nth-child(2){
  width:5%;
  height:100%;
  position: absolute;
  background-color:#fff;
  transform:rotate(30deg);
  -ms-transform:rotate(30deg); 	/* IE 9 */
  -moz-transform:rotate(30deg); 	/* Firefox */
  -webkit-transform:rotate(30deg); /* Safari 和 Chrome */
  -o-transform:rotate(30deg); 	/* Opera */
}
.back div:nth-child(3){
  width:5%;
  height:100%;
  position: absolute;
  background-color:#fff;
  transform:rotate(60deg);
  -ms-transform:rotate(60deg); 	/* IE 9 */
  -moz-transform:rotate(60deg); 	/* Firefox */
  -webkit-transform:rotate(60deg); /* Safari 和 Chrome */
  -o-transform:rotate(60deg); 	/* Opera */
}
.back div:nth-child(4){
  width:5%;
  height:100%;
  position: absolute;
  background-color:#fff;
  transform:rotate(90deg);
  -ms-transform:rotate(90deg); 	/* IE 9 */
  -moz-transform:rotate(90deg); 	/* Firefox */
  -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
  -o-transform:rotate(90deg); 	/* Opera */
}
.back div:nth-child(5){
  width:5%;
  height:100%;
  position: absolute;
  background-color:#fff;
  transform:rotate(120deg);
  -ms-transform:rotate(120deg); 	/* IE 9 */
  -moz-transform:rotate(120deg); 	/* Firefox */
  -webkit-transform:rotate(120deg); /* Safari 和 Chrome */
  -o-transform:rotate(120deg); 	/* Opera */
}
.back div:nth-child(6){
  width:5%;
  height:100%;
  position: absolute;
  background-color:#fff;
  transform:rotate(150deg);
  -ms-transform:rotate(150deg); 	/* IE 9 */
  -moz-transform:rotate(150deg); 	/* Firefox */
  -webkit-transform:rotate(150deg); /* Safari 和 Chrome */
  -o-transform:rotate(150deg); 	/* Opera */
}
.face:after {
  content: '';
  display: block;
  width: 3vmin;
  height: 3vmin;
  border-radius: 50%;
  background-color: #faf2c2;
  background-image: url(https://www.cnblogs.com/images/logo.svg?v=R9M0WmLAIPVydmdzE2keuvnjl-bPR7_35oHqtiBzGsM);
  position: absolute;
  background-size:cover;
  -webkit-transform: rotate(-360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}
@-webkit-keyframes rotation{
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(-360deg);}
}
.quarter {
  height: 80%;
  width: 80%;
  position: absolute;
}
.quarter div {
  height: 10%;
  width: 2.4%;
  border-radius: 1vmin;
  background-color: #fab91f;
  position: absolute;
}
.quarter div:nth-child(even) {
  top: 45%;
  transform: rotate(90deg);
}
.quarter div:nth-child(odd) {
  left: 48.8%;
}
.quarter div:nth-child(1) {
  top: 0;
}
.quarter div:nth-child(2) {
  right: 3%;
}
.quarter div:nth-child(3) {
  bottom: 0;
}
.quarter div:nth-child(4) {
  left: 3%;
}
.hands div {
  position: absolute;
  bottom: 50%;
  border-radius: 1vmin;
  transform-origin: 50% 100%;
  transform: rotate(0);
}
.hands div.h {
  height: 27%;
  width: 2.4%;
  left: 48.8%;
  background-color: #db9a03;
}
.hands div.m {
  height: 40%;
  width: 2.4%;
  left: 48.8%;
  background-color: #fcb104;
}
.hands div.s {
  height: 50%;
  width: 1%;
  left: 49.5%;
  bottom: 40%;
  transform-origin: 50% 80%;
  background-color: #c7b684;
}
    </style> 
<!-- CSS代码结束 -->
</head>


<body>
    <div class="wrapper" style="padding:10px;">
        <!-- author:戈小戈 -->
        <div class="face">
            <div class="back">
          	<div></div>
    	<div></div>
 	<div></div>
	<div></div>
	<div></div>
              	<div></div>
            </div>
            <div class="quarter">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="hands">
                <div class="m"></div>
                <div class="h"></div>
                <div class="s"></div>
            </div>
        </div>
    </div>
<!--结束-->
<script>
// autor:戈小戈
    function setTime() {
                const sHand = document.querySelector('.s');
                const mHand = document.querySelector('.m');
                const hHand = document.querySelector('.h');

                const d = new Date();
                const ms = d.getMilliseconds();//毫秒
                const s = d.getSeconds();//秒
                const m = d.getMinutes();//分
                const h = d.getHours();//时
                
                const sDeg = (( s / 60 ) * 360 ) + (( ms / 1000 ) * 6 );
                const mDeg = (( m / 60 ) * 360 ) + (( s / 60 ) * 6 );
                const hDeg = (( h / 12 ) * 360 ) + (( m / 60 ) * 6 );
                
                sHand.style.transform = 'rotate('+sDeg+'deg )';
                mHand.style.transform = 'rotate('+mDeg+'deg )';
                hHand.style.transform = 'rotate('+hDeg+'deg )';
                 
    }
    setInterval( setTime, 10 );
</script>


</body>
</html>

推荐阅读