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/bootstrap.3.3.4.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.css">
  
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300);

body {
  background-color: none;
  color: #999;
  font-family: Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: 300;
  padding: 60px 0;
  text-transform: uppercase;
}

h1, h2, h3, h4, h5, h6 {
  text-transform: uppercase;
  font-weight: 300;
}

.main-title{
  margin-top: 40px;
  font-size: 55px;
}

p{
  font-size: 28px;
}

button{
  font-size: 25px;
  color: #999;
  background:none;
  border:none;
}

button:focus{
  color: #666;
  outline: none;
}

.break-set,
.work-set{
  margin-top: 10px;
  margin-bottom: 10px;
  
}

.break-set p,
.work-set p {
  display: inline;
  margin-left: 14px;
  margin-right: 14px
}

#session {
  padding-top: 50px;
  font-size: 60px;
}

#stopwatch{
  background-color: none;
  z-index: -7;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 20;
  overflow: hidden;
  height: 400px;
  width: 400px;
  border-radius: 50%;
}

#inner-stopwatch{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 50%;
  z-index: 2;
  border: 4px solid #999;
}

#progress {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
.........完整代码请登录后点击上方下载按钮下载查看