带过渡动画效果的CSS3分页

来源：互联网 2023-03-16 19:10:42 495

带过渡动画效果的CSS3分页

工具/原料

adobe dreamweaver

方法/步骤

新建html文档。

带过渡动画效果的CSS3分页

书写hmtl代码。

div class="wrapper">

section class="archive-pages">

ul>

li class="first">a href="#">first page/a>/li>

li class="previous">a href="#">previous page/a>/li>

li class="selected">1/li>

li>a href="#">2/a>/li>

li>a href="#">3/a>/li>

li>a href="#">4/a>/li>

li>a href="#" >5/a>/li>

li class="next">a href="#">next page/a>/li>

li class="last">a href="#">last page/a>/li>

/ul>

/div>

带过渡动画效果的CSS3分页

书写css代码。

body { background: #494A5F; color: #D5D6E2; font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo; }

.wrapper { width: 400px; min-height: 400px; margin: 100px auto; }

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

}

带过渡动画效果的CSS3分页

3该信息非法爬取自百度经验

书写css3特效代码。

.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 li a { cursor: pointer; line-height: 20px; display: block; padding: 5px; float: left; width: 18px; text-aling: center; }

.archive-pages { diaply: block; background-color: #f4f4f4; float: left; padding: 0px; margin: 0px; font-size: .8em; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; border: 1px solid silver; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }

.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 .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 a { text-decoration: none; }

.archive-pages .next a:after, .archive-pages .last a:after { content: " »"; }

.archive-pages .first a:before, .archive-pages .previous a:before { content: '« ' }

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

带过渡动画效果的CSS3分页