css悬停效果
In today’s tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I especially enjoy seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. And because the circle is such a special shape, we are going to create some special hover effects for it!
在今天的教程中，我们将对圆上的悬停效果进行实验。 由于我们具有border radius属性，因此我们可以创建圆形，并且圆形在网站上作为设计元素的使用频率越来越高。 我特别喜欢看到的一种用法是圆形缩略图，它看起来比通常的矩形有趣得多。 由于圆是一个特殊的形状，因此我们将为其创建一些特殊的悬停效果！
We will omit vendor prefixes in this tutorial. But you’ll of course find them in the files.
在本教程中，我们将省略供应商前缀。 但是，您当然会在文件中找到它们。
So, let’s get started!
所以，让我们开始吧！
HTML (The HTML)
For most of the examples, we’ll be using the following structure:
对于大多数示例，我们将使用以下结构：
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<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-2">
<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-3">
<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>
Although we could use images here, we’ll give ourselves a bit more freedom by using background images instead. We’ll define them in the classes starting with “ch-img-“. Additionally, we’ll have a division for the description of the item with a title.
尽管我们可以在此处使用图像，但是通过使用背景图像，我们将给自己更多自由。 我们将在以“ ch-img-”开头的类中定义它们。 此外，我们将对带有标题的项目的描述进行划分。
Now, let’s make some hover effects!
现在，让我们做一些悬停效果！
CSS (The CSS)
Let’s define some common style for the list and the list items:
让我们为列表和列表项定义一些通用样式：
.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;
}
We can center the list items by using display inline-block and setting the text-align property of its parent to center. The clearfix hack is by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/
我们可以使用display inline-block并将其父项的text-align属性设置为center来使列表项居中。 clearfix hack是由Nicolas Gallagher制作的：http://nicolasgallagher.com/micro-clearfix-hack/
Some of the examples will have a different structure but we’ll look into that for each example in more detail.
一些示例将具有不同的结构，但我们将针对每个示例进行更详细的研究。
例子1 (Example 1)
The first example is going to reveal the description by scaling it up and we will also animate the inset box shadow of the item itself. So let’s position the item and set a nice, bif inset box shadow and a transition:
第一个示例将通过按比例放大显示说明，我们还将为项目本身的插入框阴影设置动画。 因此，让我们放置项目并设置一个漂亮的bif插入框阴影和一个过渡：
.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;
}
As you notices before, we’ve given two classes to the item (not the list item but its child division): one is ct-item and the other one will be used to define a specific background image:
正如您之前注意到的，我们为该项目提供了两个类(不是列表项目，而是其子类)：一个是ct-item，另一个是用于定义特定的背景图片：
.ch-img-1 {
background-image: url(../images/1.jpg);
}
.ch-img-2 {
background-image: url(../images/2.jpg);
}
.ch-img-3 {
background-image: url(../images/3.jpg);
}
The description element will be positioned absolutely and we’ll give it a semi-transparent background by setting an RGBA value. It’s opacity is going to be 0 and we’ll scale it down to 0, too:
description元素将绝对定位，我们将通过设置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);
}
The title of the item will have some fitting paddings and margins and a smooth text shadow:
该项目的标题将具有一些合适的填充和边距以及平滑的文本阴影：
.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);
}
The paragraph element has 0 opacity and a transition (we want to fade it in on hover but with a delay):
段落元素具有0的不透明度和过渡效果(我们希望在悬停时使其淡入，但要有延迟)：
.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;
}
The link will be in uppercase letters and we’ll make the hover color yellow:
链接将使用大写字母，我们将鼠标悬停颜色设置为黄色：
.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);
}
And now, the interesting hover action! The item will animate its box shadow’s spread radius from 16px to 1px:
现在，有趣的悬停动作！ 该项目将为其框阴影的展开半径设置从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);
}
The description will fade in and scale up to 1:
说明会逐渐淡出，并按比例放大至1：
.ch-item:hover .ch-info {
transform: scale(1);
opacity: 1;
}
And the paragraph of the description will just fade in (with a delay):
并且描述的段落将淡入(有延迟)：
.ch-item:hover .ch-info p {
opacity: 1;
}
And that’s the first example! Let’s take a look at the next one.
那是第一个例子！ 让我们看下一个。
例子2 (Example 2)
The HTML structure in this example is the same as the first one.
此示例中HTML结构与第一个相同。
In this example we will use the box shadow of the item to fill our circle and serve as the background of the description. So, nothing special here, just the box shadow that has one more value line:
在此示例中，我们将使用项目的框阴影填充圆并用作描述的背景。 因此，这里没有什么特别的，只是具有另一条价值线的盒子阴影：
.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;
}
And the background-images:
和背景图片：
.ch-img-1 {
background-image: url(../images/4.jpg);
}
.ch-img-2 {
background-image: url(../images/5.jpg);
}
.ch-img-3 {
background-image: url(../images/6.jpg);
}
The description will be scaled down again:
说明将再次按比例缩小：
.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;
}
And let’s style the typographical elements:
让我们设置印刷元素的样式：
.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);
}
On hover we’ll animate the inset box shadow (the reddish one) to 110px spread radius. This will cover all the circle:
悬停时，我们将插入框阴影(带红色的阴影)设置为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);
}
And we’ll scale up the description and fade it in:
我们将按比例放大说明并使其淡入：
.ch-item:hover .ch-info {
opacity: 1;
transform: scale(1);
}
例子3(Example 3)
In this example, we’ll play with rotation. The structure will be a bit different from the first two examples since we need to add the thumbnail as a second divison. So the list item will look as follows:
在这个例子中，我们将旋转。 该结构与前两个示例有所不同，因为我们需要将缩略图添加为第二个分区。 因此，列表项将如下所示：
<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-1"></div>
</div>
</li>
The item division will be styled like before (with a subtle box shadow):
项目划分的样式将像以前一样(带有细微的框阴影)：
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
The thumbnail element will have a specific transform-origin (somewhere to the right middle) and a transition. This will be the element that we want to rotate down on hover so that it reveals the description element:
缩略图元素将具有特定的转换原点(在中间右侧的某个位置)和一个过渡。 这是我们要在悬停时向下旋转的元素，以便显示描述元素：
.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;
}
Using the pseudo-class :after we’ll create a little brass fastener with a radial gradient:
使用伪类：之后，我们将创建一个带有径向渐变的黄铜小紧固件：
.ch-thumb:after {
content: '';
width: 8px;
height: 8px;
position: absolute;
border-radius: 50%;
top: 40%;
left: 95%;
margin: -4px 0 0 -4px;
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);
}
Let’s define the background images for each thumb element:
让我们为每个thumb元素定义背景图像：
.ch-img-1 {
background-image: url(../images/7.jpg);
z-index: 12;
}
.ch-img-2 {
background-image: url(../images/8.jpg);
z-index: 11;
}
.ch-img-3 {
background-image: url(../images/9.jpg);
z-index: 10;
}
The desciption element will be styled as follows:
desciption元素的样式如下：
.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);
}
The typographical elements will be positioned and styled the following way:
印刷元素的定位和样式设置如下：
.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);
}
The anchor will be a little circle that should move in from the right on hover:
锚点将是一个小圆圈，在悬停时应从右侧移入：
.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);
}
Since we want the movement and opacity to happen with a delay, but the background hover transition without, we’ll separate the transitions.
由于我们希望移动和不透明延迟发生，而背景悬停过渡没有，因此我们将过渡分开。
On hover we’ll rotate the thumb and move/rotate the link element:
悬停时，我们将旋转拇指并移动/旋转link元素：
.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(-110deg);
}
.ch-item:hover .ch-info p a{
opacity: 1;
transform: translateX(0px) rotate(0deg);
}
例子4(Example 4)
The forth example will involve some 3D rotations. So, we need to adjust the structured in order to have a container for the perspective and a front and backface. So, the list items will look as follows:
第四示例将涉及一些3D旋转。 因此，我们需要调整结构化结构，以便为透视图和正面和背面提供容器。 因此，列表项将如下所示：
<li>
<div class="ch-item ch-img-1">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1"></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>
As you can see, we’ll add the background image to the item division and also to the front part of the flipping division. The trick is to give the same background to the ch-info-wrap like the body. This will give the illusion as if our item has a hole.
如您所见，我们会将背景图像添加到项目分区以及翻转分区的前部。 诀窍是给ch-info-wrap像身体一样的背景。 这会给人一种错觉，好像我们的物品有一个洞。
The item will have the usual styling:
该项目将具有通常的样式：
.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 extra wrapper will be used for the perspective and we’ll also add a transition for the box shadow:
额外的包装将用于透视图，我们还将为框阴影添加过渡效果：
.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);
}
The ch-info div will need preserve-3d for the transform-style and we’ll give it a transition since this is the element we’ll rotate in 3d:
ch-info div需要3d作为转换样式，我们将对其进行过渡，因为这是我们将在3d中旋转的元素：
.ch-info{
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
transition: all 0.4s ease-in-out;
transform-style: preserve-3d;
}
The front and the backface will have the following common styles:
正面和背面将具有以下常见样式：
.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
backface-visibility: hidden;
}
The backface will be rotated so that we won’t see it initially:
背面将被旋转，因此我们最初不会看到它：
.ch-info .ch-info-back {
transform: rotate3d(0,1,0,180deg);
background: #000;
}
And again, the background images:
再次，背景图片：
.ch-img-1 {
background-image: url(../images/10.jpg);
}
.ch-img-2 {
background-image: url(../images/11.jpg);
}
.ch-img-3 {
background-image: url(../images/12.jpg);
}
…and the typographical elements:
……以及印刷元素：
.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);
}
On hover, we’ll change the box shadow of the wrapper and rotate the parent of the back and frontface so that we see the back:
悬停时，我们将更改包装器的盒子阴影并旋转背面和正面的父对象，以便看到背面：
.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,-180deg);
}
例子5(Example 5)
In this example we want to scale down the inner thumbnail part to 0 and make the description element appear by fading it in and scaling it down to 1. The structure of the fifth example will be the same as in the previous example.
在此示例中，我们希望将内部缩略图部分缩小为0，并通过将其缩小并缩小为1来显示描述元素。第五个示例的结构与上一个示例相同。
The item has the usual style:
该项目具有通常的样式：
.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 wrapper of the description div and the info div itself will have the following common style:
description div的包装器和info div本身将具有以下通用样式：
.ch-info-wrap,
.ch-info{
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
}
Let’s do again the “hole” trick by setting the same background of the body to the wrapper:
让我们通过将相同的主体背景设置到包装器来再次做“空洞”把戏：
.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);
}
The “front” and the “back” (it’s not really a front and backface anymore) common style:
“正面”和“背面”(不再是正面和背面)通用样式：
.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
}
The “front” will have a transition (it will scale down and disappear):
“正面”将发生过渡(它将缩小并消失)：
.ch-info .ch-info-front {
transition: all 0.6s ease-in-out;
}
And the back that holds the description will have 0 opacity initially and be scaled up to 1.5:
包含说明的背面最初将具有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;
}
We need to set the pointer-events to none since we don’t want the element to “block” everything else…remeber, it’s scaled up, we just can’t see it because of it’s opacity, but it’s still there.
我们需要将指针事件设置为none，因为我们不希望该元素“阻塞”其他所有内容……记住，它已经放大，由于它的不透明性我们只是看不到它，但是它仍然存在。
Background images and typographical elements as usual, just with some different colors:
照常使用不同颜色的背景图像和印刷元素：
.ch-img-1 {
background-image: url(../images/13.jpg);
}
.ch-img-2 {
background-image: url(../images/14.jpg);
}
.ch-img-3 {
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;
}
On hover we’ll scale down the inner thumbnail part to 0 and set the opacity to 0. This will make it disappear into the back.
悬停时，我们将内部缩略图部分缩小为0，并将不透明度设置为0。这将使其消失在背面。
.ch-item:hover .ch-info-front {
transform: scale(0);
opacity: 0;
}
The part that contains the description will be scaled down to 1 and faded in. We’ll also set the pointer event to whatever they were before because now we want to be able to click on the link:
包含描述的部分将缩小为1并逐渐淡入。我们还将指针事件设置为以前的状态，因为现在我们希望能够单击链接：
.ch-item:hover .ch-info-back {
transform: scale(1);
opacity: 1;
pointer-events: auto;
}
例子6(Example 6)
In this example we want to flip the inner thumbnail part down in order to reveal the description. The HTML will be the same like in the previous two examples.
在此示例中，我们想向下翻转内部缩略图部分以显示描述。 HTML将与前两个示例相同。
The item will be styled as before:
该项目将像以前一样设置样式：
.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:
包装器和description元素的通用样式：
.ch-info-wrap,
.ch-info{
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
transition: all 0.4s ease-in-out;
}
The wrapper will have perspective:
包装器将具有以下观点：
.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;
}
The info element will need the following transform style:
info元素将需要以下转换样式：
.ch-info {
transform-style: preserve-3d;
}
The front and the backface will have a transition. Note that this time we’ll not set the backface-visibility to hidden, since we want the back of the inner thumbnail part to show when we flip it down:
正面和背面将过渡。 请注意，这一次我们不会将backface-visibility设置为hidden，因为我们希望在向下翻转时显示内部缩略图部分的背面：
.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;
}
Let’s set the correct transform-origin so that we can open it down:
让我们设置正确的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);
}
We’ll set an RGBA value with 0 opacity to the background of the description part:
我们将在描述部分的背景中设置不透明度为0的RGBA值：
.ch-info .ch-info-back {
background: rgba(230,132,107,0);
}
And the usual style for the other elements:
其他元素的常用样式：
.ch-img-1 {
background-image: url(../images/16.jpg);
}
.ch-img-2 {
background-image: url(../images/17.jpg);
}
.ch-img-3 {
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);
}
On hover, we’ll rotate the front part and animate the box shadow slightly. The back part will fade in its background color:
悬停时，我们将旋转前部并为框阴影进行动画处理。 后面的部分将褪色为背景色：
.ch-item:hover .ch-info-front {
transform: rotate3d(1,0,0,-180deg);
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(Example 7)
The last example will act like a rotating cube where we reveal the description by rotating it in from the top back. Since we will rotate each of the faces, we won’t need an extra wrapper. So, our HTML will look as follows:
最后一个示例就像一个旋转的多维数据集，在其中我们通过从上到下旋转来显示描述。 由于我们将旋转每个面，因此不需要额外的包装器。 因此，我们HTML将如下所示：
<li>
<div class="ch-item">
<div class="ch-info">
<div class="ch-info-front ch-img-1"></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>
We’ll give a perspective value to the item itself:
我们将为项目本身提供透视值：
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
perspective: 900px;
}
The element with the class ch-info will need the preserve-3d:
带有ch-info类的元素将需要3-d：
.ch-info{
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
The front and backface will have a transition and the transform origin will be set to 50% 0%:
正面和背面将进行过渡，并且变换原点将设置为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%;
}
Let’s set a nice inset box shadow to the front part:
让我们在前端设置一个漂亮的插入框阴影：
.ch-info .ch-info-front {
box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);
}
The backface will be rotated initially in order to appear as the down face of a cube:
背面将首先旋转，以显示为立方体的背面：
.ch-info .ch-info-back {
transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
background: #000;
opacity: 0;
}
And the usual style for the background images and text elements:
以及背景图片和文字元素的常用样式：
.ch-img-1 {
background-image: url(../images/19.jpg);
}
.ch-img-2 {
background-image: url(../images/20.jpg);
}
.ch-img-3 {
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);
}
We’ll use translate3d to move the front part on the Y axis of our 3d space and rotate3d to actually rotate it. We’ll also fade it out because we don’t want to see any part of it afterwards:
我们将使用translate3d在3d空间的Y轴上移动前部，然后使用rotate3d进行实际旋转。 我们也将其淡出，因为我们不想在之后看到它的任何部分：
.ch-item:hover .ch-info-front {
transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
opacity: 0;
}
The backface will be rotated “back” to 0 degrees (remember, initially it was rotated downwards):
背面将“向后”旋转到0度(请记住，最初它是向下旋转的)：
.ch-item:hover .ch-info-back {
transform: rotate3d(1,0,0,0deg);
opacity: 1;
}
And that’s it! A whole bunch of hover effects that allow for many different variations, just try it out and play with it!
就是这样！ 一堆悬停效果，允许有许多不同的变化，只需尝试一下就可以玩！
Hope you enjoyed these effects and find them inspiring!
希望您喜欢这些效果并发现它们鼓舞人心！
Credits: Featured image illustration from Arnel Baluyot’s Stay Foxy.
鸣谢： Arnel Baluyot的Stay Foxy中的特色图片。
翻译自: https://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/
css悬停效果
379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
