前端开发实现点击出现不断向上可变色心形的效果

如何实现前端开发效果，点击屏幕时展现心形，自动向上移动，并随着向上移动而逐渐透明直到消失

我先给大家说一下这个效果的实现原理，大家明白了原理，代码怎么写都行，就是那些东西而已

首先，它的原理就是页面上有一个div盒子，这个盒子处于隐藏状态，这个盒子里面有放了一个图片，这个图片如果没有特别要求，大家也不用去自己ps，我们直接导入一个公共的矢量切片服务器上的资源就可以，这里说的矢量切片大家不理解也没有关系，就理解为一个专门存放图片的服务器就可以

其次这个盒子对应的效果我们在css准备好，之后用js给整个页面添加一个点击事件，点击任意一个地方的时候，触发事件，复制这个盒子，并让他展示出来，随后按照我们想要的效果控制这个盒子的展示效果，整个实现流程中用到的js也直接导入公共的就可以，当然你自己下载一个js包也可以

现在开始上代码

首先是盒子部分

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="../css/common_star.css" />
<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="30" height="30" xmlns:xlink="http://www.w3.org/1999/xlink"><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" /></svg>
</div>
<script src="../js/common_star.js"></script>

其次是css部分

.icon{fill:currentColor;/* 让svg的颜色随着所在盒子而变化 */
}#div_dom{display: none;/* 隐藏要拷贝的盒子 */
}div{position: absolute;/* 必须加定位,div才可以不影响整个文档流的前提下变换位置 */
}.opacity1 {opacity: 0.6;/* 透明度0.6 */
}.opacity2 {opacity: 0.3;
}

最后是js部分

window.onclick = function(e) {//存储需要的颜色var arr = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#9AECDB", "#f1c40f", "#e67e22", "#e74c3c", "#9980FA","#c0392b", "#d35400", "#f39c12"];//随机产生一个颜色var 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轴的位置，整合成盒子初始的位置，使爱心的中心点和鼠标头重合，加强视觉效果var x = e.pageX - 15;var y = e.pageY - 15;div.style.left = x + "px";div.style.top = y + "px";//将dom追加到body中document.body.appendChild(div);//准备一个状态的累加器var num = 1;//使用可循环定时器实现最终效果var 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);
}

前端开发实现点击出现不断向上可变色心形的效果相关推荐

前端如何实现音乐盒胶盘的转动_干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果?...
首先,我们来看一下什么是瀑布流布局效果,比如电商网站蘑菇街原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
图片流_干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果?
首先,我们来看一下什么是瀑布流布局效果,比如电商网站蘑菇街原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
css3 下边框缓缓划过_干货来袭！web前端开发工程师必看之如何使用CSS3实现瀑布流效果？...
首先,我们来看一下什么是瀑布流布局效果,比如电商网站蘑菇街原理图: 在一个大盒子里,放置多个小盒子,小盒子的大小可以不一致,长短不一样,呈现一种瀑布流的效果. 使用CSS3S实现只需要如下4步: ...
Web前端开发应该避免的几个思维误区
很多时候进入企业的同一批Web前端工程师,在1-3年的发展过程中会出现分化.有的程序员依旧是程序员,而也有的成为了项目经理.那是因为什么导致了这样的分化呢?今天小千就和大家分享一下Web前端开发应该避 ...
30个HTML+CSS前端开发案例（四）
30个HTML+CSS前端开发案例(17-20) 鼠标移入文字加载动画效果代码实现效果鼠标悬停缩放效果实现代码效果鼠标移入旋转动画实现代码效果 loding加载动画实现代码效果资 ...
前端开发常用案例（一）
前端开发常用案例 1.实现三角形百度热榜样式分页效果小米商城自动轮播图效果二级下拉菜单效果时间轴效果展示音乐排行榜效果鼠标移入文字加载动画鼠标悬停缩放效果 1.实现三角形 <! ...
前端开发自动生成html,专业前端开发人员推荐的几款CSS 3代码生成工具
本期的前端开发学习主题:关于几款CSS 3代码生成工具的了解学习.相信大家在学习web前端开发学习的过程中或多或少都会接触到一些关于网站前端开发的CSS 3代码生成工具,接下来的学习,将为大家简单说说 ...
前端图片点击按钮加载更多内容_前端开发规范
1.什么是规范? 规范不是标准,不是放之四海而皆准的,不同的项目中的代码规范是有可能有差异的,比如命名,有些项目规定html标签的id必须要以控件的缩写名作为前缀,如按钮的id名以"btn& ...
全心加入web前端开发，向上吧！
今天是正式自学web前端的第22天,辞职专心做web前端开发是自己在前几年职业生涯的一次重要决定,不管以后能发展多远,但至少现在还是坚定的,所以我一定不会放弃. 这是自己博客的第一篇文章,无关技术,无 ...

前端开发实现点击出现不断向上可变色心形的效果

前端开发实现点击出现不断向上可变色心形的效果相关推荐

最新文章

热门文章