コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

純粋な CSS3 ページング バー UI デザイン効果とトランジション アニメーション効果

黄舟
リリース： 2017-01-19 14:21:18
オリジナル
1819 人が閲覧しました

簡単なチュートリアル

これは、遷移アニメーション効果を備えた非常にクールな純粋な CSS3 ページング バー UI デザイン効果です。このページング バーの [ホーム ページ]、[最後のページ]、[前ページ]、および [次ページ] ボタンには、マウスをスライドさせると非常に滑らかに伸びるアニメーション効果が表示されます。また、ページング ストリップ全体には非常に美しい影の効果があります。

使用方法

HTML 構造

このページング バーの HTML 構造は次のとおりです:

要素を使用して、順序なしリストのセットをラップします。 

<section class="archive-pages">
  <ul>
    <li class="first"><a href="#" title="first page">first page</a></li>
    <li class="previous"><a href="#" title="previous page">previous page</a></li>
    <li class="selected">1</li>
    <li><a href="#" title="Pagina 2">2</a></li>
    <li><a href="#" title="Pagina 3">3</a></li>
    <li><a href="#" title="Pagina 4">4</a></li>
    <li><a href="#" title="Pagina 5">5</a></li>
    <li class="next"><a href="#" title="next page">next page</a></li>
    <li class="last"><a href="#" title="last page">last page</a></li>
  </ul>
</section>
ログイン後にコピー

CSS スタイル

CSS スタイルでは、まずページネーション ボタンと現在アクティブなボタンの基本スタイルを設定します。 

.archive-pages li a:hover{
  color:#000;
}
.archive-pages li.selected{
  color:white; 
}
.archive-pages a,
.archive-pages a:visited{
  color:#555;
}
.archive-pages li.selected{
  color:white;
  padding:5px;
  width:18px;
  line-height:20px;
  background: rgb(53,121,214); 
  background: -moz-radial-gradient(center, ellipse cover,  rgba(53,121,214,1) 0%, rgba(53,121,214,1) 91%, rgba(27,85,157,1) 100%); 
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(53,121,214,1)), color-stop(91%,rgba(53,121,214,1)), 
  color-stop(100%,rgba(27,85,157,1))); 
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%); 
  background: -o-radial-gradient(center, ellipse cover,  rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%); 
  background: -ms-radial-gradient(center, ellipse cover,  rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%); 
  background: radial-gradient(ellipse at center,  rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#3579d6&#39;, endColorstr=&#39;#1b559d&#39;,GradientType=1 ); 
}
.archive-pages ul{
  float:left;
  margin:0px;
  padding:10px;
  list-style:none;
}
.archive-pages li{
  border:1px solid silver;
  float:left;
  font-weight:700;
  margin:0 2px;
  text-align:center;
  border-radius: 3px; 
  -moz-border-radius: 3px; 
  -webkit-border-radius: 3px;  
  background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(214,214,214,1) 100%); 
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(214,214,214,1))); 
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(214,214,214,1) 100%); 
  background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(214,214,214,1) 100%); 
  background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(214,214,214,1) 100%); 
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(214,214,214,1) 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00ffffff&#39;, endColorstr=&#39;#d6d6d6&#39;,GradientType=0 );
}
ログイン後にコピー

次に、マウスを上に移動したときのページング ボタンのスタイルを設定します。 

.archive-pages li.selected:hover{
  cursor:default;
  background: rgb(53,121,214); 
  background: -moz-radial-gradient(center, ellipse cover,  rgba(53,121,214,1) 0%, rgba(53,121,214,1) 91%, rgba(27,85,157,1) 100%); 
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(53,121,214,1)),
   color-stop(91%,rgba(53,121,214,1)), color-stop(100%,rgba(27,85,157,1))); 
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%); 
  background: -o-radial-gradient(center, ellipse cover,  rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%); 
  background: -ms-radial-gradient(center, ellipse cover,  rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%); 
  background: radial-gradient(ellipse at center,  rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#3579d6&#39;, endColorstr=&#39;#1b559d&#39;,GradientType=1 );
}
.archive-pages li:hover{
  background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(196,196,196,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(196,196,196,1))); 
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(196,196,196,1) 100%); 
  background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(196,196,196,1) 100%); 
  background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(196,196,196,1) 100%);
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(196,196,196,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00ffffff&#39;, endColorstr=&#39;#c4c4c4&#39;,GradientType=0 ); 
}
ログイン後にコピー

ホームページ、最終ページ、前ページ、次ページボタンのwidth、text-indent、letter-spacingの3つの属性に対してアニメーション遷移効果を設定します。そして、マウスがこのボタン上をスライドすると、これらのプロパティの値がそれに応じて変更されます。 

.archive-pages .first a,
.archive-pages .previous a,
.archive-pages .next a,
.archive-pages .last a{
  overflow:hidden;
  white-space:nowrap;
  -webkit-transition-duration: 300ms;
  -webkit-transition-property: width,text-indent,letter-spacing;
  -webkit-transition-timing-function: ease;
  -moz-transition-duration: 300ms;
  -moz-transition-property: width,text-indent,letter-spacing;
  -moz-transition-timing-function: ease;
  -o-transition-duration: 300ms;
  -o-transition-property: width,text-indent,letter-spacing;
  -o-transition-timing-function: ease;
  transition-duration: 300ms;
  transition-property: width,text-indent,letter-spacing;
  transition-timing-function: ease;
}
.archive-pages .first a:hover,
.archive-pages .previous a:hover,
.archive-pages .next a:hover,
.archive-pages .last a:hover{
  width: 100px;
  text-indent:0;
  letter-spacing:0px;
}
.archive-pages .first a{
  text-indent:+6px;
  letter-spacing:10px;
}
.archive-pages .previous a{
  text-indent:+7px;
  letter-spacing:10px;
}
.archive-pages .next a{
  text-indent:-159px;
  letter-spacing:10px;
}
.archive-pages .last a{
    text-indent:-154px;
  letter-spacing:10px;
}
ログイン後にコピー

完全なページング スタイル コードについては、ダウンロードしたファイルの style.css ファイルを参照してください。

上記は、遷移アニメーション効果を備えた純粋な CSS3 ページング バー UI デザイン効果の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。


関連ラベル：
CSS3，过渡动画，ui设计
ソース：php.cn
前の記事：純粋な CSS3 シングル ページ切り替えナビゲーション メニュー インターフェイスのデザイン 次の記事：クールなハンバーガーアイコン変形アニメーション特殊効果のセット
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1968
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
2127
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1795
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1692
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1701
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート