应用CSS Transitions完成圆形悬停实际效果的示例编

日期：2021-03-01 类型：科技新闻我要分享

关键词：在线网页制作，建网页，个人简介网页制作，简单网页，建立网页

本文详细介绍了

线上预览免费下载源代码

在今日的实例教程中，大家将在圆上实验悬停实际效果。自从有了border- radius特性，大家能够建立圆形样子，而且它们做为设计方案元素更常出現在网站中。我非常喜爱看到的1个主要用途是圆形缩略图，它看起来比一般的矩形框更趣味。由于圆是这般独特的样子，大家将为它造就1些独特的悬停实际效果！

大家将在本实例教程中省略访问器前缀。但你自然会在免费下载文档中寻找它们。

那末，让大家刚开始吧！

HTML构造

针对大多数数示例，大家将应用下列构造：

<ul class="ch-grid">
	<li>
		<div class="ch-item ch-img⑴">
			<div class="ch-info">
				<h3>Use what you have</h3>
				<p>by Angela Duncan <a href="http://drbl.in/eOPF">View on Dribbble</a></p>
			</div>
		</div>
	</li>
	<li>
		<div class="ch-item ch-img⑵">
			<div class="ch-info">
				<h3>Common Causes of Stains</h3>
				<p>by Antonio F. Mondragon <a href="http://drbl.in/eKMi">View on Dribbble</a></p>
			</div>
		</div>
	</li>
	<li>
		<div class="ch-item ch-img⑶">
			<div class="ch-info">
				<h3>Pink Lightning</h3>
				<p>by Charlie Wagers <a href="http://drbl.in/ekhp">View on Dribbble</a></p>
			</div>
		</div>
	</li>
</ul>

尽管大家能够在这里应用图象，但大家会根据应用情况图象来给自身更多的挑选。大家将在以“ch-img-”开始的类中界定它们。

如今，让大家做1些悬停实际效果吧！

CSS款式

.ch-grid {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}

.ch-grid:after,
.ch-item:before {
	content: '';
    display: table;
}

.ch-grid:after {
	clear: both;
}

.ch-grid li {
	width: 220px;
	height: 220px;
	display: inline-block;
	margin: 20px;
}

1些示例将具备不一样的构造，但大家将更详尽地科学研究每一个示例。

示例1

第1个事例是根据放缩来揭露叙述，大家还将为".ch-item"的内黑影设定动漫。因此让大家精准定位".ch-item"并设定1个好看的，内黑影和过渡：

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	cursor: default;
	box-shadow: 
		inset 0 0 0 16px rgba(255,255,255,0.6),
		0 1px 2px rgba(0,0,0,0.1);
	transition: all 0.4s ease-in-out;
}

正如您以前留意到的那样，大家早已为目录项出示了两个类：1个是ch-item，另外一个用于界定特殊的情况图象：

.ch-img⑴ { 
	background-image: url(../images/1.jpg);
}

.ch-img⑵ { 
	background-image: url(../images/2.jpg);
}

.ch-img⑶ { 
	background-image: url(../images/3.jpg);
}

".ch-info"将设定为肯定精准定位，大家将根据设定RGBA值为其出示半全透明情况。它的不全透明度将设定为0，大家也将它变小到0：

.ch-info {
	position: absolute;
	background: rgba(63,147,147, 0.8);
	width: inherit;
	height: inherit;
	border-radius: 50%;
	overflow: hidden;
	opacity: 0;
	transition: all 0.4s ease-in-out;
	transform: scale(0);
}

题目将具备1些padding和margin和光滑的文字黑影：

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 22px;
	margin: 0 30px;
	padding: 45px 0 0 0;
	height: 140px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

p元素的不全透明度为0和1个过渡（大家期待在悬停时将其淡入但有延迟时间時间）：

.ch-info p {
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
	opacity: 0;
	transition: all 1s ease-in-out 0.4s;
}

连接将应用大写字母，大家将悬停色调设定为黄色：

.ch-info p a {
	display: block;
	color: rgba(255,255,255,0.7);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
	color: rgba(255,242,34, 0.8);
}

如今，趣味的悬停姿势！ ".ch-item"的内黑影的规格从16px设定为1px：

.ch-item:hover {
	box-shadow: 
		inset 0 0 0 1px rgba(255,255,255,0.1),
		0 1px 2px rgba(0,0,0,0.1);
}

".ch-info"将淡入并放缩到1：

.ch-item:hover .ch-info {
	transform: scale(1);
	opacity: 1;
}

叙述的段落p可能淡入（延迟时间）：

.ch-item:hover .ch-info p {
	opacity: 1;
}

这是第1个事例！大家看来看下1个。

示例2

此示例中的HTML构造与第1个中的HTML构造同样。

在这个事例中，大家将应用".ch-item"的黑影来填充大家的圆并做为叙述的情况。因此，这里没甚么非常的，只是多了1个黑影值：

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	cursor: default;
	box-shadow: 
		inset 0 0 0 0 rgba(200,95,66, 0.4),
		inset 0 0 0 16px rgba(255,255,255,0.6),
		0 1px 2px rgba(0,0,0,0.1);
	transition: all 0.4s ease-in-out;
}

情况图象：

.ch-img⑴ { 
	background-image: url(../images/4.jpg);
}

.ch-img⑵ { 
	background-image: url(../images/5.jpg);
}

.ch-img⑶ { 
	background-image: url(../images/6.jpg);
}

".ch-info"将再度放缩：

.ch-info {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	opacity: 0;
	transition: all 0.4s ease-in-out;
	transform: scale(0);
	backface-visibility: hidden;
}

让大家设计方案文字元素的设计风格：

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	position: relative;
	letter-spacing: 2px;
	font-size: 22px;
	margin: 0 30px;
	padding: 65px 0 0 0;
	height: 110px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
	display: block;
	color: rgba(255,255,255,0.7);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
	color: rgba(255,242,34, 0.8);
}

在悬停时，大家会将内黑影（偏红的黑影）设定为110px进行半径。这将涵盖全部的圆：

.ch-item:hover {
	box-shadow: 
		inset 0 0 0 110px rgba(200,95,66, 0.4),
		inset 0 0 0 16px rgba(255,255,255,0.8),
		0 1px 2px rgba(0,0,0,0.1);
}

大家将放缩".ch-info"并淡化它：

.ch-item:hover .ch-info {
	opacity: 1;
	transform: scale(1);	
}

示例3

在这个事例中，大家将应用转动。构造将与前两个示例略有不一样，由于大家必须将".ch-thumb"加上为第2个分区。因此目录项看起来以下：

<li>
	<div class="ch-item">	
		<div class="ch-info">
			<h3>Music poster</h3>
			<p>by Jonathan Quintin <a href="http://drbl.in/eGjw">View on Dribbble</a></p>
		</div>
		<div class="ch-thumb ch-img⑴"></div>
	</div>
</li>

".ch-item"的款式将与以前1样（带有彼此之间的黑影）：

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	cursor: default;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

".ch-thumb"元素将具备特殊的转换原点（坐落于右正中间的某个部位）和过渡。这将是大家要想在悬停时向下转动的元素，便于它显示信息".ch-info"元素：

.ch-thumb {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	position: absolute;
	box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
	transform-origin: 95% 40%;
	transition: all 0.3s ease-in-out;
}

应用伪类：建立1个带有轴向渐变色的小黄铜紧固件：

.ch-thumb:after {
	content: '';
	width: 8px;
	height: 8px;
	position: absolute;
	border-radius: 50%;
	top: 40%;
	left: 95%;
	margin: ⑷px 0 0 ⑷px;
	background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
	box-shadow: 0 0 1px rgba(255,255,255,0.9);
}

让大家为每一个".ch-thumb"元素界定情况图象：

.ch-img⑴ { 
	background-image: url(../images/7.jpg);
	z-index: 12;
}

.ch-img⑵ { 
	background-image: url(../images/8.jpg);
	z-index: 11;
}

.ch-img⑶ { 
	background-image: url(../images/9.jpg);
	z-index: 10;
}

".ch-info"元素的款式以下：

.ch-info {
	position: absolute;
	width: inherit;
	height: inherit;
	border-radius: 50%;
	overflow: hidden;
	background: #c9512e url(../images/noise.png);
	box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}

文字元素将按下列方法精准定位和设定款式：

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	position: relative;
	letter-spacing: 2px;
	font-size: 18px;
	margin: 0 60px;
	padding: 22px 0 0 0;
	height: 85px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
}

连接将是1个小圆圈，应当在悬停时从右边移入：

.ch-info p a {
	display: block;
	color: #333;
	width: 80px;
	height: 80px;
	background: rgba(255,255,255,0.3);
	border-radius: 50%;
	color: #fff;
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 24px;
	margin: 7px auto 0;
	font-family: 'Open Sans', Arial, sans-serif;
	opacity: 0;
	transition: 
		transform 0.3s ease-in-out 0.2s,
		opacity 0.3s ease-in-out 0.2s,
		background 0.2s linear 0s;
	transform: translateX(60px) rotate(90deg);
}

.ch-info p a:hover {
	background: rgba(255,255,255,0.5);
}

因为大家期待挪动和不全透明度产生延迟时间，但情况悬停沒有过渡，大家将分离出来过渡。

在悬停时，大家将转动".ch-thumb"并挪动/转动连接元素：

.ch-item:hover .ch-thumb {
	box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
	transform: rotate(⑴10deg);
}
.ch-item:hover .ch-info p a{
	opacity: 1;
	transform: translateX(0px) rotate(0deg);
}

示例4

第4个事例将涉及到1些三d转动。因而，大家必须调剂构造，便于有1个器皿用于透視和前面和后边。因而，目录项将以下所示：

<li>
	<div class="ch-item ch-img⑴">				
		<div class="ch-info-wrap">
			<div class="ch-info">
				<div class="ch-info-front ch-img⑴"></div>
				<div class="ch-info-back">
					<h3>Bears Type</h3>
					<p>by Josh Schott <a href="http://drbl.in/ewUW">View on Dribbble</a></p>
				</div>	
			</div>
		</div>
	</div>
</li>

如您所见，大家将情况图象加上到".ch-item"和".ch-info-front"。技巧是给".ch-info-wrap"出示同样的情况。

这将造成出现幻觉，仿佛大家的".ch-item"有1个洞。

".ch-item"将具备下列的款式：

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	cursor: default;
}

".ch-info-wrap"将有透視特性，大家还将加上黑影的过渡：

.ch-info-wrap{
	position: absolute;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	perspective: 800px;
	transition: all 0.4s ease-in-out;
	top: 20px;
	left: 20px;
	background: #f9f9f9 url(../images/bg.jpg);
	box-shadow: 
		0 0 0 20px rgba(255,255,255,0.2), 
		inset 0 0 3px rgba(115,114, 23, 0.8);

}

".ch-info"将必须preserve⑶d值用于转换款式，大家将给它1个过渡，由于这是大家将在3d中转动的元素：

.ch-info{
	position: absolute;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	transition: all 0.4s ease-in-out;
	transform-style: preserve⑶d;
}

正面和反面将具备下列普遍款式：

.ch-info > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	backface-visibility: hidden;
}

反面将转动，便于大家刚开始不容易看到它：

.ch-info .ch-info-back {
	transform: rotate3d(0,1,0,180deg);
	background: #000;
}

再度，情况照片：

.ch-img⑴ { 
	background-image: url(../images/10.jpg);
}

.ch-img⑵ { 
	background-image: url(../images/11.jpg);
}

.ch-img⑶ { 
	background-image: url(../images/12.jpg);
}

...和文字元素：

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
	margin: 0 15px;
	padding: 40px 0 0 0;
	height: 90px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
	display: block;
	color: rgba(255,255,255,0.7);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
	color: rgba(255,242,34, 0.8);
}

在悬停时，大家将变更".ch-info-wrap"的黑影并转动".ch-info"，便于大家看到反面：

.ch-item:hover .ch-info-wrap {
	box-shadow: 
		0 0 0 0 rgba(255,255,255,0.8), 
		inset 0 0 3px rgba(115,114, 23, 0.8);
}

.ch-item:hover .ch-info {
	transform: rotate3d(0,1,0,⑴80deg);
}

示例5

在此示例中，大家期待将".ch-thumb"变小为0，并根据将其淡入并将其变小为1来显示信息".ch-info"。第5示例的构造与前1示例中的同样。

该".ch-item"具备下列的设计风格：

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	cursor: default;
}

".ch-info-wrap"和".ch-info"将具备下列普遍款式：

.ch-info-wrap, 
.ch-info{
	position: absolute;
	width: 180px;
	height: 180px;
	border-radius: 50%;
}

让大家根据将同样的情况设定给".ch-info-wrap"来再度实行“系统漏洞”技能：

.ch-info-wrap {
	top: 20px;
	left: 20px;
	background: #f9f9f9 url(../images/bg.jpg);
	box-shadow: 
		0 0 0 20px rgba(255,255,255,0.2), 
		inset 0 0 3px rgba(115,114, 23, 0.8);

}

普遍的款式是“前面”和“反面”（它已不是正面和反面）：

.ch-info > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
}

“前面”将有1个过渡（它会变小并消退）：

.ch-info .ch-info-front {
	transition: all 0.6s ease-in-out;
}

".ch-info-back"最开始将具备0不全透明度而且能够拓展到1.5：

.ch-info .ch-info-back {
	opacity: 0;
	background: #223e87;
	pointer-events: none;
	transform: scale(1.5);
	transition: all 0.4s ease-in-out 0.2s;
}

大家必须将pointer-events设定为none，由于大家不期待元素“堵塞”别的全部內容...记牢，它被变大，大家由于它的不全透明性而没法看到它，但它依然存在。

像以往1样的情况图象和文字元素，只是有1些不一样的色调：

.ch-img⑴ { 
	background-image: url(../images/13.jpg);
}

.ch-img⑵ { 
	background-image: url(../images/14.jpg);
}

.ch-img⑶ { 
	background-image: url(../images/15.jpg);
}

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 18px;
	margin: 0 15px;
	padding: 40px 0 0 0;
	height: 80px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	color: #fff;
	padding: 10px 5px 0;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
	display: block;
	color: #e7615e;
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
	color: #fff;
}

在悬停时，大家将变小".ch-info-front"一部分为0并将不全透明度设定为0.这将使其消退在后边。

.ch-item:hover .ch-info-front {
	transform: scale(0);
	opacity: 0;
}

".ch-info-back"将变小为1并淡入。大家还将pointer event恶性事件设定为auto，由于如今大家期待可以点击连接：

.ch-item:hover .ch-info-back {
	transform: scale(1);
	opacity: 1;
	pointer-events: auto;
}

示例6

在此示例中，大家期待向下旋转內部".ch-thumb"一部分以显示信息叙述。 HTML将与前两个示例中的同样。

".ch-item"将按之前的款式设定：

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	cursor: default;
}

The common style of the wrapper and the description element:

".ch-info-wrap", ".ch-info"元素的通用性款式：

.ch-info-wrap, 
.ch-info{
	position: absolute;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	transition: all 0.4s ease-in-out;
}

".ch-info-wrap"将具备透視：

.ch-info-wrap {
	top: 20px;
	left: 20px;
	background: #f9f9f9 url(../images/bg.jpg);
	box-shadow: 
		0 0 0 20px rgba(255,255,255,0.2), 
		inset 0 0 3px rgba(115,114, 23, 0.8);
	perspective: 800px;
}

".ch-info"元素必须下列变换款式：

.ch-info {
	transform-style: preserve⑶d;
}

正面和反面将有1个过渡。请留意，这次大家不容易将backface-visibility设定为hidden，由于大家期待".ch-thumb"的反面在大家向下旋转时显示信息：

.ch-info > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	transition: all 0.6s ease-in-out;
}

让大家设定正确的transform-origin，便于大家能够开启它：

.ch-info .ch-info-front {
	transform-origin: 50% 100%;	
	z-index: 100;
	box-shadow: 
		inset 2px 1px 4px rgba(0,0,0,0.1);
}

大家将为".ch-info-back"设定1个0不全透明度的RGBA值：

.ch-info .ch-info-back {
	background: rgba(230,132,107,0);
}

和别的元素的一般设计风格：

.ch-img⑴ { 
	background-image: url(../images/16.jpg);
}

.ch-img⑵ { 
	background-image: url(../images/17.jpg);
}

.ch-img⑶ { 
	background-image: url(../images/18.jpg);
}

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 14px;
	margin: 0 25px;
	padding: 40px 0 0 0;
	height: 90px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
	display: block;
	color: rgba(255,255,255,0.7);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
	color: rgba(255,242,34, 0.8);
}

在悬停时，大家将转动前部并稍微为黑影设定动漫。后部将以其情况色调淡化：

.ch-item:hover .ch-info-front {
	transform: rotate3d(1,0,0,⑴80deg);
	box-shadow: 
		inset 0 0 5px rgba(255,255,255,0.2), 
		inset 0 0 3px rgba(0,0,0,0.3);
}

.ch-item:hover .ch-info-back {
	background: rgba(230,132,107,0.6);
}

示例7

最终1个示例将像转动立方体1样，大家根据从顶部向后转动它来显示信息叙述。因为大家将转动每一个面，因而大家不必须附加的父级元素。因而，大家的HTML将以下所示：

<li>
	<div class="ch-item">				
		<div class="ch-info">
			<div class="ch-info-front ch-img⑴"></div>
			<div class="ch-info-back">
				<h3>Mouse</h3>
				<p>by Alexander Shumihin <a href="http://drbl.in/eAoj">View on Dribbble</a></p>
			</div>	
		</div>
	</div>
</li>

大家将为".ch-item"出示透視值：

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	cursor: default;
	perspective: 900px;
}

".ch-info"将必须preserve⑶d值：

.ch-info{
	position: absolute;
	width: 100%;
	height: 100%;
	transform-style: preserve⑶d;
}

正面和反面将具备过渡，转换原点将设定为50％0％：

.ch-info > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	transition: all 0.4s linear;
	transform-origin: 50% 0%;
}

让大家为前脸部分设定1个好看的内黑影：

.ch-info .ch-info-front {
	box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);
}

反面将在最开始转动，以显示信息为立方体的下表层：

.ch-info .ch-info-back {
	transform: translate3d(0,0,⑵20px) rotate3d(1,0,0,90deg);
	background: #000;
	opacity: 0;
}

情况图象和文字元素的一般设计风格：

.ch-img⑴ { 
	background-image: url(../images/19.jpg);
}

.ch-img⑵ { 
	background-image: url(../images/20.jpg);
}

.ch-img⑶ { 
	background-image: url(../images/21.jpg);
}

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 24px;
	margin: 0 15px;
	padding: 60px 0 0 0;
	height: 110px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
	display: block;
	color: rgba(255,255,255,0.7);
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info p a:hover {
	color: rgba(255,242,34, 0.8);
}

大家将应用translate3d在3d室内空间的Y轴上挪动前部，并应用rotate3d具体转动它。大家也会淡出它，由于大家以后不期待看到它的任何一部分：

.ch-item:hover .ch-info-front {
	transform: translate3d(0,280px,0) rotate3d(1,0,0,⑼0deg);
	opacity: 0;
}

反面将“向后”转动到0度（记牢，最开始它向下转动）：

.ch-item:hover .ch-info-back {
	transform: rotate3d(1,0,0,0deg);
	opacity: 1;
}

便是这样！ 1大堆悬停实际效果，容许很多不一样的转变，快去尝试1下吧！

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

上一篇：应用CSS methodologies去完成控制模块化的方式示例返回下一篇：没有了