hover悬停放大的翻页效果
来源：52css 时间：2008-05-19 12:20:00
今天我们继续向大家介绍一款翻页效果的制作。当鼠标移动到链接上时，翻页的链接区除了有悬停效果，还会放大。这样的效果具有很强烈的效果。大家适当美化即可作为自己的CSS布局资料了。
首先看XHTML代码：
<ul id="nav">
<li><a href="#">«</a></li>
<li><a href="#">1</a></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><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">»</a></li>
</ul>
用无序列表来实现内容，当然，您也可以用段落p以及结合a标签来定义，根据你的页面结构进行选择即可。
看下面的CSS代码：
#nav {
list-style: none;
display: inline;
}
#nav li {
display: inline;
margin-right: 5px;
float: left;
height: 20px;
width: 20px;
}
#nav a {
color: #03c;
text-decoration: none;
display: block;
font-size: 14px;
font-family: Geneva, Arial, Helvetica, sans-serif;
border: 1px solid #999;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
}
#nav li a:hover {
font-size: 24px;
line-height: 30px;
height: 30px;
width: 30px;
position: absolute;
z-index: 10;
margin: -5px 0 0 -5px;
font-weight: bold;
color: #c00;
border: 1px dotted #666666;
background: #EEE;
}
代码相对简单，不再一一详解。大家可以对照52CSS.com的相关教程进行学习。
看最终的运行效果：
标签：hover,放大,鼠标,效果
0
投稿猜你喜欢
Python实战之OpenCV实现猫脸检测
2021-02-07 16:56:24
Python打包文件夹的方法小结(zip,tar,tar.gz等)
2022-01-14 17:40:55
Python股票数据可视化代码详解
2021-11-29 15:48:47
解决MySQL Varchar 类型尾部空格的问题
2024-01-25 15:31:28
python3将变量输入的简单实例
2022-11-24 13:52:22
Python+OpenCV图像处理——图像二值化的实现
2021-05-15 04:39:03
Python利用matplotlib做图中图及次坐标轴的实例
2022-01-06 18:14:56
SQL Server的复制功能
2024-01-16 19:40:27
python基于paramiko库远程执行 SSH 命令,实现 sftp 下载文件
2022-11-09 23:31:31
WEB2.0网页制作标准教程（12）XHTML校验及常见错误
2008-02-19 19:59:00
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2021-09-21 11:11:33
PHP判断密码强度的方法详解
2023-06-14 03:00:08
python 读取yaml文件的两种方法(在unittest中使用)
2021-04-20 17:38:30
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2024-01-28 06:05:02
Python 的描述符 descriptor详解
2021-03-04 21:14:17
JS+CSS实现仿雅虎另类滑动门切换效果
2024-04-17 10:34:55
php对数字进行万、亿单位的转化
2023-06-24 08:34:32
特殊字符的json序列化总结大全
2023-12-04 00:36:58
详解用Python实现自动化监控远程服务器
2021-02-14 15:50:57
python插入排序算法的实现代码
2021-09-11 15:36:15