73 lines
1.6 KiB
HTML
73 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>社会主义核心价值观</title>
|
|
<style>
|
|
body,html{
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
span {
|
|
transition: all 1s cubic-bezier(1, 0.18, 0.46, 0.99) 0s;
|
|
position: fixed;
|
|
font-size: 20px;
|
|
user-select:none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
|
|
</body>
|
|
|
|
<script>
|
|
|
|
var body = document.querySelector("body"), i = -1;
|
|
body.onclick = function (e) {
|
|
|
|
var TextArray = ["富强","民主", "文明", "和谐","自由", "平等", "公正","法治", "爱国", "敬业","诚信", "友善"];
|
|
i++
|
|
if (i > TextArray.length-1) {
|
|
i = 0
|
|
}
|
|
|
|
var x = e.offsetX, y = e.offsetY, move = y - 30;
|
|
var span = document.createElement("span");
|
|
|
|
span.innerText = TextArray[i];
|
|
|
|
var colors = Math.round(Math.random()*360);
|
|
|
|
|
|
span.style.cssText = `
|
|
left: ${x}px;
|
|
top: ${move}px;
|
|
opacity: 1;
|
|
color: hsla(${colors},100%,50%,1);
|
|
`;
|
|
|
|
body.appendChild(span)
|
|
|
|
setTimeout(function(){
|
|
span.style.cssText = `
|
|
left: ${x}px;
|
|
top: ${move - 150}px;
|
|
opacity: 0;
|
|
color: hsla(${colors},100%,50%,1);
|
|
`;
|
|
}, 200)
|
|
|
|
setTimeout(function(){
|
|
body.removeChild(span)
|
|
}, 1300)
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
</html> |