Pure CSS3 with Transition animation effect page Bar UI Design effects

Brief tutorials

This is a very cool effect of pure CSS3 with transition animation effect of the page bar UI design. The first, last, previous, and Next buttons of the page bar will have a very nice smooth stretch animation effect when the mouse is out of date. and the entire page bar has a beautiful shadow effect.

How to use

HTML structure

The HTML structure of the page bar is as follows: Use the <section> element to wrap a set of unordered lists.

<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 Styles

In CSS styles, you first set the basic style for the paging button and the currently activated button.

. 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= ' #3579d6 ', endcolorstr= ' #1b559d ', 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 (   (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= ' #00ffffff ', endcolorstr= ' #d6d6d6 ', GradientType =0);}

The

Then sets the paging button to the mouse-over style individually.

. 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= ' #3579d6 ', endcolorstr= '#1b559d ', 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 (   (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= ' #00ffffff ', endcolorstr= ' #c4c4c4 ', GradientType =0); }

The

First, last, previous, and Next buttons animate the transition effect for width,text-indent,letter-spacing 3 properties. And when the mouse is over the Write button, the values of these properties are modified accordingly.

. archive-pages first A,.archive-pages. Previous a,.archive-pages. Next A,.archive-pages 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;}

The full pagination style code can be see the style.css file for the downloaded file.

The above is pure CSS3 with transition animation effect of the page bar UI design effect content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

