❉ html+css+javascript制作爱心表白代码(卡通名人爱心表白-爱心形状浮动特效 )备
一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/圣诞节/元旦节跨年/程序员表白,
引用了CSS3的动画效果来表示，视觉效果相当不错！得此表白神器，程序猿亦能够很浪漫！快去追你的女神吧！~~
1. PC(电脑端)演示
在线演示位置
2. H5 手机端
1、(代码实现)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="favicon.ico" rel="shortcut icon" class="icon-love" type="images/x-ico">
<link rel="stylesheet" href="css/love.css">
</head>
<body>
<div class="container" onselectstart="return false;" unselectable="on" style="-moz-user-select:none;">
<div class="body_left">
<img src="images/biubiubiu.gif" alt="" ondragstart=return false;>
</div>
<div class="body_center love">
<div class="block">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
</div>
</div>
<div class="footer">
<div class="border">
<div class="border-top"></div>
<div class="border-bottom"></div>
</div>
</div>
<script type="text/javascript" src="js/love.js"></script>... 可关注下方↓ 公众号获取源码</body>
</html>
js
let blocks = document.getElementsByClassName("block"),
block = blocks[0],
love = document.getElementsByClassName("love")[0],
timer = null,
index = 0, //记录拼接爱心的动画过程
clone_b
| 
发表于 2024-6-29 15:30:13
