使用 css 制作心形图案并且添加动画心动效果
![使用css制作心形图案并且添加动画心动效果](https://static001.geekbang.org/infoq/a4/a4798148fcb0ae83c47da9907c9b3fc3.png)
比较简单,就直接上代码了
<!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
评论