vue实现抖音时间转盘

本文实例为大家分享了vue实现抖音时间转盘的具体代码，供大家参考，具体内容如下

做了一个抖音时间转盘，还挺简单的，可能我做的很粗糙

用vue做的 才160行代码。

其实很简单 只是大部分人被这个圆给迷惑了

这个圆就是用简单css3就能做 通过rotate来修改计算就能展示出来了。

然后贴代码。

.box{
 position: absolute;
 transition: 1s;
}
.main{
 width: 100%;
 height: 100vh;
 overflow: hidden;
 background: #ccc;
}
.yearBox{
 top: 50%;
 left: 50%;
 height: 40px;
 width: 40px;
 margin-top: -20px;
 margin-left: -20px;
 line-height: 40px;
 text-align: center;
 font-size: 18px;
}
.timeBox{
 width: 800px;
 height: 800px;
 margin: 0 auto;
 position: relative;
}
.dayBox {
 width: 200px;
 height: 200px;
 top: 300px;
 left: 300px;
}
.hourBox {
 width: 400px;
 height: 400px;
 top: 200px;
 left: 200px;
}
.minutesBox {
 width: 600px;
 height: 600px;
 top: 100px;
 left: 100px;
}
.secondBox {
 width: 800px;
 height: 800px;
 top: 0;
 left: 0;
 position: absolute;
}
.container {
  overflow:auto;
  li {
   width: 50px;
   height: 20px;
   font-size: 12px;
   position: absolute;
  }
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。