页面点击小红心射流研究…实现代码

效果图

核心代码

love.js

！函数(e，t，a){ 0函数n(){c '。心形{ width: 10pxheight: 10px位置：固定；背景技术# f00变压器： 旋转(45 );-webkit-transform:旋转(45 );-moz-变压器：旋转(45 );}.heart:after，心：后{内容： }；宽度：继承；高度：继承；背景：继承；边界半径： 50%;-web套件-边框-半径：50%；-蚊子-边界-半径： 50%；位置：固定；} .心：后{ top :-5px；} .心：前{左：-5px；} ')、o()、r()}函数r(){ for(var e=0；延长)d[e].alpha=0？(t.body.removeChild(d[e]).el)，d。拼接(e，1)):(d[e].y -，d[e].比例尺=.004，d[e].alpha-=.013，d[e]。埃尔。风格。CSS文本='左： ' d[e].x ' pxtop:' d[e].y ' pxopa城，3360 ' d[e].阿尔法；变压器：量程(' d[e]).刻度，' d[e].刻度)旋转(45 );背景：d ' e .颜色；z-index :99999’)；requestAnimationFrame(r)}函数o(){ var t=' function '==e . onclick的类型。onclicke.onclick=function(e){tt()，I(e)} } function I(e){ var a=t . create element(' div ')；a . name=' heart '，d.push({el:a，x:e.clientX-5，y:e.clientY-5，scale:1，alpha:1，color:s()})，t . body。附录(a)函数c(e){ var a=t . create element(' style ')；a . type=' text/CSS '；请尝试{ a . append child(t . createtextnode(e))} catch(t){ a。样式表。CSS text=e } t . getelementsbytagname(' head ')[0].附录子(a)}函数s(){返回' RGB(~(255*Math . random())'，' ~(255 * Math。random())'，' ~(255 *数学。random())')' } var d=[]；e . requestanimationframe=function(){ return e . requestanimationframe | | e . webkitrequestanimationframe | | e . mozrequestanimationframe | | e . msrequestanimationframe | | function(e){ setTimeout(e，1e3/60)}}()，n()}(窗口，文档);引用方法

！DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title页面点击小红心/标题/床头柜测试信息脚本src=' http : love。js '/脚本/正文/html为了方便大家使用，特打包提供下载地址