vue打造的简洁时钟效果-html代码-BFW代码库

vue打造的简洁时钟效果

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> - Standard-agnostic clock</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Raleway:700|Work+Sans&amp;display=swap'>
<style>
  html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-color: #e0e0e0;
  font-family: "Work Sans", sans-serif;
  display: flex;
  flex-direction: column;
  color: #333333;
}

.column {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

h1,
.intro,
footer {
  padding-left: 1rem;
  padding-right: 1rem;
}

h1 {
  font-family: "Raleway", sans-serif;
  font-weight: 700;
}

.intro p {
  margin: 0;
}

.intro {
  margin-bottom: .5rem;
}

#app {
  display: flex;
  flex-direction: row;
  margin: 1rem;
}

.controls {
  border-right: 1px solid #d1d1d1;
  border-top: 1px solid #bdbdbd;
  border-left: 1px solid #bdbdbd;
  border-bottom: 1px solid #bdbdbd;
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.6);
  height: 100%;
}
.controls h3 {
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.controls .control {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
.controls .control h3 {
  margin-top: 0;
}
.controls .control:not(:first-child) {
  border-top: 1p.........完整代码请登录后点击上方下载按钮下载查看