【CSS】滑动门技术 ( 借助 CSS 精灵技术实现 | 外部标签设置左半部分背景图片 | 内部标签设置右半部分背景图片 | 鼠标经过更换背景 | 代码示例 )

韩曙亮

发布于 2023-04-24 11:20:52

1.4K0

发布于 2023-04-24 11:20:52

文章被收录于专栏：韩曙亮的移动开发专栏

一、滑动门技术

1、滑动门技术借助 CSS 精灵技术实现

滑动门技术就是为文字设置背景 , 不管文字长度是多少 , 都可以根据文本长度自动伸缩滑动 , 如下所示 :

文本较短时的样式 :

文本较长时的样式 :

滑动门技术是根据 CSS 精灵技术实现的 ;

滑动门的背景实际上是一个很长的元素 , 如下图所示 :

在下面的标签中 :

	<a href="#">
		<span>滑动门技术</span>
	</a>

将上述 <a> 标签设置为行内块元素 , 这样该标签的长度就取决于内部文本的长度 , 如果给标签设置背景 , 那么该背景只能显示一部分 ;

2、外部标签设置左半部分背景图片

为 <a> 标签设置背景图片为上述背景 , 该背景图片右侧就会出现截断 , 右侧的半圆肯定不完整 ; 其背景样式只有一截 , 如下图所示 :

		a {
			/* 行内块元素 宽度与内容相关 */
			display: inline-block;
			/* 高度与滑动门背景图片高度相同 */
			height: 33px;
			/* 文字垂直居中 */
			line-height: 33px;
			/* 设置背景 默认左对齐 */
			background: url(images/slid_door.png) no-repeat;
			margin: 10px;
			/* 左侧设置内边距 用于撑开盒子 */
			padding-left: 15px;
			/* 设置文本颜色 */
			color: #fff;
		}

3、内部标签设置右半部分背景图片

为 <span> 标签设置该背景 , 只是设置为右对齐 , 由于 <a> 标签设置了左边距 , span 中的背景不能充满整个 <a> 标签 , 因此 <a> 标签背景左侧的半圆保留了下来 , 显示剩余的背景如下图所示 :

		/* span 标签设置滑动门右侧 */
		a span {
			/* 设置为行内块元素 */
			display: inline-block;
			/* 内容高度 33 像素 滑动门图片为 33 像素 */
			height: 33px;
			/* 滑动门右侧需要右对齐*/
			background: url(images/slid_door.png) no-repeat right;
			/* 撑开右边的盒子 */
			padding-right: 15px;
		}

4、鼠标经过时更换背景

如果鼠标经过滑动门时 , 要更换背景 , 要同时将两个背景图片同时更换 ;

		/* 鼠标经过更换背景 */
		a:hover,
		a:hover span {
			background-image: url(images/slid_door_hover.png);
		}

二、完整代码示例

代码示例 :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>滑动门技术</title>
	<style>
		body {
			background-color: #3A3A3A;
		}
		/* a 标签设置滑动门左侧 */
		a {
			/* 行内块元素 宽度与内容相关 */
			display: inline-block;
			/* 高度与滑动门背景图片高度相同 */
			height: 33px;
			/* 文字垂直居中 */
			line-height: 33px;
			/* 设置背景 默认左对齐 */
			background: url(images/slid_door.png) no-repeat;
			margin: 10px;
			/* 左侧设置内边距 用于撑开盒子 */
			padding-left: 15px;
			/* 设置文本颜色 */
			color: #fff;
		}
		
		/* span 标签设置滑动门右侧 */
		a span {
			/* 设置为行内块元素 */
			display: inline-block;
			/* 内容高度 33 像素 滑动门图片为 33 像素 */
			height: 33px;
			/* 滑动门右侧需要右对齐*/
			background: url(images/slid_door.png) no-repeat right;
			/* 撑开右边的盒子 */
			padding-right: 15px;
		}
		
		/* 鼠标经过更换背景 */
		a:hover,
		a:hover span {
			background-image: url(images/slid_door_hover.png);
		}
	</style>
</head>
<body>
	<a href="#">
		<span>滑动门技术</span>
	</a>
	<a href="#">
		<span>骐骥一跃, 不能十步; 驽马十驾, 功在不舍;</span>
	</a>
</body>
</html>

显示效果 :

鼠标经过时的样式 :

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-04-17，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度