三角灯箱 css
Today we want to show you how to create a neat lightbox effect using only CSS. The idea is to have some thumbnails that are clickable, and once clicked, the respective large image is shown. Using CSS transitions and animations, we can make the large image appear in a fancy way.
今天，我们想向您展示如何仅使用CSS创建整洁的灯箱效果。 这个想法是要有一些可单击的缩略图，一旦单击，就会显示相应的大图像。 使用CSS过渡和动画，我们可以使大图像以精美的方式出现。
With the help of the pseudo-class :target, we will be able to show the lightbox images and navigate through them.
借助伪类：target ，我们将能够显示灯箱图像并浏览它们。
The beautiful images are by Joanna Kustra and they are licensed under the Attribution-NonCommercial 3.0 Unported Creative Commons License.
精美图片由Joanna Kustra制作，并根据Attribution-NonCommercial 3.0 Unported Creative Commons License授权。
Please note that this will only work with browsers that support the :target pseudo class.
请注意，这仅适用于支持：target伪类的浏览器。
Let’s do it!
我们开始做吧！
标记 (The Markup)
We want to show a set of thumbnails, each one having a title that will appear on hover. When clicking on a thumbnail, we want to show a large version of the image in an overlay container that will make the background a bit more opaque. So, let’s use an unordered list where each list item will contain a thumbnail and a division for the overlay with the respective large version of the image:
我们想要显示一组缩略图，每个缩略图都有一个标题，该标题将显示在悬停上。 单击缩略图时，我们希望在覆盖容器中显示较大版本的图像，这会使背景更加不透明。 因此，让我们使用一个无序列表，其中每个列表项都将包含缩略图和图像各自大图的叠加层划分：
<ul class="lb-album">
<li>
<a href="#image-1">
<img src="images/thumbs/1.jpg" alt="image01">
<span>Pointe</span>
</a>
<div class="lb-overlay" id="image-1">
<img src="images/full/1.jpg" alt="image01" />
<div>
<h3>pointe <span>/point/</h3>
<p>Dance performed on the tips of the toes</p>
<a href="#image-10" class="lb-prev">Prev</a>
<a href="#image-2" class="lb-next">Next</a>
</div>
<a href="#page" class="lb-close">x Close</a>
</div>
</li>
<li>
<!-- ... -->
</li>
</ul>
The anchor for the thumbnail will point to the element with the id image-1 which is the division with the class lb-overlay. In order to navigate through the images, we will add two link elements that point to the previous and next (large) image. In order to “close” the lightbox, we will somply click on the link with the class lb-close which points to the element with the ID page which is our body.
缩略图的锚点将指向id为image-1的元素，该元素为lb-overlay类的划分。 为了浏览图像，我们将添加两个指向上一个和下一个(大)图像的链接元素。 为了“关闭”灯箱，我们将立即单击磅级为lb-close的链接，该链接指向具有ID页面的元素，即我们的身体。
Note that we only use a navigation in the last demo.
请注意，我们仅在上一个演示中使用导航。
Let’s beautify this naked markup.
让我们美化这个裸露的标记。
CSS (The CSS)
I’ll omit the vendor prefixes for some of the new properties here in order not to bloat the tutorial. You can, of course, find them in the download files.
我将在此处省略一些新属性的供应商前缀，以免使本教程肿。 您当然可以在下载文件中找到它们。
Let’s give some basic layout to our unordered list and the thumbnails:
让我们为无序列表和缩略图提供一些基本布局：
.lb-album{
width: 900px;
margin: 0 auto;
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
.lb-album li{
float: left;
margin: 5px;
position: relative;
}
.lb-album li > a,
.lb-album li > a img{
display: block;
}
.lb-album li > a{
width: 150px;
height: 150px;
position: relative;
padding: 10px;
background: #f1d2c2;
box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
border-radius: 4px;
}
The title for each thumbnail will be invisible and we’ll add a transitions for the opacity which will change to 1 once we hover over the thumbnail anchor. We’ll use a smooth radial gradient as background:
每个缩略图的标题都是不可见的，我们将为不透明度添加一个过渡，一旦将其悬停在缩略图锚点上，它将变为1。 我们将使用平滑的径向渐变作为背景：
.lb-album li > a span{
position: absolute;
width: 150px;
height: 150px;
top: 10px;
left: 10px;
text-align: center;
line-height: 150px;
color: rgba(27,54,81,0.8);
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
font-size: 24px;
opacity: 0;
background:
radial-gradient(
center,
ellipse cover,
rgba(255,255,255,0.56) 0%,
rgba(241,210,194,1) 100%
);
transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
opacity: 1;
}
The overlay will have the same radial gradient and we’ll set its position to fixed, with zero height and width:
叠加层将具有相同的径向渐变，我们将其位置设置为固定，高度和宽度为零：
.lb-overlay{
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
background:
radial-gradient(
center,
ellipse cover,
rgba(255,255,255,0.56) 0%,
rgba(241,210,194,1) 100%
);
}
Once we click on a thumbnail, we’ll cover the whole screen with the overlay, but first, let’s take a look at the children.
单击缩略图后，我们将使用叠加层覆盖整个屏幕，但首先让我们看一下子级。
Let’s style the division for the main title and the description:
让我们为主要标题和描述设置分隔样式：
.lb-overlay > div{
position: relative;
color: rgba(27,54,81,0.8);
width: 550px;
height: 80px;
margin: 40px auto 0px auto;
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
}
.lb-overlay div h3,
.lb-overlay div p{
padding: 0px 20px;
width: 200px;
height: 60px;
}
.lb-overlay div h3{
font-size: 36px;
float: left;
text-align: right;
border-right: 1px solid rgba(27,54,81,0.4);
}
.lb-overlay div h3 span,
.lb-overlay div p{
font-size: 16px;
font-family: Constantia, Palatino, serif;
font-style: italic;
}
.lb-overlay div h3 span{
display: block;
line-height: 6px;
}
.lb-overlay div p{
font-size: 14px;
text-align: left;
float: left;
width: 260px;
}
We’ll position the link element for closing the lightbox absolutely above the image:
我们将用于关闭灯箱的链接元素放置在图片上方的绝对位置：
.lb-overlay a.lb-close{
background: rgba(27,54,81,0.8);
z-index: 1001;
color: #fff;
position: absolute;
top: 43px;
left: 50%;
font-size: 15px;
line-height: 26px;
text-align: center;
width: 50px;
height: 23px;
overflow: hidden;
margin-left: -25px;
opacity: 0;
box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}
The image will have a maximum height of 100%. That’s one way of making the image somewhat reponsive and nicely fittin into the viewport (i.e our overlay). We’ll also add a transition for the opacity level. Once we “open” a large image, the opacity will get animated. We’ll see later how we can use an animation for the image.
图像的最大高度为100％。 这是使图像有些响应并且很好地适合视口(即我们的叠加层)的一种方法。 我们还将为不透明度级别添加一个过渡。 一旦我们“打开”大图像，不透明度就会变得生动起来。 稍后我们将看到如何为图像使用动画。
.lb-overlay img{
max-height: 100%;
position: relative;
opacity: 0;
box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
transition: opacity 0.5s linear;
}
Let’s style the navigation elements:
让我们设置导航元素的样式：
.lb-prev, .lb-next{
text-indent: -9000px;
position: absolute;
top: -32px;
width: 24px;
height: 25px;
left: 50%;
opacity: 0.8;
}
.lb-prev:hover, .lb-next:hover{
opacity: 1;
}
.lb-prev{
margin-left: -30px;
background: transparent url(../images/arrows.png) no-repeat top left;
}
.lb-next{
margin-left: 6px;
background: transparent url(../images/arrows.png) no-repeat top right;
}
When we click on a thumbnail anchor, it will point to the respective large version of the image which is in the division with the class lb-overlay. So, in order to address this element we can use the pseudo class :target. We’ll add a padding to the overlay and “stretch it” over the whole viewport by setting the width and height to auto (it’s actually not needed explicitely) and set the right and bottom to 0px. Remember, we’ve already set the top and left before.
当我们单击缩略图锚点时，它将指向图像的相应大版本，该大版本位于lb-overlay类中。 因此，为了解决这个问题，我们可以使用伪类：target 。 我们将填充添加到叠加层上，并通过将width和height设置为auto(实际上并不需要显式设置)，将其“拉伸”到整个视口，并将right和bottom设置为0px。 请记住，我们已经设置了顶部和左侧。
.lb-overlay:target {
width: auto;
height: auto;
bottom: 0px;
right: 0px;
padding: 80px 100px 120px 100px;
}
Now we will also set the opacity of the image and the closing link to 1. The image will fade in, because we’ve set a transition:
现在，我们还将图像的不透明度和关闭链接设置为1。由于我们已经设置了过渡，因此图像会逐渐淡入：
.lb-overlay:target img,
.lb-overlay:target a.lb-close{
opacity: 1;
}
And that’s all the style! Let’s take a look at the two alternatives that we are using in demo 1 and demo 2.
这就是所有样式！ 让我们看一下在演示1和演示2中使用的两种选择。
In the first demo we make the image appear by using an animation that scales it up and increases it’s opacity value:
在第一个演示中，我们通过使用放大图像并增加其不透明度值的动画来使图像出现：
.lb-overlay:target img {
animation: fadeInScale 1.2s ease-in-out;
}
@keyframes fadeInScale {
0% { transform: scale(0.6); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
In the second demo we’ll create the opposite effect, i.e. scale the image down:
在第二个演示中，我们将创建相反的效果，即按比例缩小图像：
.lb-overlay:target img {
animation: scaleDown 1.2s ease-in-out;
}
@-webkit-keyframes scaleDown {
0% { transform: scale(10,10); opacity: 0; }
100% { transform: scale(1,1); opacity: 1; }
}
演示版(Demos)
You will see that each browser performs quite differently when it comes to the transitions/animations. Adjusting duration, timing functions and delays, one can make the effects smoother, i.e. you can change the timing for Firefox only by changing the -moz- properties.
您会发现每种浏览器在过渡/动画方面的表现都大不相同。 调整持续时间，计时功能和延迟，可以使效果更平滑，即，仅可以通过更改-moz-属性来更改Firefox的计时。
And that’s it! I hope you enjoyed this tutorial and find it inspiring!
就是这样！ 希望您喜欢本教程并从中获得启发！
三角灯箱 css
扫一扫
499
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
