css3アニメーション学習_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

css3アニメーション学習_html/css_WEB-ITnose

Jun 24, 2016 am 11:53 AM

アニメーション効果は、主に css3 に新しく追加された属性 (変換、トランジション、アニメーション) を通じて、css3 で実現できます。

詳細な説明については、W3CSCHOOL を参照してください

以下はレンダリングです:

タブと同様に、入力がクリックされると、対応するコンテンツがアニメーション効果とともに表示されます。エリア。

HTML コード

<html lang="zh" >
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
body{
オーバーフロー: 非表示;
}
.st-container {
位置: 絶対;
幅: 100%;
高さ: 100%;
トップ: 0;
左: 0;
font-family: Arial、 sans-serif;
}
/*固定位置を指定して「ナビゲーション」をページの上部に配置します*/
.st-container > 入力、
.st-container > {
位置: 固定;
トップ: 0;
幅: 20%;
カーソル: ポインタ。
font-size: 16px;
高さ: 34ピクセル;
行の高さ: 34px;
}
.st-container > 入力 {
不透明度: 0;
z-index: 1000;
}
.st-container > a {
z-index: 10;
フォントの太さ: 700;
背景: #e23a6e;
カラー: #fff;
text-align: center;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
テキスト装飾: なし。
}
/*リンク要素と同じ背景色になります:*/
.st-container:after {
content: '';
位置: 固定。
幅: 100%;
高さ: 34ピクセル;
背景: #e23a6e;
z-index: 9;
トップ: 0;
}
/*入力とリンクのそれぞれの左の値を与える*/
#st-control-1, #st-control-1 + a {
左: 0;
}
#st-control-2, #st-control-2 + a {
左: 20%;
}
#st-control-3, #st-control-3 + a {
左: 40%;
}
#st-control-4, #st-control-4 + a {
左: 60%;
}
#st-control-5, #st-control-5 + a {
左: 80%;
}
/*リンク要素の「選択された」状態を定義します。*/
.st-container > input:checked + a,
.st-container > input:checked:hover + a{
background: #821134;
}
/*疑似クラスを使用して小さな三角形を追加:after し、同じ色を与えます:*/
.st-container > input:checked + a:after,
.st-container > input:checked:hover + a:after{
top: 100%;
境界線: 実線透明。
コンテンツ: '';
身長: 0;
幅: 0;
位置: 絶対。
ポインターイベント: なし。
border-top-color: #821134;
ボーダー幅: 20px;
左: 50%;
margin-left: -20px;
}
/*リンク要素のホバー状態を定義します:*/
.st-container > input:hover + a{
background: #AD244F;
}
.st-container > input:hover + a:after {
border-bottom-color: #AD244F;
}
/*スクロールパネルスタイルの定義*/
.st-scroll,
.st-panel {
position: relative;
幅: 100%;
高さ: 100%;
}
.st-scroll {
top: 0;
左: 0;
-webkit-transition: すべて 0.6 秒のイーズインアウト。
/* いくつかのハードウェアアクセラレーションを強制しましょう */
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: 非表示;
ボーダー: 実線 1px #ccc;
}
.st-panel{
background: #fff;
オーバーフロー: 非表示;
}
/**チェックされたラジオボタンごとに、st-scroll ラッパーの位置を定義します。*/
#st-control-1:checked ~ .st-scroll {
-webkit-transform: translateY(0%);
背景色: 緑;
}
#st-control-2:checked ~ .st-scroll {
-webkit-transform: translateY(-100%);
背景色: 緑;
}
#st-control-3:checked ~ .st-scroll {
-webkit-transform: translateY(-200%);
背景色: 緑;
}
#st-control-4:checked ~ .st-scroll {
-webkit-transform: translateY(-300%);
背景色: 緑;
}
#st-control-5:checked ~ .st-scroll {
-webkit-transform: translateY(-400%);
背景色: 緑;
}
#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2 ,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
# st-control-5:checked ~ .st-scroll #st-panel-5 h2{
-webkit-animation: moveDown 1.6s ease-in-out 1.2s backward;
}
/** スクロールパネルのアニメーションを定義する*/
@keyframes moveDown{
0% {
-webkit-transform: translateY(-40px);
不透明度: 0;
}
100% {
-webkit-transform: translateY(0px);
不透明度: 1;
}
}
.st-panel h2 {
color: #e23a6e;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
位置: 絶対。
font-size: 54px;
フォントの太さ: 900;
幅: 80%;
左: 10%;
text-align: center;
行の高さ: 50px;
マージン: -70px 0 0 0;
パディング: 0;
トップ: 50%;
-webkit-backface-visibility: 非表示;
}
.st-panel p {
位置: 絶対;
text-align: center;
font-size: 16px;
行の高さ: 22px;
カラー: #8b8b8b;
z-index: 2;
パディング: 0;
幅: 50%;
左: 25%;
トップ: 50%;
マージン: 10px 0 0 0;
-webkit-backface-visibility: 非表示;
}
</style>
<div class="コンテナ">
<a href="#st-panel-1">セレンディピティ</a>
<input type="radio" name="radio-set" id="st-control-2">
<a href="#st-panel-2">幸福</a>
<input type="radio" name="radio-set" id="st-control-3">
<a href="#st-panel-3">静けさ</a>
<input type="radio" name="radio-set" id="st-control-4">
<a href="#st-panel-4">ポジティブ</a>
<input type="radio" name="radio-set" id="st-control-5">
<a href="#st-panel-5">情熱</a>
<h2>セレンディピティ</h2>
<p>バンクシー、アディピシシング、エイウスモッド、バインミー、シード。イカのスタンプタウン、奇妙な未来のニシ、コモド、mlkshk、ポップアップ、アジピシシング、レトロ。</p>
</section>
<section class="st-panel st-color" id="st-panel-2">
<h2>Happiness</h2>
<p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>
</section>
<section class="st-panel" id="st-panel-3">
<h2>Tranquillity</h2>
<p>Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
</section>
<section class="st-panel st-color" id="st-panel-4">
<h2>Positivity</h2>
<p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
</section>
<section class="st-panel" id="st-panel-5">
<h2>Passion</h2>
<p>Fixie ad odd future polaroid dreamcatcher, nesciunt carles bicycle rights accusamus mcsweeney's mumblecore nulla irony.</p>
</section>
</div>
</div>
</div>
</body>
</html>