前言

这个天太冷了，劝退我出去遛弯的心情，就在掘金浏览文章，受一个python大佬的启发，他用python的TK实现了一个下班倒计时，我就想我用前端时间学的前端知识实现一个实时显示时间的界面，再给它配一个小红心（我不是专业搞前端的，总体还是很简陋的，纯粹兴趣）

效果图长这样

图片.png 动图

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>my time heart</title>

    <style type="text/css">
        body {
        font-size: 40px;
        text-shadow: 5px 5px 5px green, 0px 0px 2px green, 2px 2px 3px darkred;
            background-image: url("img.png");
        }

      .heart {position: absolute;
          left:600px;
          top:130px;
      }
      .heart:before,
      .heart:after {
        width: 40px;
        height: 60px;
        position: absolute;
        content: "";
        left: 50px;
        /*top: -10px;*/
        background: red;
        -moz-border-radius: 50px 50px 0 0;
        border-radius: 50px 50px 0 0;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
        -o-transform-origin: 0 100%;
        transform-origin: 0 100%;
       }
    .heart:after {
        left: 10px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transform-origin: 100% 100%;
        -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
        -o-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
    }
    @keyframes dong {
      0% {transform: translate(0px, 0px);}
        50% {transform: translate(10px, -20px);}
        100% {transform: translate(0px, 0px);}

    }
    .heart {animation: dong 1s infinite;}

    </style>
</head>

<body>
     <div>
          <p> 实时时间 </p>
          <div id='time'></div>
          <script>setInterval("time.innerHTML=' 星期'+'日一二三四五六'.charAt(new Date().getDay())+ '  ' + new Date().toLocaleString()",1000);
         </script>
     </div>
     <div class="heart" >
     </div>

</body>
</html>

后记

感觉想法还是不错的，那个红心要是个表盘，整个秒针哒哒转，应该会更好看，看我后面能不能整出来

让时间跟着心脏跳动吧

前言

效果图长这样

直接上代码

后记