2018年开始，大家很悠闲，随意浏览各个社区，一些小发现，希望与大家分享，请忽略糟糕的语言组织：总体效果：每次鼠标点击页面，鼠标位置出现一个?，然后?慢慢上升，直到消失。或者直接上代码。1.先写心形的cssPS：顺便给html和body加上height:100%；.heart{宽度：10px；高度：10px；//整个网页因此是固定的position:fixed;背景：#f00；变换：旋转（45度）；-webkit变换：旋转（45度）；-moz变换：旋转（45度）；}.heart:after,.heart:before{内容：'';宽度：继承；身高：继承；背景：继承；边界半径：50%；-webkit-边框半径：50%；-moz-边界半径：50%；位置：绝对；}.heart:after{top:-5px;}.heart:before{left:-5px;}2。第二步创建心脏函数createHeart(event){//获取点击坐标constleft=event.clientX,top=event.clientY,heart=document.createElement('div');heart.className="心脏";//heartstyle//可以改变心形颜色加上随机颜色的函数heart.style.backgroundColor=randomColor();heart.style.left=left-5+'px';//以下属性随位移变化constparams={top,//可以添加你需要改变的样式，比如透明度，缩放opactity:1,scale:1}//将params属性付给heartand做一些兼容处理heart.style.opacity=params.alpha;heart.style.left=params.left+'px';heart.style.top=params.top+'px';heart.style.transform='scale('+params.scale+','+params.scale+')rotate(45deg)';document.body.appendChild（心脏）；//追加到正文}functionrandomColor(){return"rgb("+(~~(Math.random()*255))+','+(~~(Math.random()*255))+','+(~~(Math.random()*255))+')';}这样每次点击鼠标，鼠标位置就会出现一个随机颜色的心形。3.第三步将心形向上移动直到消失得到生成心形的元素然后使用requestAnimationFrame()函数，这里真的没有什么好的css3方法，因为初值未定requestAnimationFrame可以参考张新旭的解释functionupLoop(dom,params){if(params.alpha<=0){document.body.removeChild(dom);返回;};//设置变化速度params.alpha-=0.006;参数.top--;参数.scale+=0.003;dom.style.opacity=params.alpha;dom.style.top=params.top+'px';dom.style.transform='scale('+params.scale+','+params.scale+')rotate(45deg)';requestAnimationFrame(function(){hideLoop(dom,params)})}//然后去掉createHeart方法中的assignment样式，添加upLoop方法//下面的functioncreateHeart(event){constleft=event.clientX,top=event.clientY,heart=document.createElement('div');heart.className="心脏";//心形样式//可变心形颜色加随机颜色functionheart.style.backgroundColor=randomColor();heart.style.left=left-5+'px';//以下属性随位移变化constparams={top,//可以添加需要改变的样式，比如透明度和缩放opactity:1,scale:1}document.body.appendChild(heart);hideLoop（心脏，参数）};4。最后添加点击事件window.onclick=function(event){createHeart(event);}gif图片不会乱
