likes
comments
collection
share

如何实现一个外硬内柔的时钟

作者站长头像
站长
· 阅读数 55

Hello,这里是mouche，当然你也可以叫我某车，反正大家都爱这么叫😁

  • 感觉已经很久没有碰过CSS了，那就综合一下练练手
  • 今天主要是实现一个外表冷硬，内心柔弱的时钟，所以我们的主要用色为black,pink（虽然不怎么搭）
  • 其实就是想试一下时钟怎么写+霓虹灯怎么实现

一、刻度的实现

📝锥形渐变

  • 先了解一下什么是锥形渐变（conic-gradient）
    • conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
    • 分别为起始角度（可省略默认0°），中心位置（可省略默认中心），角渐变断点
    • 起始点是图形中心，然后以顺时针方向绕中心实现渐变效果
  • 先用一下我们的主要用色试一下手：设置从0°开始，中心位置在图像的正中间，从pink渐变到black background-image: conic-gradient(at 50% 50%, pink,black) 如何实现一个外硬内柔的时钟
  • 继续了解这一串background-image: conic-gradient(pink 0 15deg, black 0 30deg)：表示的是在0-15°使用的是pink颜色，在0到30°上使用的black颜色，先定义的颜色的层叠在后定义的颜色之上（左下角图）

如何实现一个外硬内柔的时钟如何实现一个外硬内柔的时钟

📝重复锥形渐变

  • 了解一下什么是重复锥形渐变（repaet-conic-gradient）
    • 就是让我们已经定义的图案在360°上不断重复
  • 继续练手（右上角图）,加上重复就行repeating-conic-gradient(pink 0 15deg, black 0 30deg)

📝时钟刻度

  • 首先我们要的是外表高冷，那么前面的粉色自然是不能出现啦，我们给他换成白色
  • 其次，我们刻度线是很细的，那么只需要把它设为1deg即可
  • 既然有时针刻度了，那么我们也考虑有分针刻度，即再设置一次将其分为60份
  • 再者我们需要有一个遮罩，将中间这部分遮掉，一开始我采用的是css的mask属性，显示非透明部分，但是漏漏漏我们要贯彻高冷，于是采用absolute将盒子放上去，加上内阴影让它变得自然一点 如何实现一个外硬内柔的时钟如何实现一个外硬内柔的时钟如何实现一个外硬内柔的时钟
.clock{
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: black;
/*这里分别设置了时针刻度和分针刻度*/
  background-image: repeating-conic-gradient(white 0 1deg, transparent 0 30deg),
                    repeating-conic-gradient(rgb(39, 37, 37) 0 1deg, transparent 0 6deg);
           
}
.clockBox{
  position: absolute;
  top: 10px;
  left: 10px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background-color: rgb(24, 24, 24);
  box-shadow: 0px 0px 10px 10px inset;
}

二、数字实现

  • 因为我们刻度线算比较多了，那我们就只浅浅弄上几个数字即可
  • 因为弄的数字不多，浅浅处理一下即可
如何实现一个外硬内柔的时钟 
.num li {
  color: #fff;
  font-size: 20px;
  list-style:none;
  position: absolute;
  top: 0;
  left: 0;
}
.num :nth-child(1) {
  transform: translateX(75px)
}
.num :nth-child(2) {
  transform: translate(160px,75px);
}
.num :nth-child(3) {
  transform: translate(85px,150px);
}
.num :nth-child(4) {
  transform: translate(10px,75px);
}

三、定中心

  • 中心我们希望的效果是中间是一个小黑点，然后旁边用渐变
  • 定到中心我们采用的是position+margin的做法，当然这里也可以回顾一下实现居中的方法（尊滴是太多啦）
如何实现一个外硬内柔的时钟 
.center {
  width: 30px;
  height: 30px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -15px;
  border-radius: 50%;
  background-image: radial-gradient(ellipse at center,
    rgba(200,200,200,0),
    rgb(100 100 100) 90%,
    rgba(130,130,130,1) 100%);
}
/*定小黑点*/
.center::before {
  content: '';
  width:10px;
  height:10px;
  position: absolute;
  left: 10px;
  top: 10px;
  border-radius: 50%;
  background-color: black;
}

四、画指针

  • 指针就是看要不要花里胡哨一点了哈哈哈哈，当然我比较懒哈哈哈，那就简单一点，就简单的盒子，然后给他加点border-radius
  • 分别对时针，分针，秒针进行颜色宽度长度的设置，让不同针能够区分出来
  • 这样的话中间就会丑丑的，不要忘记我们上面设置过的小黑点，设置它的z-index出来遮一遮丑，然后加点box-shadow即可
如何实现一个外硬内柔的时钟 
.hour-hand {
  position: absolute;
  left: 0;
  top: 40px;
  width: 10px;
  height: 50px;
  border-radius: 10px;
  background-color: #969696;
  transform: rotate(30deg);
  transform-origin: bottom;
}
.minute-hand {
  position: absolute;
  left: 0;
  top: 12px;
  width: 8px;
  height: 80px;
  border-radius: 10px;
  background-color:#837275;
  transform: rotate(50deg);
  transform-origin: bottom center;
}
.second-hand {
  position: absolute;
  left: 0;
  top: 10px;
  width: 4px;
  height: 80px;
  border-radius: 10px;
  background-color: #4c3b3e;
  transform: rotate(200deg);
  transform-origin: bottom center;
}

五、让时钟动起来

  • 这里我们先来分析一下
  • JS提供了API可以让我们直接获取到数据
    • 通过getHours()获取时
    • 通过getMinutes()获取分钟
    • 通过getSeconds() 获取秒
var time = new Date();
var hour = time.getHours();
var minute = time.getMinutes();
var second = time.getSeconds();
console.log(hour, minute, second); //23 35 14
//表示 23时，35分，14秒

🗒时针

  • 对于时针，1个小时就等于30deg
  • 转动的角度应该为当前小时+当前分钟所致的角度（秒针影响太小了，我们不算进去啦）
  • 又因为0-12时和12-24是两个重复的圈，所以我们需要分类讨论
    • 0-12小时，应该为当前小时+当前分钟/60
    • 12-24小时，应该为（当前小时-12小时）+当前分钟/60
  let hournum;
  if (hour > 12) {
       hournum = ((hour - 12) + minute / 60) * 30;
  } else {
       hournum = (hour + minute / 60 ) * 30;
  }
 document.querySelector('.hour-hand').style.transform = `rotate(${hournum}deg)`

🗒分针

  • 对于分针，1分钟就等于6deg
  • 转动的角度应该为当前分钟+当前秒所致的角度
 const minNum = (minute + second / 60) * 6 ;
 document.querySelector('.minute-hand').style.transform = `rotate(${minNum}deg)`

🗒秒针

  • 对于秒针，1秒就等于6deg，直接秒×60即可
const senNum = second * 6;
document.querySelector('.second-hand').style.transform = `rotate(${senNum}deg)`

如何实现一个外硬内柔的时钟

六、内心柔弱

  • 我们说要让它刚硬的外部带点粉这事就不能忘哈哈哈
  • 选择让它有粉红色的霓虹灯效果
  • 那么就只需要让它加上几个粉红色阴影即可
.clock:hover{
  box-shadow: 0 0 5px pink,
              0 0 25px  pink,
              0 0 50px  pink,
              0 0 200px  pink;
}

转载自:https://juejin.cn/post/7148104271827828743
评论
请登录