SC
/
index.html

<!DOCTYPE html>
<html lang=“zh-CN”>

<head>
    <meta charset="UTF-8" />
    <title>SC</title>
    <!-- 用iphone11测了下移动端效果, 发现没有viewport好看一点, 下面的树是完整的 -->
    <!-- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> -->
    <link rel="shortcut icon" href="style/img/keai.ico" />
    <!--jquery-->
    <script src="style/js/jquery.min.js"></script>
    <!-- css -->
    <link rel="stylesheet" href="style/css/music.css" />
    <link rel="stylesheet" href="style/css/cloudLabel.css" />
    <style type="text/css">
        html,
        body {
            margin: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
            cursor: none;
            /* 设置背景的渐变色 */
            background: linear-gradient(to bottom, #000000 0%, #5788fe 100%);
        }

        /* 为背景添加红色滤镜, 30s为周期的动画*/
        .filter {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: #fe5757;
            animation: colorChange 30s ease-in-out infinite;
            animation-fill-mode: both;
            mix-blend-mode: overlay;
        }
        /* 通过改变filter的opacity, 添加不同程度的红色 */
        @keyframes colorChange {
            0%,
            100% {
                opacity: 0;
            }
            50% {
                opacity: 0.9;
            }
        }
        /* 陆地背景图, */
        .landscape {
            position: absolute;
            bottom: 0px;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url("style/img/landspace.png");
            background-size: 1000px 250px;
            background-repeat: repeat-x;
            background-position: center bottom;
        }

        /* 红雪花颜色 */
        .maple {
            position: absolute;
            top: 0;
            color: hsl(350, 100%, 88%);
        }
    </style>\

    <!-- 图片+调用插件形成白色雪花 -->
    <script type="text/javascript" src="style/js/christmassnow.js"></script>
    <script>
        $(document).ready(function () {
            $("body").christmassnow({
                snowflaketype: 23, // 1 to 25 types of flakes are available change the number from 1 to 25. each one contain different images.
                snowflakesize: 2, //snowflakesize is 1 then it get the size of the image as random , if the snowflakesize is 2 means size of the image as custom
                snowflakedirection: 1, // 1 means default no wind (top to bottom), 2 means random, 3 means left to right and 4 means  right to left
                snownumberofflakes: 4, // number of flakes is user option
                snowflakespeed: 10, // falling speed of flake 10 sec is default
                flakeheightandwidth: 15, // if you are mention that option flakesize is 2 then this flakeheightandwidth should work values are in pixels 16*16.
            });
        });
    </script>

</head>

<body>

    <!-- 红色雪飘落 -->
    <div class="maplebg"></div>
    <script>
        var d = "<div class='maple'>❄<div>";
        setInterval(function () {
            var f = $(document).width();
            // Math.random() return a float number in [0, 1)
            var e = Math.random() * f - 300; // 雪花的定位left值
            var o = 0.2 + Math.random(); // 雪花的透明度
            var fon = 25 + Math.random() * 10; // 雪花大小
            var l = e - 100 + 200 * Math.random(); // 雪花的横向位移
            var k = 8000 + 5000 * Math.random();
            var deg = Math.random() * 360; // 雪花的方向
            // appendTo() https://www.w3school.com.cn/jquery/manipulation_appendto.asp
            // animate() https://www.w3school.com.cn/jquery/effect_animate.asp
            $(d)
                .clone()
                .appendTo(".maplebg")
                .css({
                    left: e + "px",
                    opacity: o,
                    transform: "rotate(" + deg + "deg)",
                    "font-size": fon,
                })
                .animate(
                    {
                        top: "550px",
                        left: l + "px",
                        opacity: 0.1,
                    },
                    k,
                    "linear",
                    function () {
                        $(this).remove();
                    }
                );
        }, 500);
    </script>

    <!-- 白雪花飘落 -->
    <div class="drop"></div>

    <!-- 星空背景 -->
    <div class="landscape"></div>
    <div class="filter"></div>
    <canvas id="canvas"></canvas>

    <!-- 播放器 -->
    <div id="app">
        <div class="container_player">
            <div class="music-box">
                <!-- <img src="images/avatar.jpg" /> -->
                <img src="style/img/01.jpg" />
                <div class="mask">
                    <div class="mplayer" onclick="play()">
                        <i class="fa">
                            <span class="before"></span>
                            <span class="after"> </span>
                        </i>
                        <svg class="loadingSvg" width="25" height="25" viewBox="0,0,50,50" style="
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                ">
                            <circle></circle>
                        </svg>
                    </div>
                    <div class="m-circle m-progress">
                        <svg width="163" height="163" viewBox="0,0,163,163">
                            <circle cx="81" cy="81" r="159" stroke-width="8" stroke="rgba(255, 206, 113, 0.2)"
                                fill="rgba(0,0,0,.2)"></circle>
                            <circle class="a" cx="81" cy="81" r="159" stroke-width="6" stroke="rgba(255, 206, 113, 1)"
                                fill="none" stroke-dasharray="0 999" transform="matrix(0,-1,1,0,0,163)"></circle>
                        </svg>
                    </div>
                    <div class="m_time">
                        <span class="mplayer_curtime">00:00</span>
                        <span class="m-join">/</span>
                        <span class="mplayer_durtime">00:00</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 音乐 -->
    <audio id="myAudio" src="style/mp3/luguorenjian.mp3" autoplay></audio>

    <!--music设定为自动播放, 然后当点击超链接时, 在新标签页打开并关闭主页的音乐播放, 不然太吵了-->
    <div id="tagsList">
        <!--高中-->
        <!--12wall + 豆浆油条-->
        <a href="module/ttdhy/index.html" target="_blank" onclick="pause()">嘘~我们来偷偷地合影</a>
        <!--bg+typing + 小酒窝-->
        <a href="module/ouyu/index.html" target="_blank" onclick="pause()">偶遇</a>
        <!--雪花圣诞 + mp3-->
        <a href="module/201512/index.html" target="_blank" onclick="pause()">2015年的最后一天</a>

        <!--2016-->
        <!--bg+typing + 北京东路的日子-->
        <a href="module/201606/index.html" target="_blank" onclick="pause()">我们高考啦</a>
        <!--many imgs + 有点甜-->
        <a href="module/201610/index.html" target="_blank" onclick="pause()">壹陆我拾忆</a>
        <!--bg+typing + 遇见你的时候所有星星都落到我头上-->
        <a href="module/201612/index.html" target="_blank" onclick="pause()">来约一场你的名字吧</a>

        <!--2017-->
        <!--飘雪 + 雪落下的声音-->
        <a href="module/201701/index.html" target="_blank" onclick="pause()">元旦of2017</a>
        <!--3D10 + 樱花草-->
        <a href="module/201704/index.html" target="_blank" onclick="pause()">壹柒过清明</a>
        <!--3D10 + 暖暖-->
        <a href="module/201705/index.html" target="_blank" onclick="pause()">壹柒的吾忆</a>

        <!--2018-->
        <!--321+风中落叶 + mp3-->
        <a href="module/201808/index.html" target="_blank" onclick="pause()">人在囧途</a>
        <!--many imgs + 时间煮雨-->
        <a href="module/201810/index.html" target="_blank" onclick="pause()">时间煮雨</a>

        <!--2019-->
        <!--saysomeing + 恋爱ing-->
        <a href="module/201904/index.html" target="_blank" onclick="pause()">固城湖水漫城</a>
        <!--bg+typing + 我多喜欢你你会知道-->
        <a href="module/201909/index.html" target="_blank" onclick="pause()">常州恐龙园</a>

        <!--2020-->
        <!--bg+typing + 想见你-->
        <a href="module/202007/index.html" target="_blank" onclick="pause()">下次苏州见</a>
        <!--荧光+白云 + 甜甜的-->
        <a href="module/202008/index.html" target="_blank" onclick="pause()">宜家&苏州</a>

        <!--2021-->
        <!--荧光+樱花 + 万有引力-->
        <a href="module/202105/index.html" target="_blank" onclick="pause()">园博园</a>

        <!--others-->
        <a href="module/HappyBirthday/index.html" target="_blank" onclick="pause()">HappyBirthday</a>
        <!-- <a href="module/longlongago/index.html" target="_blank" onclick="pause()" >long-long-ago</a> -->
    </div>
</body>

<!-- 利用canvse画向上运动的小星星, 和鼠标连线效果 -->
<script>
    // 天空中的小星星, 类与对象
    function Star(id, x, y) {
        this.id = id;
        this.x = x;
        this.y = y;
        this.r = Math.floor(Math.random() * 2) + 1;
        var alpha = (Math.floor(Math.random() * 10) + 1) / 10 / 2;
        this.color = "rgba(255,255,255," + alpha + ")";
    }

    // 利用原型对象可以给对象添加新的属性和方法
    Star.prototype.draw = function () {
        ctx.fillStyle = this.color;
        ctx.shadowBlur = this.r * 2;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
        ctx.closePath();
        ctx.fill();
    };

    Star.prototype.move = function () {
        this.y -= 0.15;
        if (this.y <= -10) this.y = HEIGHT + 10;
        this.draw();
    };

    Star.prototype.die = function () {
        stars[this.id] = null;
        delete stars[this.id];
    };

    function Dot(id, x, y, r) {
        this.id = id;
        this.x = x;
        this.y = y;
        this.r = Math.floor(Math.random() * 5) + 1;
        this.maxLinks = 2;
        this.speed = 0.5;
        this.a = 0.5;
        this.aReduction = 0.005;
        this.color = "rgba(255,255,255," + this.a + ")";
        this.linkColor = "rgba(255,255,255," + this.a / 4 + ")";

        this.dir = Math.floor(Math.random() * 140) + 200;
    }

    Dot.prototype.draw = function () {
        ctx.fillStyle = this.color;
        ctx.shadowBlur = this.r * 2;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
        ctx.closePath();
        ctx.fill();
    };

    Dot.prototype.link = function () {
        if (this.id == 0) return;
        var previousDot1 = getPreviousDot(this.id, 1);
        var previousDot2 = getPreviousDot(this.id, 2);
        var previousDot3 = getPreviousDot(this.id, 3);
        if (!previousDot1) return;
        ctx.strokeStyle = this.linkColor;
        ctx.moveTo(previousDot1.x, previousDot1.y);
        ctx.beginPath();
        ctx.lineTo(this.x, this.y);
        if (previousDot2 != false) ctx.lineTo(previousDot2.x, previousDot2.y);
        if (previousDot3 != false) ctx.lineTo(previousDot3.x, previousDot3.y);
        ctx.stroke();
        ctx.closePath();
    };

    function getPreviousDot(id, stepback) {
        if (id == 0 || id - stepback < 0) return false;
        if (typeof dots[id - stepback] != "undefined") return dots[id - stepback];
        else return false; //getPreviousDot(id - stepback);
    }

    Dot.prototype.move = function () {
        this.a -= this.aReduction;
        if (this.a <= 0) {
            this.die();
            return;
        }
        this.color = "rgba(255,255,255," + this.a + ")";
        this.linkColor = "rgba(255,255,255," + this.a / 4 + ")";
        (this.x = this.x + Math.cos(degToRad(this.dir)) * this.speed),
            (this.y = this.y + Math.sin(degToRad(this.dir)) * this.speed);

        this.draw();
        this.link();
    };

    Dot.prototype.die = function () {
        dots[this.id] = null;
        delete dots[this.id];
    };

    var canvas = document.getElementById("canvas"),
        ctx = canvas.getContext("2d"),
        WIDTH,
        HEIGHT,
        mouseMoving = false,
        mouseMoveChecker,
        mouseX,
        mouseY,
        stars = [],
        initStarsPopulation = 80,
        dots = [],
        dotsMinDist = 2,
        maxDistFromCursor = 50;

    setCanvasSize();
    init();

    function setCanvasSize() {
        (WIDTH = document.documentElement.clientWidth),
            (HEIGHT = document.documentElement.clientHeight);

        canvas.setAttribute("width", WIDTH);
        canvas.setAttribute("height", HEIGHT);
    }

    function init() {
        // 设置画笔颜色和阴影颜色
        ctx.strokeStyle = "white";
        ctx.shadowColor = "white";
        for (var i = 0; i < initStarsPopulation; i++) {
            stars[i] = new Star(
                i,
                Math.floor(Math.random() * WIDTH),
                Math.floor(Math.random() * HEIGHT)
            );
            stars[i].draw();
        }
        ctx.shadowBlur = 0;
        animate();
    }

    function animate() {
        ctx.clearRect(0, 0, WIDTH, HEIGHT);

        for (var i in stars) {
            stars[i].move();
        }
        for (var i in dots) {
            dots[i].move();
        }
        drawIfMouseMoving();
        requestAnimationFrame(animate);
    }

    window.onmousemove = function (e) {
        mouseMoving = true;
        mouseX = e.clientX;
        mouseY = e.clientY;
        clearInterval(mouseMoveChecker);
        mouseMoveChecker = setTimeout(function () {
            mouseMoving = false;
        }, 100);
    };

    function drawIfMouseMoving() {
        if (!mouseMoving) return;

        if (dots.length == 0) {
            dots[0] = new Dot(0, mouseX, mouseY);
            dots[0].draw();
            return;
        }

        var previousDot = getPreviousDot(dots.length, 1);
        var prevX = previousDot.x;
        var prevY = previousDot.y;

        var diffX = Math.abs(prevX - mouseX);
        var diffY = Math.abs(prevY - mouseY);

        if (diffX < dotsMinDist || diffY < dotsMinDist) return;

        var xVariation = Math.random() > 0.5 ? -1 : 1;
        xVariation =
            xVariation * Math.floor(Math.random() * maxDistFromCursor) + 1;
        var yVariation = Math.random() > 0.5 ? -1 : 1;
        yVariation =
            yVariation * Math.floor(Math.random() * maxDistFromCursor) + 1;
        dots[dots.length] = new Dot(
            dots.length,
            mouseX + xVariation,
            mouseY + yVariation
        );
        dots[dots.length - 1].draw();
        dots[dots.length - 1].link();
    }

    function degToRad(deg) {
        return deg * (Math.PI / 180);
    }
</script>

<script src="style/js/music.js"></script>
<script src="style/js/cloudLabel.js"></script>

</html>