如何在argon添加三角形浮动和雪花效果

只要在页头脚本和页尾脚本添加以下代码即可:

<div id="snow"></div>
<style>
    #snow {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: -1;
        pointer-events: none;
        transition: filter .5s ease;
    }
    html.darkmode #snow{
        filter: invert(0.3);
    }
</style>
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script>
      particlesJS('snow', {"particles":{"number":{"value":104,"density":{"enable":true,"value_area":800}},"color":{"value":"#fff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":true,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":10,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":false,"distance":500,"color":"#ffffff","opacity":0.4,"width":2},"move":{"enable":true,"speed":3,"direction":"bottom","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"bubble"},"onclick":{"enable":true,"mode":"repulse"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":0.5}},"bubble":{"distance":400,"size":4,"duration":0.3,"opacity":1,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});
</script>
<script>
    function addTriangles(ele, size, density, number, speed, color){
        if ($("> .triangles", ele).length){
            return;
        }
        let id = "T" + randomString(32);
        $(ele).append("<div class='triangles' id='" + id + "'>");
        particlesJS(id, {
            "particles": {
                "number": {
                    "value": number,
                    "density": {
                        "enable": true,
                        "value_area": density
                    }
                },
                "color": {
                    "value": color
                },
                "shape": {
                    "type": "triangle",
                    "stroke": {
                        "width": 0,
                        "color": "#000000"
                    },
                    "polygon": {
                        "nb_sides": 5
                    },
                    "image": {
                        "src": "img/github.svg",
                        "width": 100,
                        "height": 100
                    }
                },
                "opacity": {
                    "value": 0.22885281607335908,
                    "random": true,
                    "anim": {
                        "enable": false,
                        "speed": 1,
                        "opacity_min": 0.1,
                        "sync": false
                    }
                },
                "size": {
                    "value": size,
                    "random": true,
                    "anim": {
                        "enable": false,
                        "speed": 59.94005994005994,
                        "size_min": 0.1,
                        "sync": false
                    }
                },
                "line_linked": {
                    "enable": false,
                    "distance": 500,
                    "color": "#ffffff",
                    "opacity": 0.4,
                    "width": 2
                },
                "move": {
                    "enable": true,
                    "speed": speed,
                    "direction": "top",
                    "random": true,
                    "straight": true,
                    "out_mode": "out",
                    "bounce": false,
                    "attract": {
                        "enable": false,
                        "rotateX": 315.65905665290904,
                        "rotateY": 1200
                    }
                }
            },
            "interactivity": {
                "detect_on": "canvas",
                "events": {
                    "onhover": {
                        "enable": false,
                        "mode": "repulse"
                    },
                    "onclick": {
                        "enable": false,
                        "mode": "push"
                    },
                    "resize": true
                },
                "modes": {
                    "grab": {
                        "distance": 400,
                        "line_linked": {
                            "opacity": 0.5
                        }
                    },
                    "bubble": {
                        "distance": 400,
                        "size": 4,
                        "duration": 0.3,
                        "opacity": 1,
                        "speed": 3
                    },
                    "repulse": {
                        "distance": 200,
                        "duration": 0.4
                    },
                    "push": {
                        "particles_nb": 4
                    },
                    "remove": {
                        "particles_nb": 2
                    }
                }
            },
            "retina_detect": true
        });
    }
</script>
<script>
    function addTrianglesForPage(){
        addTriangles($(".leftbar-banner")[0], 100, 500, 200, 3, "#fff");
        addTriangles($("#footer")[0], 150, 700, 125, 3, "#fff");
        $(".btn.btn-primary, .btn.btn-danger").each(function(index, ele) {
            addTriangles(ele, 60, 25, 50, 2, "#fff")
        });
        $(".related-post-card").each(function(index, ele) {
            addTriangles(ele, 100, 500, 125, 3, "#fff");
        });
        $("#main > .card, #leftbar > .card").each(function(index, ele) {
            addTriangles(ele, 100, 500, 125, 3, "#999");
        });
        addTriangles($("#banner > .shape")[0], 205, 2840, 115, 4, "#fff")
    }
    addTrianglesForPage();
</script>
<style>
    .triangles{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        opacity: .4;
        pointer-events: none;
        overflow: hidden;
    }
    .leftbar-banner{
        position: relative;
    }
    .leftbar-banner .triangles{
        border-radius: var(--card-radius) var(--card-radius) 0 0;
    }
    #footer .triangles{
        border-radius: var(--card-radius);
    }
    main > .card > .triangles, #leftbar > .card > .triangles{
        -webkit-mask-image: linear-gradient(0deg, #fff 0%, transparent 100%);
        mask-image: linear-gradient(0deg, #fff 0%, transparent 100%);
        opacity: .2;
        top: calc(100% - 150px);
    }
    #banner > .shape > span{
        display: none;
    }
    #banner > .shape > .triangles{
        width: 100%;
        left: 0;
        right: 0;
        -webkit-mask-image: linear-gradient(180deg, #fff 0%, transparent 100%);
        mask-image: linear-gradient(180deg, #fff 0%, transparent 100%);
        opacity: .35;
    }
    .related-post-card-container.has-thumbnail ~ .triangles {
        display: none;
    }
</style>
<script>
    if (!$("#fabtn_blog_settings_popup > .blog-setting-triangles").length){
        $($("#fabtn_blog_settings_popup > .blog-setting-item")[0]).after('<div class="blog-setting-item mt-3 blog-setting-triangles"><div style="flex: 1;">三角形效果</div><div><button id="blog_setting_triangles_on" type="button" class="blog-setting-shadow btn btn-outline-primary blog-setting-selector-left">开启</button><button id="blog_setting_triangles_off" type="button" class="blog-setting-shadow btn btn-outline-primary blog-setting-selector-right">关闭</button></div></div>');
    }
	$("#blog_setting_triangles_on").on("click" , function(){
		$("html").removeClass("hide-triangles");
		localStorage['Argon_Hide_Triangles'] = "false";
        let event = document.createEvent("HTMLEvents");
        event.initEvent("resize", true, true);
        window.dispatchEvent(event);
	});
	$("#blog_setting_triangles_off").on("click" , function(){
		$("html").addClass("hide-triangles");
		localStorage['Argon_Hide_Triangles'] = "true";
	});
	if (localStorage['Argon_Hide_Triangles'] == "true"){
		$("html").addClass("hide-triangles");
	}else if (localStorage['Argon_Hide_Triangles'] == "false"){
		$("html").removeClass("hide-triangles");
	}
</script>
<style>
    html:not(.hide-triangles) #blog_setting_triangles_on{
        color: #fff;
        background: var(--themecolor);
    }
    html.hide-triangles #blog_setting_triangles_off{
        color: #fff;
        background: var(--themecolor);
    }
    html.hide-triangles .triangles{
        display: none;
    }
</style>
感谢您的阅读
本文链接:https://blog.bfh.ink/?p=230
本文为BFH-BLOG博主「黑果小屋」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

评论

  1. 黑果小屋 博主
    Android Chrome 88.0.4324.93
    4月前
    2021-6-05 12:26:15

    感觉加了之后效果会导致网站卡一些

  2. 夏雨
    Android Chrome 80.0.3987.99
    4月前
    2021-6-05 14:23:16

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇