纯CSS3带过渡动画特效的分页条ui设计效果

黄舟

发布时间：2017-01-19 14:21:18

1965人浏览过

来源于php中文网

原创

简要教程

这是一款效果非常酷的纯CSS3带过渡动画特效的分页条ui设计效果。该分页条的首页、尾页、上一页和下一页按钮在鼠标滑过时，会带有非常好看的平滑拉伸动画效果。并且整个分页条带有很漂亮的阴影效果。

使用方法

HTML结构

该分页条的HTML结构如下：使用

元素来包裹一组无序列表。


  
    first page
    previous page
    1
    2
    3
    4
    5
    next page
    last page

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

然后分别设置分页按钮鼠标滑过时的样式。

立即学习“前端免费学习笔记（深入）”；

纯CSS3带过渡动画效果分页条代码

纯CSS3带过渡动画效果分页条代码，分页的一个过渡效果，企业网站或者商城网站都会使用到，php推荐下载！

下载

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

首页、尾页、上一页和下一页按钮上为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中文网（www.php.cn）！

如何在CSS中使用伪类:last-of-type控制最后类型元素_结合:last-of-type设置边框

css背景重复background-repeat控制技巧

如何使用CSS实现Flex容器布局_Flex容器属性详解与实战

css工具Animate.css实现动画效果

css引入方式与浏览器兼容性问题

相关专题

clawdbot ai使用教程保姆级clawdbot部署安装手册

Clawdbot是一个“有灵魂”的AI助手，可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等，并且可以接入用户常用的任何聊天APP，所有的操作均可通过WhatsApp、Telegram等平台完成，用户只需通过对话，就能操控设备自动执行各类任务。

2026.01.29

clawdbot龙虾机器人官网入口 clawdbot ai官方网站地址

clawdbot龙虾机器人官网入口:https://clawd.bot/,clawdbot ai是一个“有灵魂”的AI助手，可以帮用户清空收件箱、发送电子邮件、管理日历、办理航班值机等等，并且可以接入用户常用的任何聊天APP，所有的操作均可通过WhatsApp、Telegram等平台完成，用户只需通过对话，就能操控设备自动执行各类任务。

2026.01.29

Golang 网络安全与加密实战

本专题系统讲解 Golang 在网络安全与加密技术中的应用，包括对称加密与非对称加密（AES、RSA）、哈希与数字签名、JWT身份认证、SSL/TLS 安全通信、常见网络攻击防范（如SQL注入、XSS、CSRF）及其防护措施。通过实战案例，帮助学习者掌握如何使用 Go 语言保障网络通信的安全性，保护用户数据与隐私。

2026.01.29

俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总，涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

517

2026.01.28

包子漫画在线官方入口大全

本合集汇总了包子漫画2026最新官方在线观看入口，涵盖备用域名、正版无广告链接及多端适配地址，助你畅享12700+高清漫画资源。阅读专题下面的文章了解更多详细内容。

184

2026.01.28

ao3中文版官网地址大全

AO3最新中文版官网入口合集，汇总2026年主站及国内优化镜像链接，支持简体中文界面、无广告阅读与多设备同步。阅读专题下面的文章了解更多详细内容。

318

2026.01.28

php怎么写接口教程

本合集涵盖PHP接口开发基础、RESTful API设计、数据交互与安全处理等实用教程，助你快速掌握PHP接口编写技巧。阅读专题下面的文章了解更多详细内容。

2026.01.28

php中文乱码如何解决

本文整理了php中文乱码如何解决及解决方法,阅读节专题下面的文章了解更多详细内容。

2026.01.28

Java 消息队列与异步架构实战

本专题系统讲解 Java 在消息队列与异步系统架构中的核心应用，涵盖消息队列基本原理、Kafka 与 RabbitMQ 的使用场景对比、生产者与消费者模型、消息可靠性与顺序性保障、重复消费与幂等处理，以及在高并发系统中的异步解耦设计。通过实战案例，帮助学习者掌握使用 Java 构建高吞吐、高可靠异步消息系统的完整思路。

2026.01.28

热门下载

网站特效

网站源码

网站素材

前端模板