bootstrap+jquery打造一个番茄管理时间闹钟工具效果代码-html代码-BFW代码库

bootstrap+jquery打造一个番茄管理时间闹钟工具效果代码

代码语言：html

所属分类：其他

代码描述：bootstrap+jquery打造一个番茄管理时间闹钟工具效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
  
<style>
@import url(https://fonts.googleapis.com/css?family=Rationale);
.container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #354530;
}

.box,
.progress,
.lid,
.pop-up {
  position: absolute;
  width: 380px;
  height: 380px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 50%;
}

.progress {
  box-shadow: inset 0 0 15px #7c9d71;
  -webkit-transform: translate(-50%, -50%) rotate(-90deg);
          transform: translate(-50%, -50%) rotate(-90deg);
}

.progress-bar {
  position: absolute;
  border-radius: 0;
  width: 380px;
  height: 380px;
}

#lid-work, #lid-rest {
  box-shadow: 0 7px 7px rgba(20, 20, 20, 0.7), inset 0 0 15px #121811;
}

#lid-work, #filler-l-work {
  height: 334.4px;
  width: 334.4px;
  background: shade(#354530, 25%);
}

#progress-rest, #filler-p-rest {
  width: 323px;
  height: 323px;
}

#lid-rest, #filler-l-rest {
  width: 266px;
  height: 266px;
  background: shade(#354530, 15%);
}

#filler-l-rest, #filler-l-work {
  cursor: default;
}

#filler-p-rest, #filler-p-work, #filler-t-base {
  cursor: pointer;
}

#box-tomato {
  box-shadow: inset 0 0 10px #b4c6ae;
  border: 1px solid #b4c6ae;
  box-sizing: border-box;
}

.tomato {
  position: absolute;
  height: 266px;
  width: auto;
  left: 10.25%;
  top: 14%;
}

#tomato-base, #filler-t-base {
  border-radius: 50%;
  background: green;
  width: 243.2px;
  height: 243.2px;
}

#tomato-base {
  background: #354530;
}

#tomato-button {
  position: absolute;
  left: 6.25%;
  top: 2%;
  background: red;
  width: 216.6px;
  height: 231.8px;
  border-radius: 50%;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  cursor: pointer;
  z-index: 10000;
  opacity: 1;
  visibility: visible;
}

#box-buttons {
  z-index: 10;
  opacity: 0;
}

#pop-refresh {
  position: absolute;
  cursor: pointer;
  width: 100px;
  height: 100px;
  left: 99%;
  top: 98.5%;
}
#pop-refresh img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-transition: -webkit-transform 0.25s ease-in-out;
  transition: -webkit-transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
}
#pop-refresh:hover img {
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
}

#refresh {
  -webkit-transition: -webkit-transform 0.25s ease-in;
  transition: -webkit-transform 0.25s ease-in;
  transition: transform 0.25s ease-in;
  transition: transform 0.25s ease-in, -webkit-transform 0.25s ease-in;
}

.progress-bar-opaque {
  background-color: tint(#354530, 10%);
}

#box-pointers {
  -webkit-transform: translate(-50%, -50%) rotate(-90deg);
          transform: translate(-50%, -50%) rotate(-90deg);
}

.arrow-axis {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  position: fixed;
  width: 38px;
  height: 38px;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  z-index: 2;
}

#axis-work {
  -webkit-transform: translate(171px, 171px);
          transform: tra.........完整代码请登录后点击上方下载按钮下载查看