WordPress 页面点击显不同颜色爱心

淩亂°似流年 2023-06-03 04:59 1阅读 0赞

在主题的页脚添加以下js即可实现

![1161017-20190930101242569-1794224501.png][]

<script type="text/javascript">
     
        /*
         * https://www.xianjieo.cn
         */
        !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>

转载于:https://www.cnblogs.com/QW-lzm/p/11611249.html

[1161017-20190930101242569-1794224501.png]: /images/20230601/e7c226ce59804dbcb45f7d13f7b114e1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML+VUE+element-ui通过点击不同按钮展现不同页面

完整源码可以私聊我，需要一点点费用~ 页面展示方案一 ![46e15756beaa4785b1cba3ac0b70430d.png][] 方案二 ![02b

喜欢ヅ旅行/ 2024年02月29日 06:52/ 0 赞/ 50 阅读

相关 vue 实现点击切换不同页面的两种方法

第一种 <template> <div class="nav-wrapper"> <div class="logo-wrapper">

亦凉/ 2023年07月09日 13:29/ 0 赞/ 30 阅读

相关 WordPress 页面点击显不同颜色爱心

在主题的页脚添加以下js即可实现 ![1161017-20190930101242569-1794224501.png][] <script type=

淩亂°似流年/ 2023年06月03日 04:59/ 0 赞/ 2 阅读

相关 vue class点击切换颜色

[https://www.cnblogs.com/zwnsyw/p/12333992.html][https_www.cnblogs.com_zwnsyw_p_12333992

妖狐艹你老母/ 2022年12月30日 03:56/ 0 赞/ 178 阅读

相关 jquery鼠标移动、点击页面出现爱心

爱心 1、css画一个爱心 .main{ width: 20px; position: fixed; } //

以你之姓@/ 2022年09月08日 00:08/ 0 赞/ 240 阅读

相关点击tabbar刷新页面

.h文件 import <UIKit/UIKit.h> @interface TabbarRootViewController : UITabBarCo

傷城~/ 2022年08月22日 13:26/ 0 赞/ 236 阅读

相关 Android 点击按钮时改变颜色

在按下按钮时，按钮颜色改变，当松开的时候，变回原来的颜色，使用户感觉到自己按了按钮。当很多按钮都需要这样的效果时就比较方便。首先，在res文件夹下新建一个文件夹dr

清疚/ 2022年07月26日 05:19/ 0 赞/ 329 阅读

相关 UICollectionView 修改点击后颜色

一般UICollectionView点击后会显示默认的透明色，希望修改为特定的颜色，最终发现是设置背景色的view设置错了，应该是：`[cell.contentView set

深藏阁楼爱情的钟/ 2022年05月14日 00:43/ 0 赞/ 340 阅读

相关 mui 点击底部菜单，显示不同的页面

效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N

素颜马尾好姑娘i/ 2022年04月17日 06:45/ 0 赞/ 285 阅读

相关鼠标点击特效·爱心❤和文字

> 爱心特效❤ <script type="text/javascript"> / 网页鼠标点击特效（爱心）/ !fu

末蓝、/ 2021年09月23日 16:30/ 0 赞/ 361 阅读