如何在页面完全加载后启动CSS动画?

时间:2016-11-17 12:58:10

标签: javascript jquery css animation css-animations

我有一个css预加载器,它一直运行直到页面完全加载。然后用JS删除。 但是,我还有一个主页的CSS动画,它是在页面完全加载之前开始的,我只想在页面完全加载并且当然已经删除了预加载器后才能运行。

出于显示目的,我添加了多个YouTube视频(以增加加载时间),我已经制作了#preloader {opacity: .5}。正如您所看到的那样,一旦通过使用Javascript完全加载页面,就会删除Preloader和它的动画。

不幸的是,当页面仍在加载时,可以看到其余的动画在后台运行,并且在页面完全加载时完成。这违背了目的。

理想情况下,我更喜欢使用Javascript的解决方案,因为我正在尝试学习该语言。不过,请提前感谢您的帮助。



var preloader = document.getElementById("preloader");

window.addEventListener('load', function(){
  preloader.style.display = 'none';
});

// var svgContainer = document.getElementById("svg-container");

// window.addEventListener('load', function(){
// 	svgContainer.style.display = 'block';
// })

	// $(window).on("load", function() {
			
$(window).load(function(){
			$('.bullsHead').addClass('bullsHead');
			$('.logoGroup-bounceIn').addClass('logoGroup-bounceIn');
			$('.svg-container').addClass('svg-container');
});

	// 	});

body{
    width: 100%;
    height: 100%;
  margin: 0;
  padding: 0;
    overflow-x: hidden;
}


#preloader {
font-family: 'Adam CG', sans-serif;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #333333;
z-index: 99;
opacity: .5;
}


.loading_r {
    color: #fbb03b;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: fixed;
    line-height: 0.8em;
    top: 50%;
    left: 0;
    right: 0;
    font-family: ;
    text-align: center;
    pointer-events: none;
    font-size: 4em;
    font-weight: bold;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-animation: loading_r 3s ease-in-out infinite;
    animation: loading_r 3s ease-in-out infinite;
    -webkit-transition: all 0.3s 0.5s ease;
    transition: all 0.3s 0.5s ease
}

.loading_r .period {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    display: inline-block;
    -webkit-animation: loading_r_period 3s ease-in-out infinite;
    animation: loading_r_period 3s ease-in-out infinite
}

@-webkit-keyframes loading_r {
    0% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0)
    }
    60% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0)
    }
    68% {
        -webkit-transform: scale(1) translate(-0.5em, 0);
        transform: scale(1) translate(-0.5em, 0)
    }
    85% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0)
    }
    100% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0)
    }
}
@keyframes loading_r {
    0% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0)
    }
    60% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0)
    }
    68% {
        -webkit-transform: scale(1) translate(-0.5em, 0);
        transform: scale(1) translate(-0.5em, 0)
    }
    85% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0)
    }
    100% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0)
    }
}
@-webkit-keyframes loading_r_period {
    0% {
        -webkit-transform: translate(0, 0) rotate(0deg);
        transform: translate(0, 0) rotate(0deg)
    }
    50% {
        -webkit-transform: translate(0.5em, 0) rotate(-360deg);
        transform: translate(0.5em, 0) rotate(-360deg)
    }
    60% {
        -webkit-transform: translate(0, 0) rotate(-360deg);
        transform: translate(0, 0) rotate(-360deg)
    }
    70% {
        -webkit-transform: translate(0, 0) rotate(-360deg);
        transform: translate(0, 0) rotate(-360deg)
    }
    80% {
        -webkit-transform: translate(0.2em, 0) rotate(-360deg);
        transform: translate(0.2em, 0) rotate(-360deg)
    }
    100% {
        -webkit-transform: translate(0, 0) rotate(-360deg);
        transform: translate(0, 0) rotate(-360deg)
    }
}
@keyframes loading_r_period {
    0% {
        -webkit-transform: translate(0, 0) rotate(0deg);
        transform: translate(0, 0) rotate(0deg)
    }
    50% {
        -webkit-transform: translate(0.5em, 0) rotate(-360deg);
        transform: translate(0.5em, 0) rotate(-360deg)
    }
    60% {
        -webkit-transform: translate(0, 0) rotate(-360deg);
        transform: translate(0, 0) rotate(-360deg)
    }
    70% {
        -webkit-transform: translate(0, 0) rotate(-360deg);
        transform: translate(0, 0) rotate(-360deg)
    }
    80% {
        -webkit-transform: translate(0.2em, 0) rotate(-360deg);
        transform: translate(0.2em, 0) rotate(-360deg)
    }
    100% {
        -webkit-transform: translate(0, 0) rotate(-360deg);
        transform: translate(0, 0) rotate(-360deg)
    }
}



/*SVG's CSS Manipulation With External CSS; 
Link SVG to External CSS using the following:
animation: | name| duration| timing-function|delay| iteration-count| direction
<?xml-stylesheet type="text/css" href="../style.css"?>*/
/* -----------
LOGO
-------------- */

.svg-container {
    background-color: #333;
    animation: svg-container 3s linear 1s;
    transition: all .25s ease-in 2s;
}

.logoGroup-bounceIn {

    animation: logoGroup-bounceIn 3s ease-in 1s;
    transition: all .25s ease-in 2s;
}

.bullsHead {
    animation: bullsHead 3s ease-in 1s;
    transform-origin: 50% 50%;
    transition: all .25s ease-in 2s;
}


@keyframes svg-container {
    0% {background: #4DAF7C}
    50% {background: #F2784B}
    100% {background:#34495E}
}

@keyframes logoGroup-bounceIn {
    0% {transform: translateY(-300px)}
    50% {transform: translateY(150px)}
    100% {transform: translateY(0px)}
}

@keyframes bullsHead {
 0% {transform: rotateY(0deg)}
 100% {transform: rotateY(180deg)}

}

.bullsShadow {
    mix-blend-mode: multiply;
}

.svg {
    width: 100%;
    /*height: auto;*/
}

/* -----------
HOVER BUTTON
-------------- */


.svg-wrapper {
  height: 60px;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-100%);
  width: 320px;
  cursor: pointer;
}

.shape {
  fill: transparent;
  stroke-dasharray: 170 540;
  stroke-dashoffset: -458;
  stroke-width: 8px;
  stroke: #ECA400;
}

.text {
  color: #fff;
  font-family: 'Roboto Condensed';
  font-size: 22px;
  letter-spacing: 8px;
  line-height: 32px;
  position: relative;
  top: -48px;
  text-align: center;
}

@keyframes draw {
  0% {
    stroke-dasharray: 140 540;
    stroke-dashoffset: -474;
    stroke-width: 8px;
  }
  100% {
    stroke-dasharray: 760;
    stroke-dashoffset: 0;
    stroke-width: 2px;
  }
}

.svg-wrapper:hover .shape {
  -webkit-animation: 0.5s draw linear forwards;
  animation: 0.5s draw linear forwards;

}
&#13;
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Loader Page</title>
	 <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	 
</head>
<body>
<div id="preloader"><span class="loading_r">R<span class="period">.</span></span></div>


<div id="svg-container" class="svg-container">
<svg class="svg logo-components" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="600" viewBox="0 100 1000 800"><switch>

<g id="logoGroup-bounceIn" class="logoGroup-bounceIn">
<g id="bullsHead" class="bullsHead">
<path fill="#854B1F" d="M512.6 327.3l75.9-5-29-22.2-25 3.9z"/><path fill="#F2C397" d="M647.6 322.3L587.3 366l-8.7-25.7 9.9-18h59.1"/><path fill="#F3E9E0" d="M739.3 217l-34.8 4.5L716 228l23.3-11"/><path fill="#A17D63" d="M716 228l24-6.5 1.8-3.1-2.5-1.4z"/><path fill="#BE9C80" d="M716 228l-26.2 88.8-25.3-6.7 40-88.6z"/><path fill="none" stroke="#F2F2F2" stroke-width=".25" stroke-miterlimit="10" d="M587.3 366l102.5-49.2"/><path fill="#D49262" d="M597 415.3l47.5-16L656 377l-59 38.3"/><path fill="#140100" d="M525.5 497.8v13l-13.9 5z"/><path fill="#3E292B" d="M587.5 365.9l-49.7 48.2 29.8 2.1z"/><path fill="#723D17" d="M573.3 401.8l29.5-38.8-15.5 3z"/><path fill="#864E26" d="M656.1 377.1l-82.8 24.7 29.5-38.7z"/><path fill="#A96D33" d="M573.3 401.8l23.7 13.5 59-38.3z"/><path fill="none" stroke="#F2F2F2" stroke-width=".25" stroke-miterlimit="10" d="M588.5 322.3l-9.9 18 8.7 25.7"/><path fill="#E18D55" d="M588.5 322.2l-75.9 5 25.2 86.9 50.7-91.9"/><path fill="#D1916D" d="M528 483.3l11 10.5 21.9-50.2-32.9 39.7"/><path fill="#E2B03A" d="M520.7 504.1l29.5 19.7-31.7-13.4z"/><path fill="#F5C34D" d="M550.2 523.8l6.1-4.4M550.2 523.8v16.6-16.6l-29.5-19.7 35.6 15.3v25.3L500 570.2v-7.8l50.2-22"/><path fill="#755848" d="M533.5 509.2l5.5-15.4 6 20.1zM546.9 522.6l-1.9 16.5-20.1-5.6 6.1-17.2z"/><path fill="#B47030" d="M560.9 443.6l-1.4 47.2-10.4 24.8-4.1-1.7-6-20.1z"/><path fill="#603813" d="M534.5 304l-13-4.1-8.9 27.4z"/><path fill="#AB6726" d="M512.6 327.3l25.2 86.9-37.8-48.3z"/><path fill="#D0985E" d="M560.9 443.7l6.7-27.5-29.8-2.1 23.1 29.6"/><path fill="#BA7E50" d="M578.6 340.4l-40.8 73.7 49.5-48z"/><path fill="#B68857" d="M587.3 366l102.5-49.2-42.1 42.1-28.7-2.2z"/><path fill="#EEDCC5" d="M664.5 310.1l25.3 6.7L587.3 366z"/><path fill="#895136" d="M500 305.5l-21.5-5.6 21.5 66 21.5-66-21.5 5.6"/><path fill="#D88B49" d="M500 365.9l-60.9 77.7L500 412l60.9 31.6-60.9-77.7"/><path fill="#854B1F" d="M487.4 327.3l-75.9-5 29-22.2 25 3.9z"/><path fill="#F2C397" d="M352.4 322.3l60.3 43.7 8.7-25.7-9.9-18h-59.1"/><path fill="#F3E9E0" d="M260.7 217l34.8 4.5L284 228l-23.3-11"/><path fill="#A17D63" d="M284 228l-24-6.5-1.8-3.1 2.5-1.4z"/><path fill="#BE9C80" d="M284 228l26.2 88.8 25.3-6.7-40-88.6z"/><path fill="none" stroke="#F2F2F2" stroke-width=".25" stroke-miterlimit="10" d="M412.7 366l-102.5-49.2"/><path fill="#D49262" d="M403 415.3l-47.5-16L344 377l59 38.3"/><path fill="#5F462A" d="M500 530.6l-24.9 2.9-20.1 5.6 30 13.2 15-2.8 15 2.8 30-13.2-20.1-5.6-24.9-2.9"/><path fill="#140100" d="M474.5 497.8v13l13.9 5z"/><path fill="#3E292B" d="M412.5 365.9l49.7 48.2-29.8 2.1z"/><path fill="#723D17" d="M426.6 401.5L397.2 363l15.5 3z"/><path fill="#864E26" d="M344 377l82.6 24.5-29.4-38.5z"/><path fill="#A96D33" d="M426.6 401.5L403 415.3 344 377z"/><path fill="none" stroke="#F2F2F2" stroke-width=".25" stroke-miterlimit="10" d="M411.5 322.3l9.9 18-8.7 25.7"/><path fill="#E18D55" d="M411.5 322.2l75.9 5-25.2 86.9-50.7-91.9"/><path fill="#D1916D" d="M472 483.3l-11 10.5-21.9-50.2 32.9 39.7"/><path fill="#E2B03A" d="M479.3 504.1l-29.5 19.7 31.7-13.4z"/><path fill="#F5C34D" d="M449.8 523.8l-6.1-4.4M449.8 540.4v-16.6M443.7 519.4l35.6-15.3-29.5 19.7v16.6l50.2 22v7.8l-56.3-25.5v-25.3"/><path fill="#755848" d="M466.5 509.2l-5.5-15.4-6 20.1zM453.1 522.6l1.9 16.5 20.1-5.6-6.1-17.2z"/><path fill="#B47030" d="M439.1 443.6l1.4 47.2 10.4 24.8 4.1-1.7 6-20.1z"/><path fill="#603813" d="M465.5 304l13-4.1 8.9 27.4z"/><path fill="#AB6726" d="M487.4 327.3l-25.2 86.9 37.8-48.3z"/><path fill="#D0985E" d="M439.1 443.7l-6.7-27.5 29.8-2.1-23.1 29.6"/><path fill="#BA7E50" d="M421.4 340.4l40.8 73.7-49.5-48z"/><path fill="#B68857" d="M412.7 366l-102.5-49.2 42.1 42.1 28.7-2.2z"/><path fill="#EEDCC5" d="M335.5 310.1l-25.3 6.7L412.7 366z"/><path fill="#FFE0D1" d="M500 530.6l-24.9 2.9-6.1-17.2 9.5-3.8 9.9 3.3-13.9-18v8.2l-8 3.2-5.5-15.4 11-10.5h56l11 10.5-5.5 15.4-8-3.2v-8.2l-13.9 18 9.9-3.3 9.5 3.8-6.1 17.2-24.9-2.9"/><path fill="#F4C094" d="M472 483.3l-32.9-39.7L500 412l60.9 31.6-32.9 39.7z"/></g>

<g id="bullsShadow" class="bullsShadow" opacity="0.6">
<image overflow="visible" width="576" height="21" xlink:href="data:image/png;base64,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 s9RR2YLlBdsAAAAASUVORK5CYII=" transform="translate(212.447 580.952)" opacity=".6"/>
</g>


<g id="logoText" stroke-miterlimit="10"><path fill="#FBB03B" stroke="#ECA400" d="M283.1 693.2h-8.5l-12.2-16.3h-5.5v16.3h-7.5V645h14.3c6.4 0 10.1 2.6 12 4.8 2.5 2.8 3.9 6.7 3.9 11.2 0 4.4-1.4 8.3-3.9 11.1-1.2 1.3-3 2.8-5.6 3.7l13 17.4zm-19.4-23c3.1 0 5.5-.9 7-2.6 1.8-2 2.1-4.7 2.1-6.6 0-2-.3-4.7-2.1-6.6-1.5-1.7-3.8-2.5-7-2.5h-6.8v18.3h6.8zM320.8 682.9h-17.2l-4.1 10.3h-8.3l21-50.4 20.9 50.4h-8.3l-4-10.3zm-2.8-6.7l-5.9-14.7-5.9 14.7H318zM346.8 689.4c-1.9-1.4-3.3-3.2-4.3-5.2-1.1-2.2-1.6-4.7-1.6-7.3V645h7.5v31.9c0 2.9 1 5.1 3 6.6 1.8 1.4 4.5 2.3 7.3 2.3s5.5-.8 7.3-2.3c2-1.5 2.9-3.7 2.9-6.6V645h7.6v31.9c0 2.7-.6 5.1-1.6 7.3-1 2-2.5 3.8-4.3 5.2-3.2 2.5-7.4 3.8-12 3.8s-8.7-1.3-11.8-3.8zm10.8-57.2h6.8l-6.8 7.6h-4.5l4.5-7.6zM418.5 693.2h-27.7V645h7.5v41.4h20.2v6.8zM460.1 664.6h17.6v6.8h-17.6v15h21.4v6.8h-29V645h29v6.8h-21.4v12.8zM502.5 662.2v31H495v-50.5l30.3 33.2V645h7.6v50.4l-30.4-33.2zM581.2 693.2h-8.5l-12.2-16.3H555v16.3h-7.5V645h14.3c6.4 0 10.1 2.6 12 4.8 2.5 2.8 3.9 6.7 3.9 11.2 0 4.4-1.4 8.3-3.9 11.1-1.2 1.3-3 2.8-5.6 3.7l13 17.4zm-19.4-23c3.1 0 5.5-.9 7-2.6 1.8-2 2.1-4.7 2.1-6.6 0-2-.3-4.7-2.1-6.6-1.5-1.7-3.8-2.5-7-2.5H555v18.3h6.8zM591.7 693.2V645h7.5v48.2h-7.5zM653 686.2l-.5.5 4.4 5.7-5.5 4.1-4.4-5.9c-.5.3-1.1.5-1.6.8-3 1.2-6.2 1.9-9.4 1.9-3.3 0-6.4-.7-9.4-1.9-2.9-1.2-5.5-3-7.7-5.2s-4-4.7-5.2-7.7c-1.2-2.9-1.9-6.1-1.9-9.4s.6-6.4 1.9-9.4c1.2-2.9 3-5.5 5.2-7.7s4.7-3.9 7.7-5.1c2.9-1.3 6.1-1.9 9.4-1.9 3.3 0 6.4.6 9.4 1.9 2.9 1.2 5.5 2.9 7.7 5.1 2.2 2.2 3.9 4.8 5.1 7.7 1.3 3 1.9 6.2 1.9 9.4s-.6 6.4-1.9 9.4c-1.3 2.9-3 5.5-5.2 7.7zm-10.7-1.8l-3.4-4.5 5.5-4.1 3.5 4.7c2.9-3.1 4.6-7.2 4.6-11.4 0-4.4-1.8-8.6-4.9-11.7s-7.3-4.9-11.7-4.9c-4.4 0-8.6 1.8-11.7 4.9s-4.9 7.3-4.9 11.7c0 4.4 1.8 8.6 4.9 11.7s7.3 4.9 11.7 4.9c2.3 0 4.4-.4 6.4-1.3zM677.9 689.4c-1.9-1.4-3.3-3.2-4.3-5.2-1.1-2.2-1.6-4.7-1.6-7.3V645h7.5v31.9c0 2.9 1 5.1 3 6.6 1.8 1.4 4.5 2.3 7.3 2.3s5.5-.8 7.3-2.3c2-1.5 2.9-3.7 2.9-6.6V645h7.6v31.9c0 2.7-.6 5.1-1.6 7.3-1 2-2.5 3.8-4.3 5.2-3.2 2.5-7.4 3.8-12 3.8-4.4 0-8.6-1.3-11.8-3.8zM729.4 664.6H747v6.8h-17.6v15h21.4v6.8h-29V645h29v6.8h-21.4v12.8z"/><path fill="#FFF" stroke="#FFF" d="M152.2 730.2l-5.9-13.4-5.5 13.4-10.2-23.2h3.8l6.3 14.7 3.7-9.2 1.8-4.6 2 4.5 4 9.3L158 707h3.8l-9.6 23.2zM169.8 716h8.1v3.1h-8.1v6.9h9.9v3.1h-13.4V707h13.4v3.1h-9.9v5.9zM198.7 722.6c0 1.1-.2 2.1-.7 3-.5.8-1.2 1.6-2 2.1-1.5 1-3.6 1.5-6.1 1.5H185V707h4.9c2.5 0 4.3.4 5.5 1.4.7.5 1.2 1.2 1.5 1.9.3.7.4 1.5.4 2.3 0 1.2-.4 2.7-1.7 4.1.4.2.7.5 1 .8.7.7 1.2 1.4 1.5 2.2.4.9.6 1.9.6 2.9zm-10.4-12.5v6.8c.7-.1 1.5-.4 2.3-.7 1.1-.5 2-1 2.6-1.6.6-.6.9-1.2.9-2 0-1.1-.4-1.5-.7-1.7-.8-.6-2.5-.8-3.6-.8h-1.5zm7.2 12.5c0-1.2-.4-2.1-1.2-2.8-.5-.5-1-.8-1.7-1.1-.3.1-.6.3-.9.4-1.2.5-2.5.8-3.4 1v6h1.4c1.9 0 3.4-.3 4.4-1 1-.6 1.4-1.3 1.4-2.5zM230 718.1c0 3.2-.9 5.8-2.7 7.8-1 1.1-2.2 1.9-3.6 2.5-1.4.6-3.1.9-4.9.9h-5.3V707h5.3c1.8 0 3.4.3 4.9.9 1.4.5 2.6 1.4 3.6 2.5 1.8 1.9 2.7 4.6 2.7 7.7zm-3.5 0c0-2.3-.6-4.2-1.8-5.5-1.3-1.5-3.3-2.2-5.8-2.2h-1.8v15.3h1.8c2.6 0 4.5-.8 5.8-2.2 1.2-1.2 1.8-3.1 1.8-5.4zM238.4 716h8.1v3.1h-8.1v6.9h9.9v3.1h-13.4V707h13.4v3.1h-9.9v5.9zM265.2 724.8c-.6 2.2-2.6 3.9-5 4.3-.5.1-.9.1-1.3.1-.9 0-1.8-.2-2.6-.5-1.4-.6-2.6-1.5-3.7-2.9l2.8-2.2c.6.8 1.4 1.4 2.2 1.7.7.3 1.4.3 2 .2 1.1-.2 2.1-1 2.3-1.9.3-1-.4-1.9-1-2.5-1-.9-2.6-2.5-2.7-2.6l-2.7-2.6c-.8-.8-1.4-1.7-1.7-2.7-.3-.9-.3-1.9-.1-2.8.3-1 .8-1.8 1.7-2.5.8-.6 1.7-1.1 2.7-1.3 1.1-.2 2.2-.2 3.3.2 1.1.5 2.2 1.2 3 2.3l-2.7 2.2c-1.1-1.4-2.3-1.4-2.9-1.3-.8.2-1.4.7-1.6 1.3-.1.4-.1 1.1.8 2l3.7 3.6c.5.5 1.2 1.2 1.7 1.6 1 .9 1.6 1.9 2 2.9.1 1.3.1 2.4-.2 3.4zM269.8 729.2V707h3.5v22.3h-3.5zM296.2 720.8v6l-.8.5h-.1l-.1.1-.1.1-.1.1-.1.1s-.1 0-.1.1c0 0-.1 0-.1.1-.1 0-.1 0-.1.1 0 0-.1 0-.1.1 0 0-.1.1-.2.1l-.1.1h-.1l-.1.1c-.1 0-.2.1-.2.1-1.3.6-2.6.9-4 1h-.5c-1.2 0-2.4-.2-3.5-.6-.1 0-.2-.1-.3-.1-.2-.1-.3-.1-.5-.2-.4-.1-.8-.3-1.1-.5-.9-.5-1.7-1.1-2.5-1.9-1-1-1.8-2.2-2.4-3.5-.4-1-.7-2.1-.8-3.2 0-.4-.1-.8-.1-1.1v-.6c.1-1.3.4-2.6.9-3.8.6-1.3 1.4-2.5 2.4-3.5s2.2-1.8 3.5-2.4c1.3-.6 2.8-.9 4.3-.9h.8c1.3.1 2.5.4 3.8.9.1 0 .1.1.2.1v4.1c-.4-.4-1-.7-1.5-1-.4-.2-.9-.4-1.4-.5h-.1-.1-.1-.1c-.1 0-.3 0-.4-.1h-.2-.1-.1H289.6h-.1-.1-.1H289c-1.4 0-2.8.4-3.9 1.1l-.1.1c-.5.3-.9.7-1.3 1.1-.1.1-.3.2-.4.4-.1.2-.3.4-.4.5l-.1.1c-.1.1-.1.2-.2.3l-.1.1c-.5.7-.8 1.5-.9 2.3v.1c-.1.3-.1.6-.2.9v1.1c0 .6.1 1.1.3 1.7.4 1.3 1 2.4 1.9 3.3 1.4 1.4 3.4 2.3 5.4 2.3h1.1c.2 0 .5-.1.7-.1h.6c.4-.1.8-.3 1.2-.5v-4.1h-4.2v-3.2h7.7v2.6zM304.4 714.9v14.3h-3.5v-23.3l14 15.3V707h3.5v23.3l-14-15.4z"/><path fill="#FBB03B" stroke="#ECA400" d="M337 734.3h-2.9v-29h2.9v29z"/><path fill="#FFF" stroke="#FFF" d="M374.2 730.2l-5.9-13.4-5.5 13.4-10.2-23.2h3.8l6.3 14.7 3.7-9.2 1.8-4.6 2 4.5 4 9.3L380 707h3.8l-9.6 23.2zM391.9 716h8.1v3.1h-8.1v6.9h9.9v3.1h-13.4V707h13.4v3.1h-9.9v5.9zM420.7 722.6c0 1.1-.2 2.1-.7 3-.5.8-1.2 1.6-2 2.1-1.5 1-3.6 1.5-6.1 1.5H407V707h4.9c2.5 0 4.3.4 5.5 1.4.7.5 1.2 1.2 1.5 1.9.3.7.5 1.5.5 2.3 0 1.2-.4 2.7-1.7 4.1.4.2.7.5 1 .8.7.7 1.2 1.4 1.5 2.2.4.9.5 1.9.5 2.9zm-10.3-12.5v6.8c.7-.1 1.5-.4 2.3-.7 1.1-.5 2-1 2.6-1.6.6-.6.9-1.2.9-2 0-1.1-.4-1.5-.7-1.7-.8-.6-2.5-.8-3.6-.8h-1.5zm7.2 12.5c0-1.2-.4-2.1-1.2-2.8-.5-.5-1-.8-1.7-1.1-.3.1-.6.3-.9.4-1.2.5-2.5.8-3.4 1v6h1.4c1.9 0 3.4-.3 4.4-1 1-.6 1.4-1.3 1.4-2.5zM452.1 718.1c0 3.2-.9 5.8-2.7 7.8-1 1.1-2.2 1.9-3.6 2.5-1.4.6-3.1.9-4.9.9h-5.3V707h5.3c1.8 0 3.4.3 4.9.9 1.4.5 2.6 1.4 3.6 2.5 1.8 1.9 2.7 4.6 2.7 7.7zm-3.5 0c0-2.3-.6-4.2-1.8-5.5-1.3-1.5-3.3-2.2-5.8-2.2h-1.8v15.3h1.8c2.6 0 4.5-.8 5.8-2.2 1.2-1.2 1.8-3.1 1.8-5.4zM460.5 716h8.1v3.1h-8.1v6.9h9.9v3.1H457V707h13.4v3.1h-9.9v5.9zM484 721.7l5.9-14.7h3.8l-9.5 23.2-10.3-23.2h3.8l6.3 14.7zM501.3 716h8.1v3.1h-8.1v6.9h9.9v3.1h-13.3V707h13.3v3.1h-9.9v5.9zM529.1 729.2H516.4V707h3.5v19.1h9.3v3.1zM537.3 728.4c-1.4-.6-2.5-1.4-3.5-2.4s-1.8-2.2-2.4-3.5c-.6-1.3-.9-2.8-.9-4.3s.3-3 .9-4.3c.6-1.3 1.4-2.5 2.4-3.5s2.2-1.8 3.5-2.4c1.3-.6 2.8-.9 4.3-.9s3 .3 4.3.9c1.3.6 2.5 1.3 3.5 2.4 1 1 1.8 2.2 2.4 3.5.6 1.4.9 2.8.9 4.3s-.3 3-.9 4.3-1.3 2.5-2.4 3.5c-1 1-2.2 1.8-3.5 2.4-1.4.6-2.8.9-4.3.9s-2.9-.4-4.3-.9zm-1-15.7c-1.4 1.4-2.3 3.4-2.3 5.4s.8 4 2.3 5.4c1.4 1.4 3.4 2.3 5.4 2.3s4-.8 5.4-2.3c1.4-1.4 2.3-3.4 2.3-5.4s-.8-4-2.3-5.4c-1.4-1.4-3.4-2.3-5.4-2.3s-4 .9-5.4 2.3zM560.7 707h3.7c2.9 0 4.7 1.2 5.5 2.2 1.2 1.3 1.8 3.1 1.8 5.2s-.6 3.9-1.8 5.2c-.9 1-2.6 2.2-5.5 2.2h-3.1v7.5h-3.5V707h2.9zm7.9 7.3c0-.9-.2-2.1-1-3-.7-.8-1.8-1.2-3.2-1.2h-3.1v8.5h3.1c1.4 0 2.5-.4 3.2-1.2.8-.9 1-2.2 1-3.1zM593.1 729.2v-11.8l-7 10.4-7-10.4v11.8h-3.5V706l10.5 15.6 10.5-15.6v23.3h-3.5zM605.8 716h8.1v3.1h-8.1v6.9h9.9v3.1h-13.4V707h13.4v3.1h-9.9v5.9zM624.3 714.9v14.3h-3.5v-23.3l14 15.3V707h3.5v23.3l-14-15.4zM658.3 710.1h-6.1v19.1h-3.5v-19.1h-6.1V707h15.7v3.1z"/><path fill="#FBB03B" stroke="#ECA400" d="M675.5 734.3h-2.9v-29h2.9v29z"/><path fill="#FFF" stroke="#FFF" d="M709.7 729.2v-11.8l-7 10.4-7-10.4v11.8h-3.5V706l10.5 15.6 10.5-15.6v23.3h-3.5zM730.9 724.5H723l-1.9 4.8h-3.8L727 706l9.7 23.3h-3.8l-2-4.8zm-1.2-3.1l-2.7-6.8-2.7 6.8h5.4zM756 729.2h-3.9l-5.6-7.5H744v7.5h-3.5V707h6.6c2.9 0 4.7 1.2 5.5 2.2 1.2 1.3 1.8 3.1 1.8 5.2 0 2-.6 3.8-1.8 5.1-.5.6-1.4 1.3-2.6 1.7l6 8zm-8.9-10.6c1.4 0 2.5-.4 3.2-1.2.8-.9 1-2.2 1-3 0-.9-.2-2.2-1-3.1-.7-.8-1.8-1.2-3.2-1.2H744v8.5h3.1zM772.1 729.2l-8.8-10.1v10.1h-3.5V707h3.5v9.2l7.1-9.2h4.4l-8.2 10.7 9.8 11.5h-4.3zM784.7 716h8.1v3.1h-8.1v6.9h9.9v3.1h-13.4V707h13.4v3.1h-9.9v5.9zM814.1 710.1H808v19.1h-3.5v-19.1h-6.1V707h15.7v3.1zM818.3 729.2V707h3.5v22.3h-3.5zM831 714.9v14.3h-3.5v-23.3l14 15.3V707h3.5v23.3l-14-15.4zM867.9 720.8v6l-.8.5h-.1c-.1 0-.1.1-.1.1l-.1.1-.1.1-.1.1s-.1 0-.1.1c0 0-.1 0-.1.1-.1 0-.1 0-.2.1 0 0-.1 0-.1.1s-.1.1-.2.1l-.1.1h-.1l-.1.1c-.1 0-.2.1-.2.1-1.3.6-2.6.9-4 1h-.5c-1.2 0-2.4-.2-3.5-.6-.1 0-.2-.1-.3-.1-.1-.1-.3-.1-.5-.2-.4-.1-.8-.3-1.1-.5-.9-.5-1.7-1.1-2.5-1.9-1-1-1.8-2.2-2.4-3.5-.4-1-.7-2.1-.8-3.2 0-.4-.1-.8-.1-1.1v-.6c.1-1.3.4-2.6.9-3.8.6-1.3 1.4-2.5 2.4-3.5s2.2-1.8 3.5-2.4c1.4-.6 2.8-.9 4.3-.9h.8c1.3.1 2.5.4 3.8.9.1 0 .1.1.2.1v4.1c-.5-.4-1-.7-1.5-1-.5-.2-.9-.4-1.4-.5h-.1-.1-.1-.1c-.1 0-.3 0-.4-.1h-.2-.2H861.2h-.1-.1-.1H860.6c-1.4 0-2.8.4-3.9 1.1 0 0-.1.1-.2.1-.5.3-.9.7-1.3 1.1-.1.1-.3.2-.4.4-.1.2-.3.4-.4.5l-.1.1c-.1.1-.1.2-.2.3l-.1.1c-.5.7-.8 1.5-.9 2.3v.1c-.1.3-.1.6-.2.9v1.1c0 .6.1 1.1.3 1.7.4 1.3 1 2.4 2 3.3 1.4 1.4 3.4 2.3 5.4 2.3h1.1c.2 0 .4-.1.7-.1h.6c.4-.1.8-.3 1.2-.5v-4.1H860v-3.2h7.7v2.6z"/></g></g></switch></svg>

	<div class="svg-wrapper">
	  <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg">
	    <rect class="shape" height="60" width="320" />
	  </svg>
	   <div class="text">VIEW WORK</div>
	</div>
</div>

<!--  <div class="home"><object class="logoContainer" type="image/svg+xml" data="Logos/BullLogo.svg"></object></div> -->


 <div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/8DIkeyswMyY" frameborder="0" allowfullscreen></iframe> </div>
<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/8DIkeyswMyY" frameborder="0" allowfullscreen></iframe> </div>
<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/8DIkeyswMyY" frameborder="0" allowfullscreen></iframe> </div>
<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/8DIkeyswMyY" frameborder="0" allowfullscreen></iframe> </div>
<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/8DIkeyswMyY" frameborder="0" allowfullscreen></iframe> </div>
<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/8DIkeyswMyY" frameborder="0" allowfullscreen></iframe> </div>
<div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/8DIkeyswMyY" frameborder="0" allowfullscreen></iframe> </div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript" src="script.js"></script>

</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

将代码移到$(window).load(function(){}window.addEventListener('load', function(){}怎么样?

然后它会在删除预加载器后添加动画类。那么你就会看到动画。现在,您在删除预加载器之前添加动画,这样您就不会看到任何动画,