119 lines
3.4 KiB
Markdown
119 lines
3.4 KiB
Markdown
---
|
|
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>
|
|
```
|