前段时间在看一档说唱节目,被里面的一个说唱歌手JBcob
的爱之满满
这句词给洗脑了。
于是这次给大家带来一个爱之满满
的点赞按钮,让大家在点赞的同时还能感受到被爱包裹的感觉。
TodoList
- 爱心按钮
- 引导点赞
- 爱之满满
Just Do It
❤️ 爱心按钮
<!-- fulllove.html --> <div class=likeBtn id=likeBtn> <span class=heart id=heart></span> </div>
/* fulllove.css */ .heart{ background-color: #8a93a0; height: 13px; width: 13px; transform: rotate(-45deg) scale(1); display: inline-block; } .heart::before { content: ''; position: absolute; top: -50%; left: 0; background-color: inherit; border-radius: 50%; height: 13px; width: 13px; } .heart::after { content: ''; position: absolute; top: 0; right: -50%; background-color: inherit; border-radius: 50%; height: 13px; width: 13px; }
- 再给外层加一些阴影就可以出来拟态化效果
引导点赞
- 我们需要让按钮做出一些视觉效果来引导观众姥爷们点赞,那持续震动无疑是一种好的选择。
// love.js const likeBtn = document.getElementById('likeBtn'); const heart=document.getElementById('heart') likeBtn.addEventListener('mousemove',() => { heart.classList.add('heratPop') }) likeBtn.addEventListener('mouSEOut',() => { heart.classList.remove('heratPop') })
/* fulllove.css */ .heratPop{ animation: pulse 1s linear infinite; } @keyframes pulse { 0% { transform: rotate(-45deg) scale(1); } 10% { transform: rotate(-45deg) scale(1.1); } 20% { transform: rotate(-45deg) scale(0.9); } 30% { transform: rotate(-45deg) scale(1.2); } 40% { transform: rotate(-45deg) scale(0.9); } 50% { transform: rotate(-45deg) scale(1.1); } 60% { transform: rotate(-45deg) scale(0.9); } 70% { transform: rotate(-45deg) scale(1); } }
爱之满满
- 接下来就是最主要的爱之满满了,怎么样才能达到这种效果呢,那必然是越多的爱越好啊。
- 那我们想办法让爱心漂浮在按钮周围,在规定时间内爱心进行位移并消失即可。
- 创建一个元素可以使用
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); } }
写在最后
更多编程相关知识,请访问:编程学习!!
原文地址:https://www.jb51.cc/css/1205445.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。