鼠标点击网页出现爱心特效

像这样的鼠标点击网页出现js的特效，代码如下，只需要直接把这段代码复制到<script></script>标签下运行就可以实现了，要导入css和js：

            //鼠标点击出现爱心特效(function(window,document,undefined){var hearts = [];window.requestAnimationFrame = (function(){return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function (callback){setTimeout(callback,1000/60);}})();init();function init(){css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");attachEvent();gameloop();}function gameloop(){for(var i=0;i<hearts.length;i++){if(hearts[i].alpha <=0){document.body.removeChild(hearts[i].el);hearts.splice(i,1);continue;}hearts[i].y--;hearts[i].scale += 0.004;hearts[i].alpha -= 0.013;hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;}requestAnimationFrame(gameloop);}function attachEvent(){var old = typeof window.onclick==="function" && window.onclick;window.onclick = function(event){old && old();createHeart(event);}}function createHeart(event){var d = document.createElement("div");d.className = "heart";hearts.push({el : d,x : event.clientX - 5,y : event.clientY - 5,scale : 1,alpha : 1,color : randomColor()});document.body.appendChild(d);}function css(css){var style = document.createElement("style");style.type="text/css";try{style.appendChild(document.createTextNode(css));}catch(ex){style.styleSheet.cssText = css;}document.getElementsByTagName('head')[0].appendChild(style);}function randomColor(){return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";}})(window,document);

鼠标点击网页出现爱心特效相关推荐

鼠标点击网页空白处出现手机号
鼠标点击网页空白处出现手机号等文字话不多说上代码 <!DOCTYPE html> <html lang="en"><head><met ...
2022跨年烟花代码（六）HTML5鼠标点击页面放烟花特效
HTML5鼠标点击页面放烟花特效 html代码 <!DOCTYPE html> <html> <head><meta http-equiv="Con ...
Qt QWebview调用JS，实现QQ邮箱自动填写输入框，模拟鼠标点击网页按钮！！
Qt QWebview调用JS,实现QQ邮箱自动填写输入框,模拟鼠标点击网页按钮!! QWebview调用JS,自动填写用户名和密码,并且JS模拟鼠标点击网页按钮. 下载地址:https://down ...
html中点击导航栏变色,JavaScript实现鼠标点击导航栏变色特效
废话不多说了,直接给大家贴js实现鼠标点击导航栏变色代码,具体代码如下所示: JAVASCRIPT之导航栏鼠标点击变色特效 body { font-size:12px; font-family: Ar ...
鼠标点击出现小爱心的效果
鼠标点击出现小爱心的效果** 下面是js内容,引入即可! <script>(function(window,document,undefined){var hearts = [];wind ...
爱国html源码,鼠标点击网页爱国富强民主特效（附代码）
有朋友经常问,网站上点击出现爱国字眼是怎么做出来的,鼠标点击就显示"富强.民主.和谐"等24个词语,这样鼠标点击特效.下面来分享一下如何实现的. 1,效果如下: 添加页面点击特效, ...
html鼠标滑过导航栏变色,JavaScript实现鼠标点击导航栏变色特效
废话不多说了,直接给大家贴js实现鼠标点击导航栏变色代码,具体代码如下所示: JAVASCRIPT之导航栏鼠标点击变色特效 body { font-size:12px; font-family: Ar ...
【Chrome-crx】键盘模拟鼠标点击网页按钮
0x00 前言最近在做一个标注任务: 简单的说,就是屏幕上有好多小方块,选中其中的部分, 然后在页面下面的四个标注按钮(红绿蓝黑)上点一下, 小方块们就会被染成这个按钮的颜色,需要把所有的小方块们染 ...
html模拟点击某个键盘按钮,【Chrome-crx】键盘模拟鼠标点击网页按钮
0x00 前言最近在做一个标注任务: 简单的说,就是屏幕上有好多小方块,选中其中的部分, 然后在页面下面的四个标注按钮(红绿蓝黑)上点一下, 小方块们就会被染成这个按钮的颜色,需要把所有的小方块们染 ...

鼠标点击网页出现爱心特效

鼠标点击网页出现爱心特效相关推荐

最新文章

热门文章