html图片悬停状态_用整洁的悬停状态建立响应式定价表

最新推荐文章于 2023-05-02 09:55:03 发布

daique1908

最新推荐文章于 2023-05-02 09:55:03 发布

阅读量243

点赞数

文章标签： css html css3 web html5

html图片悬停状态

在本教程中，我们将创建带有一些悬停效果的时尚定价表。我们将使用Lea Verou的Prefixfree脚本来保持CSS整洁，此外，我们还将使整个过程具有响应性，并在几个断点处改变布局。

标记

下图显示了我们将创建的标记的可视框架。如您所见，它不是使用表构建的。我们使用无序列表来最大程度地提高灵活性和响应速度。

HTML标记

首先，我们需要从一个空文件开始。这里非常重要的是视口元标记，该标记将允许所有设备正确解释我们的响应式布局。

<!DOCTYPE html>
<html lang="en" >
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

</body>
</html>

现在，我们可以从表标记（或更确切地说是列表标记）开始：

<ul class="pricing_table">
	<li>...</li>
	
	<li class="price_block">
		<h3>Basic</h3>
		<div class="price">
			<div class="price_figure">
				<span class="price_number">$9.99</span>
				<span class="price_tenure">per month</span>
			</div>
		</div>
		<ul class="features">
			<li>2GB Storage</li>
			<li>5 Clients</li>
			<li>10 Active Projects</li>
			<li>10 Colors</li>
			<li>Free Goodies</li>
			<li>24/7 Email support</li>
		</ul>
		<div class="footer">
			<a href="#" class="action_button">Buy Now</a>
		</div>
	</li>
	
	<li>...</li>
	<li>...</li>
</ul>

<script src="prefixfree.min.js" type="text/javascript"></script>

在最底部，我们包含了prefixfree （在</body>标记之前），这使我们可以在任何地方使用未添加前缀CSS属性。它在后台运行，仅在需要时将当前浏览器的前缀添加到任何CSS代码中。

款式

整理好标记后，让我们看一下添加一些样式。我将在文档头的<style>标记中进行此操作，但您可以根据需要使用单独的样式表。

1.基本样式

@import url(http://fonts.googleapis.com/css?family=Ubuntu);

* {
	margin: 0; 
	padding: 0;
}
		
body {
	font-family: Ubuntu, arial, verdana;
}

首先，我们应用基本CSS重置并使用自定义字体'Ubuntu'，该字体已从Google Fonts中提取。

2.定价表和价格块

.pricing_table {
	line-height: 150%; 
	font-size: 12px; 
	margin: 0 auto; 
	width: 75%; 
	max-width: 800px; 
	padding-top: 10px;
	margin-top: 100px;
}

.price_block {
	width: 100%; 
	color: #fff; 
	float: left; 
	list-style-type: none; 
	transition: all 0.25s; 
	position: relative; 
	box-sizing: border-box;
	
	margin-bottom: 10px; 
	border-bottom: 1px solid transparent; 
}

.pricing_table的宽度保持为75％，但限制为800px，因此在宽屏幕上不会占用大量空间。

我们首先要处理的是移动设备，因此.price_block默认情况下为100％宽，以覆盖整个可用宽度。稍后，我们将使用媒体查询在更大的屏幕上水平地容纳更多块。

当用户在较小的屏幕上查看定价表时， .pricing_block的10px底边距会起作用 ，尤其是当某些定价块掉落并相互堆叠时。它旨在补偿应用于下面堆叠的定价块的.price_title的负10px顶部保证金。您将在下一节中详细了解10px负边距。

.pricing_block的1px透明边框创建了一个装订线，有助于分隔不同的内容块。

.price_block也设置为具有position: relative; 因此，将框阴影应用于悬停效果时，可以在悬停的块上使用z-index，以使其阴影出现在附近的元素上方。

3.价格上涨

.pricing_table h3 {
	text-transform: uppercase; 
	padding: 5px 0; 
	background: #333; 
	margin: -10px 0 1px 0;
}

价目表的最高边际利润为-10px。这会导致.price_block的内容向上移动，以便将它们显示在阴影上方，从而给人以亮光的感觉。

4.价格标签

现在，用于实际显示定价详细信息的部分。

.price {
	display: table; 
	background: #444; 
	width: 100%; 
	height: 70px; 
}
.price_figure {
	font-size: 24px; 
	text-transform: uppercase; 
	vertical-align: middle; 
	display: table-cell;
}
.price_number {
	font-weight: bold; 
	display: block;
}
.price_tenure {
	font-size: 11px; 
}

需要注意的一点是，价格标签垂直居中对齐。对于可能没有任期的价格（例如，免费），这是必需的。

.price设置为具有display: table; 并将其直接子.price_figure设置为display: table-cell; vertical-align: middle; 达到效果。

.price_figure充当.price_number和.price_tenure的容器，因此它们可以垂直居中对齐为单个单元。

5.特点

.features {
	background: #DEF0F4; 
	color: #000;
}
.features li {
	padding: 8px 15px;
	border-bottom: 1px solid #ccc; 
	font-size: 11px; 
	list-style-type: none;
}

6.页脚和操作按钮

.footer {
	padding: 15px; 
	background: #DEF0F4;
}
.action_button {
	text-decoration: none; 
	color: #fff; 
	font-weight: bold; 
	border-radius: 5px; 
	background: linear-gradient(#666, #333); 
	padding: 5px 20px; 
	font-size: 11px; 
	text-transform: uppercase;
}

7.悬停效果

.price_block:hover {
	box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5); 
	transform: scale(1.04) translateY(-5px); 
	z-index: 1; 
	border-bottom: 0 none;
}
.price_block:hover .price {
	background:linear-gradient(#DB7224, #F9B84A); 
	box-shadow: inset 0 0 45px 1px #DB7224;
}
.price_block:hover h3 {
	background: #222;
}
.price_block:hover .action_button {
	background: linear-gradient(#F9B84A, #DB7224); 
}

悬停效果将涉及三个方面：

颜色更改 -.price和.action_button的背景颜色从深灰色更改为橙黄色渐变。此外， .price还具有嵌入的橙色阴影以增强色彩效果。
阴影 -基本的5px半透明阴影。
使用CSS3变换向上移动和缩放 -悬停的.price_block缩放到104％，并向上移动5px。

.price_table已经应用了CSS3过渡，这使悬停更改成为平滑的动画。

如果希望默认突出显示其中一个价格，也可以将这些悬停效果用作活动状态。您需要做的就是向价格块之一添加一个活动类，然后将鼠标悬停样式移动/复制到其中。

添加媒体查询

我们将采用一种简单的方法来使定价表响应。由于这些部分使用基于％的宽度，因此它们已经很流畅了，因此我们要做的就是控制在不同屏幕尺寸下可见的水平块的数量。

<480像素 -显示1个块（这是我们的默认设置）
480px-768px-显示2个区块
768px + -显示所有4个块

这些断点纯粹是根据此设计的视觉效果定义的。让我们在其他样式下添加媒体查询。

@media only screen and (min-width : 480px) and (max-width : 768px) {
	.price_block {width: 50%;}
	.price_block:nth-child(odd) {border-right: 1px solid transparent;}
	.price_block:nth-child(3) {clear: both;}
	
	.price_block:nth-child(odd):hover {border: 0 none;}
}
@media only screen and (min-width : 768px){
	.price_block {width: 25%;}
	.price_block {border-right: 1px solid transparent; border-bottom: 0 none;}
	.price_block:last-child {border-right: 0 none;}
	
	.price_block:hover {border: 0 none;}
}

对于480px-768px的视口范围，我们将每个定价块的宽度设为50％。这将有效地将它们堆叠成两行。 .price_block:nth-child(3) {clear: both;}确保即使在悬停状态改变了所有大小的情况下，第三个块也清除了前两个块。我们还在.price_block （奇数个）上设置了1px的右边框，以在左侧和右侧的价格块之间创建垂直装订线。

对于768像素及以上的像素，我们将每个块的宽度设置为25％，从而得到四行。除了最后一个价格块，我们还在所有价格块的右侧设置边框，以创建与上述相同的垂直装订线。