从页面的其余部分隔离CSS动画
有一个CSS加载动画工作,我很高兴。有一点问题,想知道是否有人知道解决方案。从页面的其余部分隔离CSS动画
这是动画是如何工作目前:http://www.wilsonschlamme.com/animation.html
我想黑掉整个内容,第二个动画已达到最大规模,黑屏消失。所以加载后整个页面将是黑色的,除了动画当然。一旦动画达到最大尺寸,就会出现所有内容。
对此有何看法?真的很感激任何事情。玩这个,只需要完善一些东西。谢谢。
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="en">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="animation.css">
<link rel="stylesheet" type="text/css"
href="http://fonts.googleapis.com/css?family=Dorsa" <script
type="text/javascript">
</script>
<script
src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>
<meta http-equiv="refresh" content="270"/>
<!--time and date-->
<div id="timeandate">
<script>
function makeArray() {
for (i = 0; i<makeArray.arguments.length; i++)
this[i + 1] = makeArray.arguments[i];
}
var months = new makeArray('January','February','March','April','May',
'June','July','August','September','October','November','December');
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(day + " " + months[month] + " " + year);
window.onload = function() {
DisplayCurrentTime();
};
function DisplayCurrentTime() {
var date = new Date();
var hours = date.getHours() > 12 ? date.getHours() - 12 :
date.getHours();
var am_pm = date.getHours() >= 12 ? "PM" : "AM";
hours = hours < 10 ? "0" + hours : hours;
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() :
date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() :
date.getSeconds();
time = hours + ":" + minutes + ":" + seconds + " " + am_pm;
var lblTime = document.getElementById("lblTime");
lblTime.innerHTML = time;
};
<!--thisisanimation-->
jQuery(document).ready(function($) {
function timer() {
setTimeout(endAnim, 1000);
}
timer();
function restartAnim() {
$('.loader-icon').removeClass('shrinking-cog').addClass('spinning-cog');
$('.loader-background').addClass('color-flip');
timer();
$('.switches').show();
}
function endAnim() {
$('.loader-icon').removeClass('spinning-cog').addClass('shrinking-cog');
$('.loader-background').removeClass('color-flip');
$('.again').delay(100).fadeIn('slow');
$('.switches').fadeOut('slow');
}
$('.again').on('click', function(e) {
e.preventDefault();
restartAnim();
});
$('.switch').on('click', function(e) {
var trigger = $(this);
if (!trigger.hasClass('active')) {
$('#loader').find('.loader-icon').addClass('hidden').filter('[data-cog*="'
+ trigger.data('trigger') + '"]').removeClass('hidden');
trigger.addClass('active').siblings('.active').removeClass('active');
}
e.preventDefault();
});
});
</script>
<div id="loader" class="overlay-loader">
<div class="loader-background color-flip">
</div>
<img class="loader-icon spinning-cog"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog01.svg" data-cog="cog01">
<img class="loader-icon spinning-cog hidden"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog02.svg" data-cog="cog02">
<img class="loader-icon spinning-cog hidden"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog03.svg" data-cog="cog03">
<img class="loader-icon spinning-cog hidden"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog04.svg" data-cog="cog04">
<img class="loader-icon spinning-cog hidden"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog05.svg" data-cog="cog05">
<img class="loader-icon spinning-cog hidden"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog06.svg" data-cog="cog06">
<img class="loader-icon spinning-cog hidden"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog07.svg" data-cog="cog07">
<img class="loader-icon spinning-cog hidden"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog08.svg" data-cog="cog08">
<img class="loader-icon spinning-cog hidden"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog09.svg" data-cog="cog09">
<img class="loader-icon spinning-cog hidden"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog10.svg" data-cog="cog10">
<img class="loader-icon spinning-cog hidden"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog11.svg" data-cog="cog11">
<img class="loader-icon spinning-cog hidden"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog12.svg" data-cog="cog12">
<img class="loader-icon spinning-cog hidden"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog13.svg" data-cog="cog13">
<img class="loader-icon spinning-cog hidden"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog14.svg" data-cog="cog14">
<img class="loader-icon spinning-cog hidden"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog15.svg" data-cog="cog15">
<img class="loader-icon spinning-cog hidden"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog16.svg" data-cog="cog16">
<img class="loader-icon spinning-cog hidden"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog17.svg" data-cog="cog17">
<img class="loader-icon spinning-cog hidden"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog18.svg" data-cog="cog18">
<img class="loader-icon spinning-cog hidden"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog19.svg" data-cog="cog19">
<img class="loader-icon spinning-cog hidden"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog20.svg" data-cog="cog20">
<img class="loader-icon spinning-cog hidden"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog21.svg" data-cog="cog21">
<img class="loader-icon spinning-cog hidden"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog22.svg" data-cog="cog22">
<img class="loader-icon spinning-cog hidden"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog23.svg" data-cog="cog23">
<img class="loader-icon spinning-cog hidden"
src="http://pasqualevitiello.github.io/Tumblr-Style-Cog-
Spinners/cogs/cog24.svg" data-cog="cog24">
</div>
<div class="spacer1">
</div>
<div class="spacer1">
</div>
<p>
hi I should vanish and come back after animation!!!!
</p>
</html>
CSS
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
font-size: 100%;
font-family: "Courier New", Courier, monospace;
font-weight: 900;
}
h1{
color: white;
overflow:hidden; /* older browsers */
}
.font1{
font-family: 'Dorsa';
letter-spacing: 1px;
top: 10px;
display:block;
position: absolute;
left: 5px;
width: 100%; /*makes the element 100%, to center it. */
}
img {
border-color: grey;
border-style: solid;
border-width: 1px;
}
#timeandate {
margin-top: 90px;
}
#timeandate2 {
position: relative;
margin-left: 5px;
}
#weather1 {
position: absolute; /*makes it relative to the html element, (the first
positioned element).*/
width: 100%; /*makes the element 100%, to center it. */
top: 1700px;
right: -200px;
border-color: grey;
}
#weather2 {
position: absolute; /*makes it relative to the html element, (the first
positioned element).*/
width: 100%; /*makes the element 100%, to center it. */
top: 1700px;
left: -150px;
border-color: grey;
border-weight: 2px;
}
#ShowText1{
position: relative;
overflow:hidden; /* older browsers */
word-wrap: break-word;
padding-top: 100px;
max-width: 1000px;
font-size: 16px;
top: 250px;
line-height: 45px;
margin: 0 auto;
font-family: "Courier New", Courier, monospace;
}
.spacer1 {
margin-top:20px;
}
.overlay-loader .loader-icon {
position: absolute;
top: 20%;
left: 43%;
z-index: 6;
color: #42f498;
}
.overlay-loader .loader-icon.spinning-cog {
-webkit-animation: spinning-cog 1.3s infinite ease;
-moz-animation: spinning-cog 1.3s infinite ease;
-ms-animation: spinning-cog 1.3s infinite ease;
-o-animation: spinning-cog 1.3s infinite ease;
animation: spinning-cog 1.3s infinite ease;
background-color: #42f498;
}
@-webkit-keyframes spinning-cog {
0% { -webkit-transform: rotate(0deg) scale(3)}
20% { -webkit-transform: rotate(-45deg) scale(3)}
100% { -webkit-transform: rotate(360deg) scale(3)}
}
@-moz-keyframes spinning-cog {
0% { -moz-transform: rotate(0deg) scale(3)}
20% { -moz-transform: rotate(-45deg) scale(3)}
100% { -moz-transform: rotate(360deg) scale(3)}
}
@-o-keyframes spinning-cog {
0% { -o-transform: rotate(0deg) scale(3)}
20% { -o-transform: rotate(-45deg) scale(3)}
100% { -o-transform: rotate(360deg) scale(3)}
}
@keyframes spinning-cog {
0% { transform: rotate(0deg) scale(3)}
20% { transform: rotate(-45deg) scale(3)}
100% { transform: rotate(360deg) scale(3)}
}
@-webkit-keyframes shrinking-cog {
0% { -webkit-transform: scale(12) }
20% { -webkit-transform: scale(12.2) }
100% { -webkit-transform: scale(1) }
}
@-moz-keyframes shrinking-cog {
0% { -moz-transform: scale(12) }
20% { -moz-transform: scale(12.2) }
100% { -moz-transform: scale(1) }
}
@-o-keyframes shrinking-cog {
0% { -o-transform: scale(12) }
20% { -o-transform: scale(12.2) }
100% { -o-transform: scale(1) }
}
@keyframes shrinking-cog {
0% { transform: scale(12) }
20% { transform: scale(12.2) }
100% { transform: scale(0) }
}
.overlay-loader .loader-icon.shrinking-cog {
-webkit-animation: shrinking-cog .3s 1 ease forwards;
-moz-animation: shrinking-cog .3s 1 ease forwards;
-ms-animation: shrinking-cog .3s 1 ease forwards;
-o-animation: shrinking-cog .3s 1 ease forwards;
animation: shrinking-cog .3s 1 ease forwards;
background-color: #42f498;
}
这是另一个更一般的答案。
如果您想先隐藏多个元素,直到动画结束了,然后告诉他们,你可以做到以下几点:
- 给每个这些元素的特殊类的,说
appear-later
- 定义类
.appear-later { opacity: 0; }
- 使用jQuery,在计时器到期后,从拥有它的元素中移除该类。
setTimeout(function() {
$('.appear-later').removeClass('appear-later');
}, 2000);
而且,最好是把你的JavaScript代码的HTML标记之后。
我为了用color: red
代替opacity: 0
更加明显。使用Javascript - -
此外,在Codepen,您可以进入设置加载jQuery的快速增加
嘿,这是一个非常有创意的解决方案!做得很好!非常感谢您的帮助先生。 – Masteryogurt
不客气:) – jack
检查this。
最初我将身体背景设置为黑色。
body { background: black; }
在您的计时器后,将其更改为透明/白色。
setTimeout(function() {document.body.style.background = "transparent";}, 2300);
(你也可以通过使用CSS来代替js)。
嘿,太棒了!谢谢@mikele。有一件事,你知道我是如何设置背景颜色来得到....更高的z-index?如果我有任何字体或任何其他颜色(黑色以外的颜色),则在动画结束之前仍会出现问题。 – Masteryogurt
你不能那样做。请给我看看jsfiddle或fork我的codepen,以便我可以尝试从那里修复它。 – jack
一种解决方法是给这些非黑色元素提供一个类,'.black {color:black!重要;}',然后在上面的'setTimeout()'中,添加代码从所有这些元素中移除该类。使用jQuery,它看起来像这样:'setTimeout(function(){document.body.style.background =“transparent”; $('。black')。removeClass('black');},2300);' – jack
更好的答案,正确缩进代码,并尝试提供的jsfiddle。 – jack