blog/source/_posts/作品/特效/社会主义核心价值观.md

title	categories	keywords	tags	date
社会主义核心价值观	作品 特效	鼠标特效	JavaScript CSS	2022-08-30 10:31:35

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

{% raw %}

演示

{% endraw %}

源码

<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>