开篇(请大家看完):此网站写给挚爱,后续页面还会慢慢更新,大家敬请期待~ ~ ~
此前端框架,主要侧重于前端页面的视觉效果和交互体验。通过运用各种前端技术和创意,精心打造了一系列引人入胜的页面特效,会为大家带来全新的浏览体验。
同时,我非常支持和鼓励大家对这个框架进行二次创作或修改。您可以根据自己的需求和喜好,对框架进行个性化的定制和扩展,以打造出更符合自己品味的页面效果。
但请注意,如果您打算将这个框架转发给其他人或用于其他场合,请务必注明原创来源。让我们一起维护一个良好的创作环境。
最后,轻舟会继续更新和完善这个前端页面特效框架,为大家带来更多有趣、实用的功能和效果。感谢您的支持和关注!
页面效果:多种颜色搭配的动态粒子背景特效(粒子会随着鼠标的移动进行吸附,好看又好玩),左右摆动的文字特效,记事本的内容也可以长期的保存在浏览器中
一:留言板.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>私人留言板</title>
<link rel="stylesheet" href="CSS/留言板.css">
</head>
<body>
<h1>专属记事薄</h1>
<div class="container">
<form id="messageForm">
<textarea id="messageInput" placeholder="请输入你的留言..." style="color: #dc6515"></textarea>
<button type="submit">提交留言</button>
<button id="submitButton">显示留言</button>
</form>
<div id="messages">
<!-- 留言 -->
</div>
</div>
<script src="JS/留言板.js"></script>
<script>
!(function () {
function n(n, e, t) {
return n.getAttribute(e) || t;
}
function e(n) {
return document.getElementsByTagName(n);
}
function t() {
var t = e("script"),
o = t.length,
i = t[o - 1];
return {
l: o,
z: n(i, "zIndex", -1),
o: n(i, "opacity", 0.6),
c: n(i, "color", "0,255,0"), // 默认粒子颜色(现在将在代码中忽略)
n: n(i, "count", 400), // 粒子的数量
};
}
function o() {
(a = m.width =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth),
(c = m.height =
window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight);
}
function i() {
r.clearRect(0, 0, a, c);
var n, e, t, o, m, l;
s.forEach(function (particle, index) {
for (
particle.x += particle.xa,
particle.y += particle.ya,
particle.xa *= particle.x > a || particle.x < 0 ? -1 : 1,
particle.ya *= particle.y > c || particle.y < 0 ? -1 : 1,
// 使用粒子的颜色属性进行绘制
r.fillStyle = particle.color,
r.fillRect(particle.x - 0.5, particle.y - 0.5, 1, 1),
e = index + 1;
e < u.length;
e++
) {
(n = u[e]),
null !== n.x &&
null !== n.y &&
((o = particle.x - n.x),
(m = particle.y - n.y),
(l = o * o + m * m),
l < n.max &&
(n === y &&
l >= n.max / 2 &&
((particle.x -= 0.03 * o), (particle.y -= 0.03 * m)),
(t = (n.max - l) / n.max),
r.beginPath(),
(r.lineWidth = t / 2),
// 连线颜色也可以设置为随机,这里暂时保持和粒子颜色一致
r.strokeStyle = particle.color,
r.moveTo(particle.x, particle.y),
r.lineTo(n.x, n.y),
r.stroke()));
}
}),
x(i);
}
var fixedColors = [
"rgba(255, 0, 0, 1.0)", // 红色
"rgba(0, 255, 0, 1.0)", // 绿色
"rgba(0, 0, 255, 1.0)", // 蓝色
"rgba(255, 255, 0, 1.0)", // 黄色
"rgba(0, 255, 255, 0.8)", // 青色
"rgba(255, 0, 255, 0.8)", // 紫色
"rgba(255, 165, 0, 0.8)", // 橙色
"rgba(127, 255, 212, 1.0)",
"rgba(0, 255, 127, 1.0)"
];
var a,
c,
u,
m = document.createElement("canvas"),
d = t(),
l = "c_n" + d.l,
r = m.getContext("2d"),
x =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (n) {
window.setTimeout(n, 1e3 / 45);
},
w = Math.random,
y = { x: null, y: null, max: 2e4 };
(m.id = l),
(m.style.cssText =
"position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o),
e("body")[0].appendChild(m),
o(),
(window.onresize = o),
(window.onmousemove = function (n) {
(n = n || window.event), (y.x = n.clientX), (y.y = n.clientY);
}),
(window.onmouseout = function () {
(y.x = null), (y.y = null);
});
//固定颜色
for (var s = [], f = 0; d.n > f; f++) {
var h = w() * a,
g = w() * c,
v = 2 * w() - 1,
p = 2 * w() - 1,
// 从固定颜色数组中随机选择一个颜色
color = fixedColors[Math.floor(Math.random() * fixedColors.length)];
s.push({ x: h, y: g, xa: v, ya: p, max: 6e3, color: color }); // 使用选定的固定颜色
}
(u = s.concat([y])),
setTimeout(function () {
i();
}, 100);
})();
</script>
</body>
</html>
二:留言板.css
body {
font-family: Arial, sans-serif;
text-align: center; /* 使body内的内容水平居中 */
display: flex;
flex-direction: column; /* 垂直布局 */
align-items: center; /* 垂直居中(对于单行内容) */
margin: 0;
padding-top: 50px; /* 根据需要调整h1与顶部的距离 */
}
.container {
max-width: 600px; /* 限制留言板容器的最大宽度 */
width: 100%; /* 响应式宽度 */
text-align: left; /* 重置文本对齐方式,如果需要的话 */
}
textarea {
width: 100%;
height: 100px;
margin-bottom: 10px;
font-weight: bold;
}
#messages {
margin-top: 60px; /*边框线宽度*/
}
#messageForm textarea {
width: 100%; /*边框宽度*/
height: 100px; /*边框高度*/
margin-bottom: 10px; /*按钮与边框的垂直距离*/
}
.message {
background-color: #f4f4f4; /*删除栏的颜色*/
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
}
.delete-button {
float: right;
cursor: pointer;
color: red;
background-color: #f0adad; /* 添加背景色 */
border: none; /* 移除边框 */
padding: 5px 10px; /* 添加内边距 */
border-radius: 5px; /* 圆角 */
margin-left: 10px; /* 与文本内容间隔 */
}
.delete-button:hover { /* 鼠标悬停效果 */
background-color: #e09dad;
}
h1 {
font-size: 48px;
font-weight: 600;
animation: rotate 0.3s ease infinite;
width: fit-content; /* 确保h1的宽度适应其内容 */
margin-bottom: 20px; /* 增加h1与留言板内容之间的垂直间距 */
}
@keyframes rotate {
0% {
transform: rotate(0);
}
20% {
transform: rotate(-2deg);
}
60% {
transform: rotate(0);
}
80% {
transform: rotate(2deg);
}
100% {
transform: rotate(0);
}
}
三:留言板.js
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('messageForm');
const messageInput = document.getElementById('messageInput');
const messagesContainer = document.getElementById('messages');
const submitButton = document.getElementById('submitButton');
submitButton.addEventListener('click', function() {
loadMessages(); // 直接调用loadMessages来重新加载并显示留言
});
// 从localStorage加载留言
loadMessages();
form.addEventListener('submit', function(e) {
e.preventDefault(); // 阻止表单默认提交行为
const messageText = messageInput.value.trim();
if (messageText) {
// 将留言保存到localStorage并显示在页面上
saveMessage(messageText);
messageInput.value = ''; // 清空输入框
}
// else {
// alert('请输入留言内容!');
// }
});
function saveMessage(messageText) {
const messages = JSON.parse(localStorage.getItem('messages')) || [];
const newMessage = { text: messageText, timestamp: Date.now() };
messages.push(newMessage);
localStorage.setItem('messages', JSON.stringify(messages));
displayMessages();
}
function loadMessages() {
const savedMessages = JSON.parse(localStorage.getItem('messages'));
if (savedMessages) {
displayMessages(savedMessages);
}
}
function displayMessages(loadedMessages = []) {
messagesContainer.innerHTML = ''; // 清空留言容器
loadedMessages.forEach(function(message) {
const messageElem = document.createElement('div');
messageElem.classList.add('message');
const textElem = document.createElement('span');
textElem.textContent = new Date(message.timestamp).toLocaleString() + ': ' + message.text;
messageElem.appendChild(textElem);
const deleteButton = document.createElement('button');
deleteButton.textContent = '删除';
deleteButton.classList.add('delete-button'); // 使用正确的类名
deleteButton.addEventListener('click', function() {
removeMessage(message.timestamp);
});
messageElem.appendChild(deleteButton);
messagesContainer.appendChild(messageElem);
});
}
function removeMessage(timestamp) {
const messages = JSON.parse(localStorage.getItem('messages')) || [];
const filteredMessages = messages.filter(msg => msg.timestamp !== timestamp);
localStorage.setItem('messages', JSON.stringify(filteredMessages));
displayMessages(filteredMessages); // 重新渲染留言列表
}
});
注意: 本页面就到这里啦~ ~ ~源码复制粘贴直接可用,期待一下下一个页面功能叭