博客首页特效整理

---

烟花特效

<script src="https://blog-static.cnblogs.com/files/zouwangblog/mouse-click.js"></script>

---

爱国特效

<script src="https://blog-static.cnblogs.com/files/zengcongcong/click.js"></script>

---

背景流星特效

css部分

 body{
            width: 1000px;
            height: 1000px;
            background-color: skyblue;
        }
        .star {
            display: block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #FFF;
            top: 100px;
            left: 500px;
            position: relative;
            transform-origin: 100% 0;
            animation: star-ani 4s linear infinite;
            -webkit-animation: star-ani 5s linear infinite;
            box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
            opacity: 0;
            z-index: 2;
        }

        .star:after {
            content: '';
            display: block;
            top: 0px;
            left: 4px;
            border: 0px solid #fff;
            border-width: 0px 90px 2px 90px;
            border-color: transparent transparent transparent rgba(255, 255, 255, .3);
            transform: rotate(-45deg) translate3d(1px, 3px, 0);
            box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
            transform-origin: 0% 100%;
        }

        .pink {
            top: 100px;
            left: 800px;
            background: #fff;
            animation-delay: 3s;
            -webkit-animation-delay: 3s;
            -moz-animation-delay: 3s;
        }

        .pink:after {
            border-color: transparent transparent transparent #fff;
            animation-delay: 3s;
            -webkit-animation-delay: 3s;
            -moz-animation-delay: 3s;
        }

        .blue {
            top: 120px;
            left: 1200px;
            background: fff;
            animation-delay: 7s;
            -webkit-animation-delay: 7s;
            -moz-animation-delay: 7s;
        }

        .blue:after {
            border-color: transparent transparent transparent fff;
            -webkit-animation-delay: 7s;
            -moz-animation-delay: 7s;
            animation-delay: 7s;
        }

        @keyframes star-ani {
            0% {
                opacity: 0;
                transform: scale(0) translate3d(0, 0, 0);
            }
            20% {
                opacity: 0.8;
                transform: scale(0.2) translate3d(-100px, 100px, 0);
            }
            40% {
                opacity: 0.8;
                transform: scale(0.4) translate3d(-200px, 200px, 0);
            }
            60% {
                opacity: 0.8;
                transform: scale(0.6) translate3d(-300px, 300px, 0);
            }
            80% {
                opacity: 1;
                transform: scale(1) translate3d(-350px, 350px, 0);
            }
            100% {
                opacity: 1;
                transform: scale(1.2) translate3d(-400px, 380px, 0);
            }
        }

html部分

    <div class="star"></div>
    <div class="star pink"></div>
    <div class="star blue"></div>

---

鼠标样式（css）

body{
    background-image: url("https://img2018.cnblogs.com/blog/1358881/201909/1358881-20190910100015098-837598352.jpg");
    background-repeat: repeat;
    background-attachment: fixed;
    background-size:cover;
    cursor: url(https://files.cnblogs.com/files/wkfvawl/cursor.ico),auto;
}