使用 css 制作心形图案并且添加动画心动效果
比较简单，就直接上代码了
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style>html,.chest {width: 80px;height: 80px;cursor: pointer;position: relative;display: flex;justify-content: center;align-items: center;}
</head><body><div class="chest" onclick="moveDiv()"><div class="heart left side top"></div><div class="heart center"></div><div class="heart right side"></div><div class="text">关注我们</div></div></body></html><script>function moveDiv() {var widthNumber = randomNum(10, document.documentElement.clientWidth);var heightNumber = randomNum(10,document.documentElement.clientHeight - 200);// 获取 <div> 元素 var movingDiv = document.querySelector(".chest");// 隐藏 <div> 元素 movingDiv.style.display = "none";setTimeout(function () {// 更新 <div> 元素的样式 movingDiv.style.display = "flex";movingDiv.style.position = "absolute";movingDiv.style.left = widthNumber + "px";movingDiv.style.top = heightNumber + "px";}, 200); // 模拟延时效果}
//生成从 minNum 到 maxNum 的随机数 function randomNum(minNum, maxNum) {switch (arguments.length) {case 1:return parseInt(Math.random() * minNum + 1, 10);break;case 2:return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);break;default:return 0;break;}}</script>
如若转载，请注明出处：开源字节 https://sourcebyte.vip/article/359.html
一个着迷于技术又喜欢不断折腾的技术活跃者 2022-03-09 加入
一个着迷于技术又喜欢不断折腾的技术活跃者。喜欢并热爱编程，执着于努力之后所带来的美好生活！
评论