我正在参与「兔了个兔」构思投稿大赛，详情请看：「兔了个兔」构思投稿大赛来袭
有些细节在码上掘金上没有处理好
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=”https://juejin.im/post/audio/%E7%A5%96%E6%B5%B7 – %E5%A5%BD%E8%BF%90%E6%9D%A5.flac” controls=”controls” autoplay=”autoplay”>< /audio>
在这里设置了用户能够运用浏览器默认控件的audio元素以及设置了autoplay自动播放。
结尾
关于之前开端CSS那一段代码有一个body{background}的代码是运用的一个突变色的款式。在许多页面都能够运用突变色这个款式，能够让你的页面布景看得愈加漂亮。网址如下：突变色
至此，这篇文章就到此结束了，希望大家能够多提点意见，发挥自己的见解。然后动动发财的小手帮我点点赞。
