根据元素自定义属性获取元素
In today’s tutorial I want to show you some simple CSS tricks using data attributes and pseudo-elements. The aim is to create an image caption using only an anchor and an image as markup. We’ll be exploring how to create pseudo-elements from some data attribute values and use them in a hover effect or simply show them next to the image. Using (more) semantic markup is of course what you should be doing, especially for data that is important to be shown. But this is a mere exercise for learning how to use those properties and how to create some nice effects.
在今天的教程中，我想向您展示一些使用数据属性和伪元素的简单CSS技巧。 目的是仅使用锚点和图像作为标记来创建图像标题。 我们将探索如何从某些数据属性值创建伪元素，并将其用于悬停效果，或仅将其显示在图像旁边。 当然，应该使用(更多)语义标记，特别是对于要显示的重要数据而言。 但这仅仅是学习如何使用这些属性以及如何创建一些不错的效果的练习。
If you’d like to explore some fancy image caption hover effects with “real” markup, check out the Caption Hover Effects.
如果您想使用“真实”标记探索一些精美的图像标题悬停效果，请查看“标题悬停效果” 。
And if you are interested in some really cool animations and transitions with pseudo-elements, then check out this article by Marco Barria: Examples of Pseudo-Elements Animations and Transitions.
如果您对一些带有伪元素的非常酷的动画和过渡感兴趣，请查阅Marco Barria的这篇文章：伪元素动画和过渡的示例。
The demos feature some beautiful artwork by Jaime Martinez.
演示中将展示Jaime Martinez的一些精美艺术品。
Please note that we will be using some CSS features that might not work in older browsers. Animating pseudo-elements is still not supported by every browser.
请注意，我们将使用某些CSS功能，这些功能可能无法在旧版浏览器中使用。 并非每个浏览器都支持动画伪元素。
Let’s start with the markup. As already mentioned, we’ll be using an image that is wrapped within an anchor:
让我们从标记开始。 如前所述，我们将使用包裹在锚点中的图像：
<a
class="caption"
href="http://cargocollective.com/jaimemartinez/Illustration"
data-title="Smug Eagle"
data-description="I watched the four riders ...">
<img src="images/1.jpg" alt="Illustration of Smug Eagle">
</a>
As you can see, we define two data attributes, one for the title and one for the description. The values of these attributes will be used in the pseudo elements :before and :after.
如您所见，我们定义了两个数据属性，一个用于标题，一个用于描述。 这些属性的值将在伪元素:before和:after 。
Our first image caption will be a static one: we want to place the content of the data attributes right next to the image. For that we’ll first style the anchor and the image:
我们的第一个图像标题将是静态的：我们希望将数据属性的内容直接放置在图像旁边。 为此，我们将首先设置锚点和图像的样式：
.caption {
display: inline-block;
position: relative;
margin: 10px;
}
.caption img {
display: block;
max-width: 100%;
}
The anchor will be displayed as an inline-block element, allowing content to flow around it. We add some margin and set the position to relative. This is important because we’ll position the pseudo-elements absolutely and this will allow us to do so relatively to the anchor.
锚点将显示为行内块元素，从而使内容在其周围流动。 我们添加一些边距并将位置设置为relative 。 这很重要，因为我们将绝对定位伪元素，这将使我们能够相对于锚点进行定位。
Giving the image a max-width of 100% prepares it for a responsive environment.
将图像的最大宽度设置为100％，可为响应环境做好准备。
示例1：图像旁边的标题 (Example 1: Caption next to image)
Now, let’s make that first magic caption from the data-title and data-description values. We want both pseudo-elements to be absolutely positioned, on the right side next to the image. Let’s define some common styles for both:
现在，让我们根据数据标题和数据描述值制作第一个魔术标题。 我们希望两个伪元素都绝对定位在图像的右侧。 让我们为两者定义一些通用样式：
.caption::before,
.caption::after {
position: absolute;
left: 100%;
width: 90%;
margin: 0 0 0 10%;
font-weight: 300;
color: #89867e;
}
By setting the left to 100%, we put the pseudo-elements right next to the image. 90% is relative to the width of our anchor which again is defined by its content, the image.
通过将左侧设置为100％，我们将伪元素右侧放置在图像旁边。 90％相对于锚点的宽度，锚点的宽度再次由其内容(图像)定义。
Let’s set the content for each pseudo-element. We’ll get the value of the respective data attribute and add it to the content of the pseudo-element by using attr():
让我们为每个伪元素设置内容。 我们将获得相应数据属性的值，并通过使用attr()将其添加到伪元素的内容中：
.caption::before {
content: attr(data-title);
top: 0;
height: 25%;
padding: 5px 30px 15px 10px;
font-size: 40px;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
Besides some dimension styling, we’ll do the same with the :after pseudo-element:
除了某些尺寸样式外，我们还将对:after伪元素进行相同的操作：
.caption::after {
content: attr(data-description);
top: 25%;
padding: 20px 10px 0;
font-size: 18px;
}
Check out the result of what we just did:
查看我们刚做的结果：
示例2：悬停显示(不透明度)(Example 2: Show on hover (opacity))
Now, let’s make a caption that shows on hover by simply animating the opacity of the pseudo-elements. For that we’ll set them to an absolute position again. But this time, they will cover the image. Setting the opacity to 0 and a transition for the opacity, will allow us to animate it on hover:
现在，让我们通过简单地设置伪元素的不透明度来制作一个在悬停时显示的标题。 为此，我们将它们再次设置为绝对位置。 但是这次，它们将覆盖图像。 将不透明度设置为0并设置不透明度的过渡，将允许我们在悬停时对其进行动画处理：
.caption::before,
.caption::after {
opacity: 0;
position: absolute;
width: 100%;
color: #fff;
padding: 20px;
transition: opacity 0.3s;
}
The title will have a different background color than the description and we’ll restrict its height to 30% of the total height:
标题将具有与描述不同的背景色，我们将其高度限制为总高度的30％：
.caption::before {
content: attr(data-title);
top: 0;
height: 30%;
background: #a21f00;
font-size: 40px;
font-weight: 300;
}
For the description we will not simply add the data-description value, but we will prepend and append an opening and a closing quotation marks. For that we add the CSS values for the marks which we converted with a tool like the Entity Conversion Calculator by Evolution Technologies. The background will be slightly lighter to the one of the title and we will align the text to the right:
对于描述，我们不会简单地添加数据描述值，而是会在开头和结尾加上引号和结尾引号。 为此，我们为标记添加了CSS值，这些标记是使用Evolution Technologies的“实体转换计算器”之类的工具转换的。 背景将比标题之一浅，我们将文本向右对齐：
.caption::after {
content: '201C' attr(data-description) '201D';
top: 30%;
height: 70%;
background: #db2e00;
font-size: 16px;
text-align: right;
}
Since the title has a height of 30%, we will give the description the resting height of 70%.
由于标题的高度为30％，因此我们将说明静止高度为70％。
And finally, we set the opacity to 1 on hover:
最后，在悬停时将不透明度设置为1：
.caption:hover::before,
.caption:hover::after {
opacity: 1;
}
The result of this style is the following (hover over the image):
这种风格的结果如下(将鼠标悬停在图像上)：
示例3：在悬停时滑动(转换)(Example 3: Slide in on hover (transform))
In the next example we want to show the caption with a bit more fanciness. On hover, we want it to slide in the title from the top and the description from the bottom. We also want to make the image darker to simulate a shadow. For that, we need to define some more things for the caption anchor and image.
在下一个示例中，我们希望显示标题更加奇特。 悬停时，我们希望它从顶部滑入标题，从底部滑入说明。 我们还希望使图像更暗以模拟阴影。 为此，我们需要为字幕锚和图像定义更多内容。
The anchor’s overflow needs to be set to hidden because we need to position our title and description outside of it and we, of course, don’t want to see them. Additionally, we’ll give the anchor a black background so that we can darken the image when we reduce its opacity:
锚点的溢出需要设置为hidden因为我们需要将标题和描述置于其外部，并且我们当然也不想看到它们。 此外，我们将为锚点提供黑色背景，以便在降低不透明度时使图像变暗：
.caption {
display: inline-block;
position: relative;
margin: 10px;
overflow: hidden;
background: #000;
}
We’ll add a transition to the image and set the opacity to 0.5 once we hover. This will make the image appear darker, just as we want:
悬停后，我们将向图像添加过渡效果并将不透明度设置为0.5。 就像我们想要的那样，这将使图像显得更暗：
.caption img {
display: block;
max-width: 100%;
transition: opacity 0.3s ease-in-out;
}
.caption:hover img {
opacity: 0.5;
}
The common style of the ::before and ::after pseudo-elements is similar to the previous examples, just that we now give them an equal height and set the z-index to 1 so that they really stay on top of the image. The transition that we are adding will be for the transform. As you will see in the individual styles, we’ll position the pseudo-elements outside of the anchor rectangle by translating them on the Y-axis.
::before和::after伪元素的通用样式与前面的示例相似，只是我们现在为它们赋予了相等的高度并将z-index设置为1，以便它们真正位于图像的顶部。 我们添加的过渡将用于转换。 正如您将在单个样式中看到的那样，我们将通过在Y轴上平移伪元素，将其放置在锚点矩形之外。
.caption::after,
.caption::before {
position: absolute;
width: 100%;
height: 50%;
color: #fff;
z-index: 1;
transition: transform 0.3s ease-in-out;
}
Let’s set the background colors for the pseudo-elements and the transforms to move the title up and the description down:
让我们为伪元素和转换设置背景颜色，以将标题上移和描述下移：
.caption::after {
content: attr(data-title);
top: 0;
background: #0083ab;
font-size: 40px;
font-weight: 300;
padding: 30px;
transform: translateY(-100%);
}
.caption::before {
content: '...' attr(data-description) '...';
top: 50%;
background: #f27545;
font-size: 14px;
padding: 20px;
transform: translateY(100%);
}
And on hover, we simply set the transform to translateY(0%) so that they go to the position we defined with the tops:
在悬停时，我们只需将转换设置为translateY(0％)，以便它们转到我们定义的顶部位置：
.caption:hover::after,
.caption:hover::before {
transform: translateY(0%);
}
示例4：悬停时侧推(转换)(Example 4: Side push on hover (transform))
The last example that we want to do is a fancy “side push”. On hover, we want to move the image to the right while sliding in the pseudo-elements from the left, slightly shifted.
我们要做的最后一个示例是一个花哨的“侧推”。 悬停时，我们希望将图像向右移动，同时从左侧滑动伪元素(略微移动)。
Let’s again create the shadow effect by animating the background of the anchor from a semi-transparent black to transparent:
让我们通过将锚点的背景从半透明的黑色变为透明的动画来再次创建阴影效果：
.caption {
display: inline-block;
position: relative;
margin: 10px;
overflow: hidden;
background: rgba(0,0,0,0.2);
transition: background 0.3s ease-in-out;
}
.caption:hover {
background: rgba(0,0,0,0);
}
The image will move to the right when we hover. For that, we’ll use translateX:
当我们将鼠标悬停时，图像将向右移动。 为此，我们将使用translateX：
.caption img {
display: block;
max-width: 100%;
transition: transform 0.3s ease-in-out;
}
.caption:hover img {
transform: translateX(100%);
}
The pseudo-elements need to be beneath the anchor, so we’ll set a z-index of -1. The initial transform will set them to the left side:
伪元素必须位于锚点下方，因此我们将z-index设置为-1。 初始转换会将它们设置在左侧：
.caption::before,
.caption::after {
position: absolute;
width: 100%;
z-index: -1;
background: #cecece;
transform: translateX(-30%);
transition: transform 0.3s ease-in-out;
}
As before, we will add the respective content to the pseudo-elements and give them a height and some styles for the text:
和以前一样，我们将各个内容添加到伪元素中，并为它们赋予高度和文本样式：
.caption::before {
content: attr(data-title);
height: 30%;
color: #05b19a;
font-size: 40px;
font-weight: 300;
padding: 30px;
}
.caption::after {
content: '201C' attr(data-description) '201D';
top: 30%;
height: 70%;
color: #fff;
font-size: 14px;
padding: 20px 30px;
}
And on hover, we’ll simply set the translateX to 0:
在悬停时，我们只需将translateX设置为0：
.caption:hover::before,
.caption:hover::after {
transform: translateX(0%);
}
See the result of this last example:
请参阅最后一个示例的结果：
And that’s it! I hope you learned some new and interesting tricks, how to use pseudo-elements and how to give them the content of an attribute (think of others, not only custom data attributes) and how to animate them. Keep in mind that you should always add important content to the markup.
就是这样！ 我希望您学到了一些有趣的新技巧，如何使用伪元素，如何为它们提供属性的内容(不只是自定义数据属性，还可以考虑其他属性)以及如何对其进行动画处理。 请记住，您应该始终将重要内容添加到标记中。
You can view all examples in this demo or download the ZIP file.
Please let me know if you enjoyed this tutorial and if would like to see more topics explored. Drop us a line if you have something specific in mind.
如果您喜欢本教程，以及是否想探索更多主题，请告诉我。 如果您有特定的想法，请给我们留言。
翻译自: https://tympanus.net/codrops/2013/07/05/using-custom-data-attributes-and-pseudo-elements/
根据元素自定义属性获取元素
扫一扫
3491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
