html页面鼠标单击----------爱心特效

直接将以下代码复制到body的最下端即可。

<script type="text/javascript"> !function (e, t, a) {function r() {for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");requestAnimationFrame(r)}function n() {var t = "function" == typeof e.onclick && e.onclick;e.onclick = function (e) {t && t(), o(e)}}function o(e) {var a = t.createElement("div");a.className = "heart", s.push({el: a,x: e.clientX - 5,y: e.clientY - 5,scale: 1,alpha: 1,color: c()}), t.body.appendChild(a)}function i(e) {var a = t.createElement("style");a.type = "text/css";try {a.appendChild(t.createTextNode(e))} catch (t) {a.styleSheet.cssText = e}t.getElementsByTagName("head")[0].appendChild(a)}function c() {return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"}var s = [];e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {setTimeout(e, 1e3 / 60)}, i(".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: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(), r()}(window, document);</script>

点赞会鼓励作者发布更多作品哦～～～

html页面鼠标单击----------爱心特效相关推荐

【写在除夕前夕】我辗转许久，驻足良久，2023，新年快乐。【HTML鼠标跟随爱心特效】鼠标飞舞之处，爱亦生生不息。
2023.1.20,除夕前夕一.之前曾分享过的爱心code 二.爱心特效分享 2.1 "I love you 1314" 2.1 效果 2.2.2 代码(含存放逻辑) 2.2 鼠 ...
博客园美化（3）博客园鼠标点击特效代码
博客园鼠标点击特效代码样式效果鼠标点击出现烟花和"富强", "民主", "文明", "和谐"... 特效使用方法 ...
HTML/CSS/JS 鼠标特效二（鼠标点击WEB页面出现彩色爱心冒泡特效）
1.实际效果 [青树柠檬~旧事老酒] 2.示例代码 /*--鼠标点击特效,不同颜色桃心图案*/ <script type="text/javascript">!func ...
html鼠标特效怎么设置到桌面,用CSS实现鼠标单击特效
如果你能很好地应用CSS,那么你的主页将被打扮得很靓.下面就给大家介绍用CSS做出的一个鼠标单击特殊效果图. 1.将下面的代码复制到你的主页中和之间. 〈STYLE〉.shadow { FILTER: ...
鼠标点击网页出现爱心特效
像这样的鼠标点击网页出现js的特效,代码如下,只需要直接把这段代码复制到<script></script>标签下运行就可以实现了,要导入css和js: //鼠标点击出现爱心特效 ...
prototype鼠标指针_html5鼠标点击页面光标圆点动画特效
特效描述:html5 鼠标点击页面光标圆点动画特效.html5圆点动画,光标动画,鼠标点击页面事件. 代码结构 1. 引入JS 2. HTML代码点击任何地方看效果 'use strict'; v ...
爱心点击特效php代码,网页点击特效 - 鼠标点击浮现爱心特效
/*7Core-CN - 网页鼠标点击特效(爱心)*/ !function (e, t, a) {function r() {for (var e = 0; e < s.length; e++) ...
鼠标点击特效：点击网站页面显示24字核心价值观上升的特效代码
将以下代码直接写入html中即可(也可以去掉首尾,添加进js文件中,然后在html中包含这个文件) <script type="text/javascript"> /* ...
html5酷炫表白代码_七夕表白代码,樱花特效+爱心特效+花瓣+评论留言功能等
___2020/8/25七夕不是快到了嘛,寻思最近没啥活,于是闲暇时间扒一套JQuery代码,做了一下优化 ------- 超级好看的花瓣表白网页源码, ___然后通过gitee(码云)搭建了一套个人 ...

html页面鼠标单击----------爱心特效

点赞会鼓励作者发布更多作品哦～～～

html页面鼠标单击----------爱心特效相关推荐

最新文章

热门文章

html页面鼠标单击----------爱心特效

点赞 会鼓励作者发布 更多作品 哦～～～

html页面鼠标单击----------爱心特效相关推荐

最新文章

热门文章

点赞会鼓励作者发布更多作品哦～～～