用html宇宙动态特效代码源
时间: 2024-06-13 21:01:56 浏览: 71
HTML和CSS结合可以创建出各种动态特效,但请注意,为了保持简洁和易读性,这里我会提供一个基础的动态加载效果的例子,比如使用JavaScript和CSS3动画来实现。这是一个简单的"加载更多"的动画效果:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.loader {
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid blue;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
display: none;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.show-loader {
display: block;
}
</style>
</head>
<body>
<div id="content">内容区域...</div>
<div class="loader" id="loading">加载...</div>
<script>
function loadMore() {
// 假设这是加载更多数据的函数
// 当你需要加载更多时,可以调用这个函数
loadMoreData();
// 加载完成,隐藏加载器
document.getElementById('loading').classList.remove('show-loader');
}
function loadMoreData() {
// 这里只是一个示例,替换为实际的加载数据
setTimeout(() => {
// 假设新的内容添加到content区域
document.getElementById('content').innerHTML += '<p>新加载的内容...</p>';
// 显示加载完成
document.getElementById('loading').classList.add('show-loader');
}, 2000); // 模拟2秒加载时间
}
// 当页面滚动到底部时触发加载更多
window.addEventListener('scroll', () => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
loadMore();
}
});
</script>
</body>
</html>
```