我正在制作一个个人作品集,希望将我的网站标语显示为3秒(全屏),然后淡出以显示实际的网站。什么代码用于显示一些初始div然后淡出到实际的网站?加载页面显示三秒钟
回答
这个工程,与setTimeout()
。在3000毫秒后,我们将类hidden
添加到“加载元素”,将隐藏它。您可以自定义类以实现其他类型的动画。例如,现在动画设置为运行500毫秒。
setTimeout(function() {
$('#loading').addClass('hidden');
}, 3000);
#loading{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: gray;
color: white;
opacity: 1;
transition: 0.5s;
visibility: visible;
}
#loading.hidden{
opacity: 0;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="loading">Loading site...</div>
<div id="site">
<h1>My site</h1>
<p>Lorem ipsum</p>
</div>
如果你喜欢常规的JavaScript,你可以做这样的:
setTimeout(function() {
var element = document.getElementById('loading');
element.classList += " hidden";
}, 3000);
它工作得很好,但你怎么能实际淡出过渡?对不起,我是新来的编码。 –
@DanielSushik我更新了 –
在你的HTML文档的底部,加一个固定的div:
<div class="fixed">Tagline...</div>
然后使其固定并用CSS填充100%:
.fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
因此,现在您已将标语元素置于其他所有元素之上。你需要做的最后一件事是在3秒后淡出那个元素。这可以很容易地使用jQuery来实现,例如:
setTimeout(function() {
jQuery('.fixed').fadeOut();
}, 3000);
这一切都需要
这会立即淡出 –
哦,是的,让我解决这个问题 – dejakob
我使用CSS3关键帧/动画做了一个只有CSS版本。
HTML:
<div id="websiteOverlay">
"Some tagline"
</div>
<div class="container">
<h1>
Website content header
</h1>
<p>
Website content body, with some paragraphs
</p>
</div>
CSS:
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#websiteOverlay {
text-align: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
color: white;
opacity: 0;
-webkit-animation: fadeOut 3s;
animation: fadeOut 3s;
}
- 1. 页面加载后几秒钟显示块
- 2. 页面加载2秒后显示div
- 3. 问题 - queryloader2加载页面前1秒显示的页面
- 4. 加载谷歌分析JavaScript页面加载后几秒钟
- 5. 显示几秒钟的消息,然后重新加载该页面
- 6. 如何在页面加载后10秒钟显示一个弹出窗口?
- 7. jQuery ajax加载 - 显示加载图像一分钟。 1秒
- 8. 显示在页面加载
- 9. 显示加载微调页面加载
- 10. 显示加载页面加载GIF - iframe?
- 11. 如何在页面加载5秒后显示Colorbox?
- 12. 页面加载时隐藏div,几秒后显示相同
- 13. 如何显示加载页面的一些n秒
- 14. 在Ruby on Rails中显示AJAX页面的'加载时间'秒
- 15. 在页面加载后显示div 2秒
- 16. 预加载等待3秒钟打开页面
- 17. 页面停顿几秒钟,然后正常加载
- 18. css3淡入在页面加载,在几秒钟后排除
- 19. 显示页面几秒钟,然后导航到另一个页面
- 20. 加载页面时显示加载动画微调器页面
- 21. 从页面加载后几秒钟内就从外部域加载javascripts
- 22. 显示图像几秒钟
- 23. 5秒钟后加载
- 24. 加载图像每秒钟
- 25. 在ios 3秒钟登录后显示加载视图
- 26. 只显示分钟和秒钟0
- 27. Cefsharp - 显示页面加载指示
- 28. jQuery,仅当页面加载时间超过2秒才显示加载页面div
- 29. 添加分钟和秒钟。以小时显示
- 30. 加载页面等待一秒钟,然后使用下载文件笨V2
检查的setTimeout或CSS过渡和动画 – brk
您可以发布您的代码和标签要淡出呢? – DanD
你到目前为止尝试过哪些代码? –