HTML5 Canvas 烟花动画效果
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas 烟花动画效果</title>
<meta name='description' content='这篇博客文章展示了如何使用 HTML5 Canvas 和 Anime.js 库创建一个简单而美丽的烟花动画效果，非常适合为您的网站增添节日气氛。'>
<meta name='keywords' content='HTML5, Canvas, JavaScript, 动画, 烟花, Anime.js, 网页设计, 前端开发, 节日效果'>
<style>
canvas {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
}
<pre><code>#sidebar {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 100%;
background-color: #f4f4f4;
border-right: 1px solid #ccc;
overflow-y: auto;
padding: 20px;
}
#toggle-sidebar {
position: absolute;
top: 10px;
right: -40px;
width: 30px;
height: 30px;
background-color: #f4f4f4;
border-radius: 50%;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
#toggle-sidebar:before {
content: '>';
font-size: 20px;
}
#chat-container {
padding-left: 320px;
padding-top: 20px;
}
.message {
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}
.message .sender {
font-weight: bold;
}
.message .content {
margin-top: 10px;
}
#input-container {
margin-top: 20px;
}
#input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
</code></pre>
</style>
</head>
<body>
<canvas id='canvas'></canvas>
<div id='sidebar'>
<h2>Chat History</h2>
<div id='chat-history'></div>
</div>
<div id='toggle-sidebar'></div>
<div id='chat-container'>
<div id='input-container'>
<input type='text' id='input' placeholder='Type your message...' />
</div>
</div>
<script src='index.js'></script>
<script>
var chatHistory = [];
function addMessage(sender, content) {
var messageElement = document.createElement('div');
messageElement.className = 'message';
messageElement.innerHTML = `
<div class='sender'>${sender}</div>
<div class='content'>${content}</div>
`;
document.getElementById('chat-history').appendChild(messageElement);
}
function sendMessage() {
var input = document.getElementById('input');
var message = input.value;
addMessage('You', message);
chatHistory.push(message);
input.value = '';
input.focus();
// Call GPT-3.5 Turbo API with chatHistory
// ...
}
document.getElementById('input').addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
sendMessage();
}
});
document.getElementById('toggle-sidebar').addEventListener('click', function() {
var sidebarElement = document.getElementById('sidebar');
sidebarElement.style.display = sidebarElement.style.display === 'none' ? 'block' : 'none';
});
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/FP8 著作权归作者所有。请勿转载和采集!