使用HTML/CSS/JS做一个恋爱计时小挂件

CodeAE

HTML代码

<html>
<link rel="stylesheet" href="你的样式文件名">
    <body>
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-3 position-relative right d-none d-md-block">
                    <div class="sidebar-box couple"> <img class="pic" src="https://www.codeae.com/data/attachment/forum/202301/12/20170522_181739545.jpg" alt="博主"><img
                         class="couple-love" src="https://www.codeae.com/data/attachment/forum/202301/12/2023.01.13_love.jpg" alt="爱心"> <img class="pic" src="https://www.codeae.com/data/attachment/forum/202301/12/20170522_181907545.jpg"
                         alt="另一半">
                        <div id="our-company" data-start="2019-11-26"></div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="你的JS文件名"></script>
        <script type="text/javascript" src="https://www.codeae.com/data/attachment/forum/202301/12/js/love_1.js"></script>
        <script>
        lanstar.init();
        </script>
        <script>
        lanstar.addCoupleTime();
        </script>
    </body>
</html>

CSS样式

.icon {
              width: 3em;
              height: 3em;
              vertical-align: middle;
              fill: currentColor;
              overflow: hidden;
            }
            
            @media screen and (max-width: 576px)  {
            
              .nav-search-btn {
                right: 0!important;
              }
            }
            .couple {
              text-align: center;
            }
            
            .info .pic,.couple .pic {
              border-radius: 50%;
              width: 5rem;
              background: #fff;
              padding: 2px;
            }
            
            .couple-love {
              width: 35px;
              margin: 20px 0;
              animation: heartbeat 1.33s ease-in-out infinite;
            }
            
            @keyframes heartbeat {
              0% {
                -webkit-transform: scale(1);
                transform: scale(1)
              }
              50% {
                -webkit-transform: scale(.8);
                transform: scale(.8)
              }
              to {
                -webkit-transform: scale(1);
                transform: scale(1)
              }
            }
            #our-company {
              text-align: center;
                font-size: 1.1rem;
            /*  color: #7d7474;
              background: aliceblue; */
              width: 100%;
              border-radius: 4px;
              padding: 0.5rem 0;
              user-select: none;
            }
            #our-company span {
              margin: 0 .25rem;
              vertical-align: middle;
            }

不想注册本站会员的也可以去站外下载：http://www.sunwk.top/buy/4

注意：以上代码中加载了本站的图片和JS文件，，如需要请自行下载到本地，，本站以开启了防盗功能不支持本地链接加载！

点击查看效果演示

[Html/CSS] 使用HTML/CSS/JS做一个恋爱计时小挂件

相关帖子

常用jquery右健禁止命令

H5+JS+CSS3实现七夕言情源码分享

在线文字转语音PHP源码

PHP自动发卡系统源码,个人免签支付配安装使用教程

帝国cms汉语字典源码,PC移动端自适应整站源码,自带采集规则

给大家一款很不错的个人博客源码

分享一个小清新自适应宇航员404页面丢失网页模板

HTML实现爱心旋转代码

jQuery实时节气罗盘时钟代码

jQuery创意圆形罗盘时钟代码（二）

CodeAE LV9