アニメーション効果は、主に css3 に新しく追加された属性 (変換、トランジション、アニメーション) を通じて、css3 で実現できます。
詳細な説明については、W3CSCHOOL を参照してください
以下はレンダリングです:
タブと同様に、入力がクリックされると、対応するコンテンツがアニメーション効果とともに表示されます。エリア。
HTML コード
-
-
-
-
-
-
-
- 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: 非表示;
- }
-
-
-
-
-