2
私のウェブサイトのURLをユーザが最初にクリックすると、表示されたウェブページを自分のサイズに数秒間表示する方法を教えてください。たとえば、thisウェブサイトでは、開発者はある種のトランジションのロゴを入れてから、ウェブサイトのロードを行います。私はこれを私のウェブサイトに実装しようとしています。しかし、誰かがこれについての技術的な名前を新しくしたのかどうか、私はそれをどうやって読むことができるのだろうと思っていました。プリローダーアニメーションをウェブサイトに実装するにはどうすればよいですか？
私のウェブサイトは私のcodepenです。私は、あなたが約3秒間、Webページが最初にそこに表示されるようにいくつかのコードを追加する必要がある場合、このリンクをリンクしました。
ここにはcodepenがあります。開始時に3秒間表示したいです。
以下は、ウェブサイトが読み込まれる前に3秒間表示しようとしているコードブックのHTML/CSSです。
body{
\t background:#333;
\t background: -webkit-gradient(radial, center center, 120, center center, 900, from(#111), to(#111));
\t background:-moz-radial-gradient(circle, #111, #111);
}
.loader{
\t margin:200px auto;
}
h1{
\t font-family: 'Actor', sans-serif;
\t color:#FFF;
\t font-size:16px;
\t letter-spacing:1px;
\t font-weight:200;
\t text-align:center;
}
.loader span{
\t width:16px;
\t height:16px;
\t border-radius:50%;
\t display:inline-block;
\t position:absolute;
\t left:50%;
\t margin-left:-10px;
\t -webkit-animation:3s infinite linear;
\t -moz-animation:3s infinite linear;
\t -o-animation:3s infinite linear;
\t
}
.loader span:nth-child(2){
\t background:blye;
\t -webkit-animation:kiri 1.2s infinite linear;
\t -moz-animation:kiri 1.2s infinite linear;
\t -o-animation:kiri 1.2s infinite linear;
\t
}
.loader span:nth-child(3){
\t background:red;
\t z-index:100;
}
.loader span:nth-child(4){
\t background:red;
\t -webkit-animation:kanan 1.2s infinite linear;
\t -moz-animation:kanan 1.2s infinite linear;
\t -o-animation:kanan 1.2s infinite linear;
}
@-webkit-keyframes kanan {
0% {-webkit-transform:translateX(20px);
}
\t 50%{-webkit-transform:translateX(-20px);
\t }
\t
\t 100%{-webkit-transform:translateX(20px);
\t z-index:200;
\t }
}
@-moz-keyframes kanan {
0% {-moz-transform:translateX(20px);
}
\t 50%{-moz-transform:translateX(-20px);
\t }
\t
\t 100%{-moz-transform:translateX(20px);
\t z-index:200;
\t }
}
@-o-keyframes kanan {
0% {-o-transform:translateX(20px);
}
\t 50%{-o-transform:translateX(-20px);
\t }
\t
\t 100%{-o-transform:translateX(20px);
\t z-index:200;
\t }
}
@-webkit-keyframes kiri {
0% {-webkit-transform:translateX(-20px);
\t z-index:200;
}
\t 50%{-webkit-transform:translateX(20px);
\t }
\t 100%{-webkit-transform:translateX(-20px);
\t }
}
@-moz-keyframes kiri {
0% {-moz-transform:translateX(-20px);
\t z-index:200;
}
\t 50%{-moz-transform:translateX(20px);
\t }
\t 100%{-moz-transform:translateX(-20px);
\t }
}
@-o-keyframes kiri {
0% {-o-transform:translateX(-20px);
\t z-index:200;
}
\t 50%{-o-transform:translateX(20px);
\t }
\t 100%{-o-transform:translateX(-20px);
\t }
}<html>
<head>
<link rel="stylesheet" href="css/style.css" />
<link href='https://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="loader">
<h1>LIAM DOCHERTY'S PORTFOLIO IS</h1>
<span></span>
<span></span>
<span></span>
<br>
<h1>LOADING</h1>
</div>
</body>
</html>
'<タグのonloadは=「MyFunctionを（）」>'関数は、コメントの事前ローダー –
感謝を非表示にすることであり、あなたは、これはと呼ばれるものを知って、あなたはどんな役に立つのURLを知っていますか？ –
[Onload Event]（https://www.w3schools.com/jsref/event_onload.asp）。私はこれを行うための他のより効率的な方法があると確信していますが、ここで私はそれをやる方法です。 1- divに表示したいコンテンツを囲みます。2-画面のサイズを 'div'にして、' z-index'値を与えます。デフォルトで表示されるようにディスプレイを設定します。 4 - divの表示をnoneに変更する小さなスクリプトを書いてください。 5あなたのporfolioの内容がロードされたらスクリプトをトリガするために 'onload'を使います。 –