更新第72个小实例

2021-12-16 17:31:18 +08:00 · 2021-12-16 17:31:18 +08:00 · f379587177
parent b4279a401e
commit f379587177
3 changed files with 90 additions and 1 deletions
--- a/README.md
+++ b/README.md
@ -75,4 +75,5 @@
 68. HTML5+CSS3小实例之人物介绍卡片
 69. HTML5+CSS3小实例之动感的环形加载动画
 70. HTML5+CSS3小实例之图像悬停效果
-71. HTML5+CSS3小实例之跳跃的弹性小球加载动画
+71. HTML5+CSS3小实例之跳跃的弹性小球加载动画
+72. HTML5+CSS3小实例之白桃粉可爱风的立体字时钟
--- a/css/72.css
+++ b/css/72.css
@ -0,0 +1,46 @@
+/* 引用网络字体（Kanit字体） */
+@import url("http://fonts.googleapis.com/css?family=Kanit");
+
+*{
+    /* 初始化 */
+    margin: 0;
+    padding: 0;
+}
+body{
+    /* 100%窗口高度 */
+    height: 100vh;
+    /* 弹性布局 水平+垂直居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* 背景色：白桃粉 */
+    background-color: #eacccc;
+    /* 禁止文本被选取 */
+    user-select: none;
+}
+.clock{
+    display: flex;
+}
+.clock p{
+    width: 95px;
+    font-size: 150px;
+    color: #fff;
+    text-align: center;
+    /* 设置字体 */
+    font-family: "Kanit";
+    font-weight: 900;
+    /* 文字阴影 实现3D效果 */
+    text-shadow: 0 1px 0 #deafaf,
+    0 2px 0 #bda8a8,
+    0 3px 0 #d8a1a1,
+    0 4px 0 #d59999,
+    0 5px 0 #d29292,
+    0 6px 0 #cf8b8b,
+    0 7px 0 #cc8484,
+    0 8px 0 #c97d7d,
+    0 0 5px rgba(231,156,156,0.05),
+    0 -1px 3px rgba(231,156,156,0.2),
+    0 9px 9px rgba(231,156,156,0.3),
+    0 12px 12px rgba(231,156,156,0.3),
+    0 15px 15px rgba(231,156,156,0.3);
+}
--- a/html/72.html
+++ b/html/72.html
@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
+
+    <title>白桃粉可爱风的立体字时钟</title>
+    <link rel="stylesheet" href="../css/72.css">
+    <script type="text/javascript">
+        function myTime(){
+            let time=new Date();
+            let hh=time.getHours();  //时
+            let mm=time.getMinutes();  //分
+            let ss=time.getSeconds();  //秒
+            // Math.floor() 向下取整
+            document.getElementById("1").innerText=Math.floor(hh/10);
+            document.getElementById("2").innerText=hh%10;
+            document.getElementById("4").innerText=Math.floor(mm/10);
+            document.getElementById("5").innerText=mm%10;
+            document.getElementById("7").innerText=Math.floor(ss/10);
+            document.getElementById("8").innerText=ss%10;
+        }
+        // 一秒执行一次
+        setInterval(myTime,1000);
+    </script>
+</head>
+
+<body>
+    <div class="clock">
+        <p id="1">0</p>
+        <p id="2">0</p>
+        <p id="3">:</p>
+        <p id="4">0</p>
+        <p id="5">0</p>
+        <p id="6">:</p>
+        <p id="7">0</p>
+        <p id="8">0</p>
+    </div>
+</body>
+
+</html>