---
title: 网页特效：社会主义核心价值观
date: 2022-08-30 10:31:35
keywords: [网页, 鼠标, 特效]
categories: [特效]
tags: [javascript, css, 特效]
sitemap: true
---

偶然见到某网页上的这个鼠标点击特效，就复刻了一个。

{% raw %}
<style>
    #demo {
        width: 100%;
        height: 600px;
        border: 1px solid gray;
        margin: 1rem 0;
        color: #ccc;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    #demo * { user-select: none; }
    slogan { position: absolute; }
</style>

<div id="demo">
    <h1>点击鼠标，让“社会主义核心价值观”飞翔!</h1>
</div>

<script>
    function randomIntegerBelow(n) {
        return Math.floor(Math.random() * n)
    }

    function makeSloganAt(x, y) {
        // 国家层面的价值目标 + 社会层面的价值取向 + 公民个人层面的价值准则
        const slogans = ['富强', '民主', '文明', '和谐', '自由', '平等',
                         '公正', '法治', '爱国', '敬业', '诚信', '友善']
        const index = randomIntegerBelow(slogans.length)
        const slogan = document.createElement('slogan')
        const color = randomIntegerBelow(360)
        let offset = 0
        slogan.innerText = slogans[index]
        slogan.style.left = `${x - 20}px`
        document.body.appendChild(slogan)
        function fly() {
            if (offset < 100) {
                slogan.style.top = `${y - offset - 20}px`
                slogan.style.color = `hsla(${color}, 100%, 50%, ${(100 - offset++) / 100})`
                setTimeout(fly, 10)
            } else slogan.parentNode.removeChild(slogan)
        }
        fly()
    }

    demo.addEventListener('click', (e) => {
        makeSloganAt(e.layerX, e.layerY)
    })
</script>
{% endraw %}

<!-- more -->

``` html
<style>
    #demo {
        width: 100%;
        height: 600px;
        border: 1px solid gray;
        margin: 1rem 0;
        color: #ccc;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    #demo * { user-select: none; }
    slogan { position: absolute; }
</style>

<div id="demo">
    <h1>点击鼠标，让“社会主义核心价值观”飞翔!</h1>
</div>

<script>
    function randomIntegerBelow(n) {
        return Math.floor(Math.random() * n)
    }

    function makeSloganAt(x, y) {
        // 国家层面的价值目标 + 社会层面的价值取向 + 公民个人层面的价值准则
        const slogans = ['富强', '民主', '文明', '和谐', '自由', '平等',
                         '公正', '法治', '爱国', '敬业', '诚信', '友善']
        const index = randomIntegerBelow(slogans.length)
        const slogan = document.createElement('slogan')
        const color = randomIntegerBelow(360)
        let offset = 0
        slogan.innerText = slogans[index]
        slogan.style.left = `${x - 20}px`
        document.body.appendChild(slogan)
        function fly() {
            if (offset < 100) {
                slogan.style.top = `${y - offset - 20}px`
                slogan.style.color = `hsla(${color}, 100%, 50%, ${(100 - offset++) / 100})`
                setTimeout(fly, 10)
            } else slogan.parentNode.removeChild(slogan)
        }
        fly()
    }

    demo.addEventListener('click', (e) => {
        makeSloganAt(e.layerX, e.layerY)
    })
</script>
```