应用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款式

让大家为目录和目录项界定1些普遍的款式:

.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下吧!

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