暂停和播放按钮

yan358941877 · Jul 27, 2017 · f99d5a8 · f99d5a8
1 parent 0bc4f24
commit f99d5a8
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 1 deletion.
diff --git a/song/index.css b/song/index.css
@@ -65,6 +65,30 @@ body {
   height: 80vw;
 }
 
+/* 播放和暂停按钮 */
+.disc-operate span {
+  color: #fff;
+  font-size: 40px;
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  border-radius: 50%;
+  border: 1px solid #fff;
+  background: rgba(0,0,0, 0.5);
+  position: absolute;
+  top: 29vh;
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+}
+.disc-operate span.active { opacity: 1;}
+
+
+.disc-operate .pause {
+
+}
 @keyframes disc-circle {
   from {
     transform: rotate(0deg);

diff --git a/song/index.html b/song/index.html
@@ -6,6 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>music</title>
   <link rel="stylesheet" type="text/css" href="./index.css">
+  <link rel="stylesheet" type="text/css" href="../static/fonts/iconfont.css">
 </head>
 <body>
   <div class="disc">
@@ -20,7 +21,10 @@
         <img src="../static/disc_light-ip6.png">
       </div>
     </div>
-
+    <div class="disc-operate">
+      <span class="iconfont icon-pause active"></span>
+      <span class="iconfont icon-play"></span>
+    </div>
   </div>
   <div class="lyrics">
 

diff --git a/static/fonts/iconfont.css b/static/fonts/iconfont.css
@@ -0,0 +1,21 @@
+
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1501144682860'); /* IE9*/
+  src: url('iconfont.eot?t=1501144682860#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('iconfont.woff?t=1501144682860') format('woff'), /* chrome, firefox */
+  url('iconfont.ttf?t=1501144682860') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('iconfont.svg?t=1501144682860#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family:"iconfont" !important;
+  font-size:16px;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-pause:before { content: "\ee07"; }
+
+.icon-play:before { content: "\e67d"; }
+
diff --git a/static/fonts/iconfont.eot b/static/fonts/iconfont.eot
diff --git a/static/fonts/iconfont.svg b/static/fonts/iconfont.svg
diff --git a/static/fonts/iconfont.ttf b/static/fonts/iconfont.ttf
diff --git a/static/fonts/iconfont.woff b/static/fonts/iconfont.woff