<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes remove {
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<script>
function createLove(w,h,color,x,y){
const span=document.createElement('div');
const left=document.createElement('div');
const right=document.createElement('div');
const spanStyle={
width:w+'px',
height:h+'px',
position:'relative',
top:y+'px',
left:x+'px',
backgroundColor:color,
transform: 'rotate(-45deg)'
}
const leftStyle={
width:w+'px',
height:h+'px',
position:'absolute',
top:-w/2+'px',
left:0+'px',
borderRadius:'50%',
backgroundColor:color,
}
const rightStyle={
width:w+'px',
height:h+'px',
position:'absolute',
borderRadius:'50%',
top:0+'px',
left:w/2+'px',
backgroundColor:color,
}
// span.style=spanStyle;
// left.style=left;
// right.style=right;
Object.assign(span.style,spanStyle);
Object.assign(left.style,leftStyle);
Object.assign(right.style,rightStyle);
// document.body.appendChild(span);
span.appendChild(left);
span.appendChild(right);
// console.log(span)
return span;
}
let span= createLove(100,100,'red',900,100);
console.log(span)
function getRandom(){
let r = Math.floor(Math.random() * 256);
let g = Math.floor(Math.random() * 256);
let b = Math.floor(Math.random() * 256);
let color = "#" + r.toString(16) + g.toString(16) + b.toString(16);
return color;
}
console.log(getRandom())
window.addEventListener('load',function(){
let body=document.body;
document.addEventListener('click',function(e){
// console.log('sds')
let x = e.pageX;
let y = e.pageY;
// console.log(x)
let color= getRandom();
let span= createLove(15,15,color,x,y);
span.style.animation='remove 1s'
body.appendChild(span)
setTimeout(function(){
span.remove()
},900)
})
})
</script>
</body>
</html>
js实现鼠标点击出现爱心
最新推荐文章于 2024-02-01 18:17:00 发布