我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛来袭
有些细节在码上掘金上没有处理好😂😂😂😂
GitHub网址如下：GitHub
开篇
刚开始并没有想到设计一个烟花绽放并且可以输入祝福语的小网页，后面想到春节不是放烟花嘛，所以就在思考可以做一个怎样的烟花绽放的页面。
First
HTML
首先，在HTML中添加一个元素来显示烟花绽放动画，另外在添加一个元素来显示兔年祝福语
< div id="fireworks">< /div>
< div id="message">< /div>
CSS
然后使用css来美化这个动画，例如可以调整烟花绽放的大小，祝福语的字体大小和颜色等等。
body {
background: #8A2387;
background: -webkit-linear-gradient(to right, #F27121, #E94057, #8A2387);
background: linear-gradient(to right, #F27121, #E94057, #8A2387);
}
#fireworks {
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
}
#message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3em;
color: #fff;
text-shadow: 3px 3px #000;
}
JavaScript
我们要制作烟花动画，我们首先要下载并引用Particles.js库。然后使用JavaScript调用Particles.js库中的ParticlesJS()函数来初始化烟花绽放动画。
Ps:Particles.js库的地址如下：particles.js
const messages = ["兔年快乐", "吉祥如意", "祝你鸿运当头"];
let messageIndex = 0;
const messageElement = document.getElementById("message");
const inputElement = document.getElementById("new-message");
const submitButton = document.getElementById("submit-button");
submitButton.addEventListener("click", function () {
messageElement.innerText = inputElement.value;
});
if (localStorage.getItem("storedMessage")) {
messageElement.innerText = localStorage.getItem("storedMessage");
}
submitButton.addEventListener("click", function () {
messageElement.innerText = inputElement.value;
// Store the message in local storage
localStorage.setItem("storedMessage", inputElement.value);
});
particlesJS("fireworks", {
particles: {
number: {
value: 450,
},
color: {
value: "#ff0000",
},
shape: {
type: "circle",
},
opacity: {
value: 1,
random: true,
anim: {
enable: true,
speed: 1,
opacity_min: 0.1,
sync: false,
},
},
size: {
value: 3,
random: true,
anim: {
enable: false,
speed: 40,
size_min: 0.1,
sync: false,
},
},
line_linked: {
enable: false,
},
move: {
enable: true,
speed: 2,
direction: "top",
random: true,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200,
},
},
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: false,
},
onclick: {
enable: false,
},
resize: true,
},
},
retina_detect: true,
});
最后，使用JavaScript定时器来轮流显示兔年祝福语。
function updateMessage() {
messageElement.innerText = messages[messageIndex];
messageIndex = (messageIndex + 1) % messages.length;
}
setInterval(updateMessage, 3000);
上述代码简单的写出了一个烟花绽放并且轮流显示兔年祝福语的页面了。
Second
在上面基础的动画上，我们接下来便是美化这个动画了✌✌✌✌
第一
我们可以添加一个输入框和按钮来修改添加祝福语
< div id="message">
< /div>
< div>
< input type="text" id="new-message">
< button id="submit-button">提交< /button>
< /div>
然后使用JavaScript来处理用户输入并修改祝福语
const messageElement = document.getElementById("message");
const inputElement = document.getElementById("new-message");
const submitButton = document.getElementById("submit-button");
submitButton.addEventListener("click", function() {
messageElement.innerText = inputElement.value;
});
第二
接下来，我们可以使用本地存储将用户输入的祝福语保存在浏览器中，并在用户下次访问页面时读取并显示。
const messageElement = document.getElementById("message");
const inputElement = document.getElementById("new-message");
const submitButton = document.getElementById("submit-button");
// Check if there is a stored message
if (localStorage.getItem("storedMessage")) {
messageElement.innerText = localStorage.getItem("storedMessage");
}
submitButton.addEventListener("click", function() {
messageElement.innerText = inputElement.value;
// Store the message in local storage
localStorage.setItem("storedMessage", inputElement.value);
});
第三
然后我们对于输入框也可以进行美化。例如：
设置输入框的样式，如字体大小、字体颜色、背景颜色、边框等。
input[type="text"] {
font-size: 20px;
color: #fff;
background-color: #333;
border: none;
padding: 10px;
border-radius: 5px;
box-shadow: 0px 0px 10px #888;
width:80%;
margin-left: 10%;
}
然后可以设置输入框的hover和focus样式，如改变背景颜色和边框颜色。
input[type="text"]:hover,
input[type="text"]:focus {
background-color: #555;
border-color: #ddd;
outline: none;
}
另外，我们可以使输入框在获得焦点时有一个渐变的背景色并且扩大边框。
input[type="text"] {
background: #fff;
transition: background 0.5s ease;
}
input[type="text"]:focus {
background: #f1f1f1;
}
input[type="text"] {
border: 2px solid #ccc;
transition: border 0.5s ease;
}
input[type="text"]:focus {
border: 2px solid #555;
outline: none;
animation: expand 0.5s ease-in-out;
}
最后
我还添加了一段《好运来》的音频，毕竟是春节来了嘛，所以就简单的弄了一下。
< audio src="./audio/祖海 - 好运来.flac" controls="controls" autoplay="autoplay">< /audio>
在这里设置了用户可以使用浏览器默认控件的audio元素以及设置了autoplay自动播放。
结尾
关于之前开始CSS那一段代码有一个body{background}的代码是使用的一个渐变色的样式。在许多页面都可以使用渐变色这个样式，可以让你的页面背景看得更加美观。网址如下：渐变色
至此，这篇文章就到此结束了，希望大家能够多提点意见，发挥自己的见解。然后动动发财的小手帮我点点赞。
