使用HTML/CSS/JS做一个恋爱计时小挂件
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文件，，如需要请自行下载到本地，，本站以开启了防盗功能不支持本地链接加载！
点击查看效果演示
http://haiyong.site/post/cf97d4d8.html
页:
[1]