前言

快过年了~，今年因为特别原因不能回家过年了，在公司干坐在好无聊啊，就搞些花里胡哨的东西吧（合理划水）

废话不多说，直接上代码~，借鉴了某位大佬的，链接就不放了（找不找了>-<）

html:

 <head><meta charset="utf-8"><title>点击小爱心2.0</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><style type="text/css">.icon{fill:currentColor;/* 必须加这个,svg标签才能改变颜色 */}#div_dom{display: none;/* 隐藏dom母体 */}div{position: absolute;/* 必须加这个,div才可以设置位置为鼠标点击位置 */}.opacity1 {opacity: 0.6;/* 透明度0.6 */}.opacity2 {opacity: 0.3;}</style></head><body><h3 style="text-align: center;">请点击屏幕查看效果</h3><div id="div_dom"><svg t="1611984899556" class="icon" viewBox="0 0 1169 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1962" width="36.53125" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M1045.333 117.333C919.467-6.4 716.8-10.667 584.533 106.667 452.267-10.667 249.6-6.4 123.733 117.333c-128 128-130.133 337.067-2.133 467.2l4.267 4.267 384 384c40.533 40.533 106.666 42.667 149.333 2.133l2.133-2.133 384-384c128-128 130.134-337.067 4.267-465.067-2.133-4.266-2.133-4.266-4.267-6.4z" p-id="1963"></path></svg></div></body>

js:

 <script type="text/javascript">window.onclick = function(e) {//存储需要的颜色let arr = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#9AECDB", "#f1c40f", "#e67e22", "#e74c3c", "#9980FA","#c0392b", "#d35400", "#f39c12"];//随机产生一个颜色let heartNum = Math.floor(Math.random() * arr.length);var domss=document.getElementById("div_dom"); // 获得被克隆的节点对象 var div=domss.cloneNode(true);div.style.color=arr[heartNum];div.setAttribute("id", "");//取消id值，变为可见div.setAttribute("class", "opacity0");//获得鼠标的x,y轴的位置，并减去自身宽高的一半，使其能够在爱心的正中心let x = e.pageX - div.offsetWidth / 2;let y = e.pageY - div.offsetHeight / 2;div.style.left = x + "px";div.style.top = y + "px";//将dom追加到body中document.body.appendChild(div);//获得0-1的整数let num = 1;let timer = setInterval(() => {num++;if (num == 10) div.setAttribute("class", "opacity1");if (num == 20) div.setAttribute("class", "opacity2");y -= 5;div.style.left = x + "px";div.style.top = y + "px";//如果超出屏幕范围，则删除此节点if (num == 30) {clearInterval(timer);div.remove();}}, 70);}</script>

该有的上面都有注释，我就不说了下面放个dome
点击小爱心╮(╯▽╰)╭

html实现点击出现小爱心相关推荐

鼠标点击出现小爱心的效果
鼠标点击出现小爱心的效果** 下面是js内容,引入即可! <script>(function(window,document,undefined){var hearts = [];wind ...
前端点击移动生成小爱心
前端点击移动生成小爱心我之前看见一个博客,鼠标点击的时候会有不同颜色的小爱心出现,我就心血来潮试着写了一下,并且加了鼠标移动也会产生小爱心,放在这里目的是以后万一我要用方便找,写的不好请海涵. &l ...
varchar可以设置唯一吗_微信可以设置特效主题皮肤了，满屏幕的小爱心，你心动了吗？...
不知道小伙伴们有没有玩过微信特效主题皮肤?还可以发射小爱心哟! 今天发现有好多小伙伴留言,问小雷如何制作微信特效主题,今天小雷就带着微信特效主题给小伙伴们送来了. 小雷先给大家展示一下微信特效主题的预 ...
爱心~~~红色的~~~小爱心组成的大爱心~~~
哈哈哈哈哈哈哈,小爱心的发现是个意外意外意外咳咳,正题今天本来是在LeetCode上刷题,想到了异或操作,之前没有试过字符与字符的异或,于是试了一下 #include <iostream&g ...
页面点击出现小心心。
// 页面点击出现小心心 !function(){// 创建一个style标签添加到head下面,并写好样式let windowHeartStyle = document.createElement( ...
在公众号中点击指定小程序并没有成功的跳转
场景:在公众号中点击指定小程序并没有成功的跳转,为什么会这样呢❓❓ 缘由:因为在跳转的时候,从公众号携带过去的 backurl返回路径携带 # 字符 ,这和小程序的hash路由模式解析发生冲突而阻断了 ...
小案例之点击网页任意位置出现小爱心
本文用到了事件中的onclick事件和一些css属性 <script> window.onload = function(){ document.οnclick=function love ...
hexo的yilia主题鼠标点击出现小红心
设置步骤第一步第二步第一步在hexo/themes/yilia/source文件目录下添加love.js文件. 内容为: !function(e,t,a){function r(){for(v ...
鼠标点击网页出现爱心特效
像这样的鼠标点击网页出现js的特效,代码如下,只需要直接把这段代码复制到<script></script>标签下运行就可以实现了,要导入css和js: //鼠标点击出现爱心特效 ...

html实现点击出现小爱心

前言

html实现点击出现小爱心相关推荐

最新文章

热门文章