ホームページ > 記事 > ウェブフロントエンド > タイムライン効果の CSS3 実装
タイムライン効果の CSS3 実装
- 高洛峰オリジナル
- 2017-03-07 14:56:081575ブラウズ
最近、コンピューターをオンにしたときに、Geek Academy の新規ユーザーは 1 か月間無料の VIP を利用できることがわかりました。そのため、コースについてはここでは触れませんが、実践的な効果が見られました。パスマップページ:
これはタイムラインに似ており、マウスホバーのすべての部分にドロップダウン効果があり、スクリーンショット情報を展開して紹介します。その効果は非常に優れています。ただし、このエフェクトは動的な追加にはあまり柔軟ではないようです。高さは幅ほど柔軟ではないため、1 つずつ追加する必要があります。それらの多くはディスプレイ効果のために作られています。
もちろん、私はこのアイデアに基づいて、主に全体のレイアウト効果をベースに、いくつかのより単純な同様の効果も作成しました。また、個々のコンテンツの特定の部分を模倣するわけではありません。また、より面白くするために、オープニングアニメーションも自分で追加しました。 ..
最初に効果を見てみましょう:
効果はおそらく次のとおりです。これ以上の苦労はせずに、直接トピックに進みましょう:
HTML 構造:
<p class="timezone">
<p class="time">
<h2>2015-07-02</h2>
<p>
<p>暴走大事件第一季</p>
<ul>
</ul>
</p>
</p>
<p class="timeLeft" style="top: 100px;">
<h2>2015-07-02</h2>
<p>
<p>暴走大事件第二季</p>
<ul>
</ul>
</p>
</p>
これは簡略化されたものです。 HTML 構造。右側に time クラスが表示され、左側に .timeLeft が表示されます。その後、余白を追加して、各ブロックのコンテンツを削除します。
CSS スタイル コードは次のとおりです:
body{
background: #333;
}
h1{
text-align: center;
color:#fff;
}
.timezone{
width:6px;
height: 350px;
background: lightblue;
margin: 0 auto;
margin-top:50px;
border-radius: 3px;
position: relative;
-webkit-animation: heightSlide 2s linear;
}
@-webkit-keyframes heightSlide{
0%{
height: 0;
}
100%{
height: 350px;
}
}
.timezone:after{
content: '未完待续...';
width: 100px;
color:#fff;
position: absolute;
margin-left: -35px;
bottombottom: -30px;
-webkit-animation: showIn 4s ease;
}
.timezone .time,.timezone .timeLeft{
position: absolute;
margin-left: -10px;
margin-top:-10px;
width:20px;
height:20px;
border-radius: 50%;
border:4px solid rgba(255,255,255,0.5);
background: lightblue;
-webkit-transition: all 0.5s;
-webkit-animation: showIn ease;
}
.timezone .time:nth-child(1){
-webkit-animation-duration:1s;
}
.timezone .timeLeft:nth-child(2){
-webkit-animation-duration:1.5s;
}
.timezone .time:nth-child(3){
-webkit-animation-duration:2s;
}
.timezone .timeLeft:nth-child(4){
-webkit-animation-duration:2.5s;
}
@-webkit-keyframes showIn{
0%,70%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.timezone .time h2,.timezone .timeLeft h2{
position: absolute;
margin-left: -120px;
margin-top: 3px;
color:#eee;
font-size: 14px;
cursor:pointer;
-webkit-animation: showIn 3s ease;
}
.timezone .timeLeft h2{
margin-left: 60px;
width: 100px;
}
.timezone .time:hover,.timezone .timeLeft:hover{
border:4px solid lightblue;
background: lemonchiffon;
box-shadow: 0 0 2px 2px rgba(255,255,255,0.4);
}
.timezone .time p,.timezone .timeLeft p{
position: absolute;
top:50%;
margin-top: -25px;
left:50px;
width: 300px;
height: 50px;
background: lightblue;
border:3px solid #eee;
border-radius: 10px;
z-index: 2;
overflow: hidden;
cursor:pointer;
-webkit-animation: showIn 3s ease;
-webkit-transition: all 0.5s;
}
.timezone .timeLeft p{
left:-337px;
}
.timezone .time p:hover,.timezone .timeLeft p:hover{
height: 170px;
}
.timezone .time p p,.timezone .timeLeft p p{
color: #fff;
font-weight: bold;
text-align: center;
}
.timezone .time:before,.timezone .timeLeft:before{
content: '';
position: absolute;
top:0px;
left: 32px;
width: 0px;
height: 0px;
border:10px solid transparent;
border-right:10px solid #eee;
z-index:-1;
-webkit-animation: showIn 3s ease;
}
.timezone .timeLeft:before{
left:-33px;
border:10px solid transparent;
border-left:10px solid #eee;
}
.timezone .time p ul,.timezone .timeLeft p ul{
list-style: none;
width:300px;
padding:5px 0 0;
border-top:2px solid #eee;
color:#fff;
text-align: center;
}
.timezone .time p li,.timezone .timeLeft p li{
display: inline-block;
height: 25px;
line-height: 25px;
}
この CSS スタイル コードは、あまり実用的ではなく、体系化されていません。アニメーションの効果と全体的なレイアウトを理解することが重要です。幸運を！
以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。また、皆さんも PHP 中国語 Web サイトをサポートしていただければ幸いです。
タイムライン効果の CSS3 実装に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。