간단한 튜토리얼
이것은 전환 애니메이션 효과를 갖춘 매우 멋진 순수 CSS3 페이징 바 UI 디자인 효과입니다. 이 페이징 막대의 홈 페이지, 마지막 페이지, 이전 페이지 및 다음 페이지 버튼은 마우스가 그 위로 미끄러질 때 매우 부드럽고 늘어나는 애니메이션 효과를 갖습니다. 그리고 전체 페이지 스트립에는 매우 아름다운 그림자 효과가 있습니다.
사용법
HTML 구조
이 페이징 막대의 HTML 구조는 다음과 같습니다. 순서가 지정되지 않은 목록을 래핑하려면 2f8332c8dcfd5c7dec030a070bf652c3 요소를 사용하세요.
<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='#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(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='#00ffffff', endColorstr='#d6d6d6',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='#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(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='#00ffffff', endColorstr='#c4c4c4',GradientType=0 ); }
홈 페이지, 마지막 페이지, 이전 페이지, 다음 페이지 버튼에 너비, 텍스트 들여쓰기, 문자 간격의 세 가지 속성에 대한 애니메이션 전환 효과를 설정합니다. 그리고 이 버튼 위로 마우스를 슬라이드하면 해당 속성의 값이 그에 따라 수정됩니다.
.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)를 주목하세요!