// 页面点击出现小心心
!function(){
// 创建一个style标签添加到head下面,并写好样式
let windowHeartStyle = document.createElement("style");
let styleType = document.createTextNode(`
.windowHeart{
width:10px;
height:10px;
background-color:red;
position:fixed;
top:500px;
left:500px;
transform:rotate(45deg);
z-index:999;
opacity:.8;
}
.windowHeart:after,.windowHeart:before{
content: '';
width: inherit;
height: inherit;
background: inherit;
border-radius: 50%;
position: absolute;
}
.windowHeart:after{
top: -5px;
}
.windowHeart:before{
left: -5px;
}
`);
windowHeartStyle.appendChild(styleType)
document.head.appendChild(windowHeartStyle)
// 窗口的点击事件
window.onclick = function(e){
// 获取点击坐标
let clientX = e.clientX;
let clientY = e.clientY;
// 创建一个div标签
let windowHeart = document.createElement("div");
// 标签添加class名
windowHeart.className = "windowHeart";
// 鼠标点击的地方出现小心心
windowHeart.style.top = clientY - 12 + "px";
windowHeart.style.left = clientX - 5 + "px";
// 随机颜色
function rand (){
return Math.floor(Math.random()*255);
}
windowHeart.style.backgroundColor = `rgb(${rand ()},${rand ()},${rand ()})`;
// body添加元素
document.body.appendChild(windowHeart)
// 向上方移动逐渐消失
let count = 0;
let AnimationFrame;
windowHeart.setAttribute("count",count)
function a (){
count++;
windowHeart.setAttribute("count",count);
windowHeart.style.transform= `translateY(${count * -1+ "px"}) rotate(45deg)`;
windowHeart.style.opacity= `${1-count/100}`;
AnimationFrame = requestAnimationFrame(a);
if(count >= 100){
document.body.removeChild(windowHeart)
cancelAnimationFrame(AnimationFrame);
}
}
requestAnimationFrame(a)
}
}()
“相关推荐”对你有帮助么?
-
非常没帮助
-
没帮助
-
一般
-
有帮助
-
非常有帮助
提交