首頁 > web前端 > css教學 > 純CSS3帶過渡動畫特效的分頁條ui設計效果

純CSS3帶過渡動畫特效的分頁條ui設計效果

黄舟
發布: 2017-01-19 14:21:18
原創
1943 人瀏覽過

簡要教學

這是一款效果非常酷的純CSS3帶過渡動畫特效的分頁條ui設計效果。該分頁條的首頁、尾頁、上一頁和下一頁按鈕在滑鼠滑過時,會帶有非常好看的平滑拉伸動畫效果。並且整個分頁條帶有很漂亮的陰影效果。

使用方法

 HTML結構

此分頁條的HTML結構如下:使用

元素來包裹一組無序列表。

1

2

3

4

5

6

7

8

9

10

11

12

13

<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樣式中,首先為分頁按鈕和目前啟動的按鈕設定基本樣式。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

.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 );

}

登入後複製

然後分別設定分頁按鈕滑鼠滑過時的樣式。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

.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個屬性設定動畫過渡效果。並且在滑鼠滑過這寫按鈕時,相應的修改這些屬性的值。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

.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中文網(www.php.cn)!


本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板