游戏陪玩app源码,多爱心漂浮按钮周围的实现代码
爱之满满按钮效果
怎么样才能在游戏陪玩app源码中达到爱之满满按钮效果呢,那必然是越多的爱越好啊。
我们想办法让爱心漂浮在按钮周围,在规定时间内爱心进行位移并消失即可。
创建一个元素可以使用document.createElement,移除元素可以使用DOM 的remove()
剩下的就简单了,只需要在这个过程中给不同的爱心设置不同的大小和位移即可。
核心代码:
// love.js function addHearts(content) { for(let i=0; i<10; i++) { setTimeout(() => { const fullHeart = document.createElement('div'); fullHeart.classList.add('hearts'); fullHeart.innerHTML = '<span class="heart"></span>'; fullHeart.style.left = Math.random() * 100 + '%'; fullHeart.style.top = Math.random() * 100 + '%'; fullHeart.style.transform = `translate(-50%, -50%) scale(${Math.random()+0.3}) ` fullHeart.style.animationDuration = Math.random() * 2 + 3 + 's'; fullHeart.firstChild.style.backgroundColor='#ed3056' content.appendChild(fullHeart); setTimeout(() => { fullHeart.remove(); }, 3000); }, i * 100) } }
/* fullLove.css */ .hearts { position: absolute; color: #E7273F; font-size: 15px; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: fly 3s linear forwards; } @keyframes fly { to { transform: translate(-50%, -50px) scale(0); } }
以上就是游戏陪玩app源码,多爱心漂浮按钮周围的实现代码, 更多内容欢迎关注之后的文章