利用css的target选择器实现纯css相册

原创 2016年11月21日 12:29:32

在看CSS选择符的时候注意到一个特别有意思的选择符–:target,随后在http://benschwarz.github.io/gallery-css/发现利用该选择符可以做出如此漂亮的gallery,干净利落无需js代码(强迫症及完美主义必备),网站上有一套讲解教程,但是是付费的。今天把我实现的过程以及某些细节分享出来,供学习使用。

在开始之前强烈建议先看一下css选择器拾遗

我这里有一个在线预览点击这里
如果对你有帮助的话就给一颗星吧github代码

html模板

<div class="gallery">
    <div id="gallery-1" class="control-operator"></div>
    <div id="gallery-2" class="control-operator"></div>
    <div id="gallery-3" class="control-operator"></div>

    <figure class="item">
      <img src="./slide1.jpg" />
    </figure>

    <figure class="item">
      <img src="./slide2.jpg" />
    </figure>

    <figure class="item">
      <img src="slide3.jpg" />
    </figure>

    <div class="controls">
      <a href="#gallery-1" class="control-button"></a>
      <a href="#gallery-2" class="control-button"></a>
      <a href="#gallery-3" class="control-button"></a>
    </div>
</div>

制作画册的图片以及描述信息等将放在figure标签中;用于点击的切换不同slide的按钮以一个圆点的形式放在<div class="controls"></div>中,<a>标签中以一个圆点作为按钮;div.control-operator并不显示,作控制用,后面会解释。

这里以3张图为例,添加slide只需要将以上的html代码对应扩展就可以了。

第一步基本布局设置

首先做一些全局设置,去掉body,figure标签的默认边距:

body,figure {
    margin: 0;
}

设置img标签自动放缩:

img {
    max-width: 100%;
    height: auto;
}

接下来设置div.gallery及几个相关子元素的定位:

.gallery {
    position: relative;    
}

.gallery > .item {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
}

/* 设置包含<a>按钮的div块 */
.gallery > .controls {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

/* <a>按钮 */
.gallery .control-button {
    display: inline-block;
    margin: 0 .02em;
    font-size: 3em;
    text-align: center;
    text-decoration: none;
}

.gallery > .item:first-of-type {
    position: static;
}

.gallery > .control-operator {
    display: none;      
}

设置div.gallery为relative定位是为了让其子元素的absolute位置基于它自己。设置完以上属性,此时应该只能看到一张居中的图片,其余图片按顺序在下层被遮挡。

为什么要设置第一个figure.item定位为static

绝对定位意味着该元素将不复存在于正常的文档流中,如果div.gallery所有的子元素都绝对定位,div.gallery元素将无法被撑开,其高度将为0,设置其第一个figure.item子元素为static元素,意在撑开div.gallery,这样便于div.gallery中其他元素的显示,同时避免div.gallery后面的标签元素和div.gallery重叠。

第二步利用:target选择符控制图像的显示

为了让figure.item元素在没有被选中的时候消失,我们将其opacity属性设置为0,同时将第一个figure.item默认显示,修改添加以下代码:

.gallery > .item {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
}

.gallery > .item:first-of-type {
    position: static;
    opacity: 1;
}

将除了第一个figure.item的其他figure元素的opacity属性全部设为0,这样进入网页(未经过任何用户操作)时将看到第一幅图片。

精彩的部分

下面是非常经典的部分:当通过.contorl-button按钮将某对应id的<div class="control-operator"></div>选择为:target的时候,通过opacity属性设定某一figure.item显示,其余不显示:

.gallery > .control-operator:target ~ .item {
    opacity: 0;
}

.gallery > .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
    opacity: 1;
}
.gallery > .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
    opacity: 1;
}
.gallery > .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
    opacity: 1;
}

以上代码在某一.control-operator:target被选中时,将除了和自己序号相同的figure.item的opacity属性设为0,相同序号设为1。至此,点击网页中的<a class="control-button">•</a>按钮已经可以实现’翻页’效果了!代码十分简单,效果却非常好。

特别注意,如果你需要扩展为大于3张图片的时候,以上代码也需要对应扩展。

为什么要设置<div id="" class="control-operator"></div>

既然是通过:target设置figure.item元素的opacity属性,为什么不干脆让<a href="" class="control-button">•</a>直接去控制<figure>元素好了,为什么一定要设置一个并不显示的<div id="" class="control-operator"></div>标签呢?html模板设置成下面这样子岂不是更简洁?

  <div class="gallery">
    <figure class="item" id="gallery-1">
      <img src="./slide1.jpg" />
    </figure>

    <figure class="item" id="gallery-2">
      <img src="./slide2.jpg" />
    </figure>

    <figure class="item" id="gallery-3">
      <img src="slide3.jpg" />
    </figure>

    <div class="controls">
      <a href="#gallery-1" class="control-button"></a>
      <a href="#gallery-2" class="control-button"></a>
      <a href="#gallery-3" class="control-button"></a>
    </div>
  </div>

答案是不可以的,我们知道对于页内链接,如果有个链接指向index.html#gallery-1,在单击该链接后Web浏览器会自动跳转到该标签所在的位置,通常会向上或者向下滚动到该标签上部恰好出现在用户视野中。如果使用上面”简洁”版的代码,将会出现页面跳动的问题,每次在画册翻页的时候浏览器会滚动页面使figure.item上部刚好对齐在浏览器上部,带来不好的用户体验。不显示的<div id="" class="control-operator"></div>恰恰是为了解决这个问题而生的,十分巧妙。

让画面过渡更加自然

gallery的功能已经实现了,为了让画面过渡更加自然,我们使用css的transition实现精细的过渡效果。

添加<a>控制按钮的样式

首先不妨添加一下<a href="" class="control-button">•</a>的样式:

/* a 按钮的样式 */
.gallery .control-button {
  color: #ccc;
  color: rgba(255, 255, 255, 0.4);
}

.gallery .control-button:first-of-type {
  color: #whtie;
  color: rgba(255, 255, 255, 0.8);
}

.gallery .control-button:hover {
  color: white;
  color: rgba(255, 255, 255, 0.8);
}

默认设置第一个.control-button的颜色为rgba(255, 255, 255, .8)–被选定时更深的颜色。设置color: #ccc以及color: white是为了兼容不支持CSS3属性rgba的浏览器(ie8及以下)。

接下来在通过<a href="" class="control-button">•</a>选定某一:target的时候,将该<a>突出显示:

.gallery .control-operator:target ~ .controls .control-button {
  color: #ccc;
  color: rgba(255, 255, 255, 0.4);
}

/* :target情况下的hover */
.gallery .control-operator:target ~ .contorls .control-button:hover {
  color: white;
  color: rgba(255, 255, 255, 0.8);
}

.gallery .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1),
.gallery .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2),
.gallery .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3) {
  color: white;
  color: rgba(255, 255, 255, 0.8);
}

别忘了设置在:target情况下a按钮的hover样式

接下来利用transition属性实现渐变的过渡效果,在.gallery .control-button中添加以下代码:

.gallery .control-button {
    display: inline-block;
    margin: 0 .02em;
    font-size: 3em;
    text-align: center;
    text-decoration: none;
    -webkit-transition: color .1s;
    -o-transition: color .1s;
    transition: color .1s;
}

添加figure.item过渡效果

同理,在.gallery > .item中添加以下代码:

.gallery > .item {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
    -webkit-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}

这样在切换图片的时候会有0.5s的渐变,给人舒服的过渡。

其他

CSS3已经支持动画animation属性,你当然可以设置动画让它自动滚动播放,要特别注意动画播放的时机。

代码预览如下:

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <link rel="stylesheet" href="./gallery.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
</head>
<body>
  <div class="gallery">
    <div id="gallery-1" class="control-operator"></div>
    <div id="gallery-2" class="control-operator"></div>
    <div id="gallery-3" class="control-operator"></div>

    <figure class="item">
      <figcaption>Blue</figcaption>
      <img src="./slide1.jpg" />
    </figure>

    <figure class="item">
      <figcaption>Road</figcaption>
      <img src="./slide2.jpg" />
    </figure>

    <figure class="item">
      <figcaption>Snow</figcaption>
      <img src="slide3.jpg" />
    </figure>

    <div class="controls">
      <a href="#gallery-1" class="control-button"></a>
      <a href="#gallery-2" class="control-button"></a>
      <a href="#gallery-3" class="control-button"></a>
    </div>
  </div>

</body>
</html>

css

body, figure {
    margin: 0;
}

img {
    max-width: 100%;
    height: auto;
}

figcaption {
    display: block;
    font-weight: bold;
    padding: 1em 0;
}

.gallery {
    position: relative;
}

.gallery > .item {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: center;
    -webkit-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}

.gallery > .item:first-of-type {
    position: static;
    opacity: 1;
}

.gallery > .controls {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

.gallery > .control-operator {
    display: none;
}

.gallery .control-button {
    display: inline-block;
    margin: 0 .02em;
    font-size: 3em;
    text-align: center;
    text-decoration: none;
    -webkit-transition: color .1s;
    -o-transition: color .1s;
    transition: color .1s;
}

.gallery > .control-operator:target ~ .item {
    opacity: 0;
}

.gallery > .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
    opacity: 1;
}
.gallery > .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
    opacity: 1;
}
.gallery > .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
    opacity: 1;
}

/* a 按钮的样式 */
.gallery .control-button {
  color: #ccc;
  color: rgba(255, 255, 255, 0.4);
}

.gallery .control-button:first-of-type {
  color: white;
  color: rgba(255, 255, 255, 0.8);
}

.gallery .control-button:hover {
  color: white;
  color: rgba(255, 255, 255, 0.8);
}

.gallery .control-operator:target ~ .controls .control-button {
  color: #ccc;
  color: rgba(255, 255, 255, 0.4);
}

.gallery .control-operator:target ~ .controls .control-button:hover {
  color: white;
  color: rgba(255, 255, 255, .8);
}

/* 被选中时 设置<a>.</a>颜色为 rgba(255,255,255,.8) */
.gallery .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1),
.gallery .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2),
.gallery .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3) {
  color: white;
  color: rgba(255, 255, 255, 0.8);
}
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a153375250/article/details/53258161

不使用JS,使用CSS3 target 以及 动画效果实现,点击一下弹出,并且保持弹出状态,然后再点击一下弹回的导航栏(或者可以叫做按钮)

html> html> head> meta charset="utf-8"/> style> .p-wrap-2 { position: ...
  • qq_29469941
  • qq_29469941
  • 2016-09-14 09:25:07
  • 2623

js 标签选择与移除 个人经验分享

点击 + 号 div显示  再次点击 + 号(或者点击空白处) div隐藏  $("#addSign").click(function(){ $('.add_list').toggle()...
  • Gentry__
  • Gentry__
  • 2016-11-15 17:28:28
  • 1908

HTML5 CSS3专题 纯CSS打造相册效果

今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下。 效果图: 效果是不是还是很不错的,最主要的是没有使用一...
  • lmj623565791
  • lmj623565791
  • 2014-06-15 16:15:50
  • 20361

css3中伪类选择器:target的使用

参考资料 CSS3 target伪类简介今天由于在做任务13,里面有一个子任务是要求用css写出一个简单的图片轮播,刚开始真的是完全没有思路,想着不用js怎么绑定点击事件呢,看了别人的一些实现方法,发...
  • sinat_27088253
  • sinat_27088253
  • 2016-04-04 19:10:04
  • 1886

使用:target实现点击按钮切换图片的功能(纯CSS)

今天使用CSS中的:target选择器来实现点击按钮切换相对应的图片的demo,此demo也可以使用JS来实现。 demo的结构: img1 img2 img3 img4 ...
  • u014395826
  • u014395826
  • 2017-01-21 22:14:42
  • 1658

仅用css+HTML实现图片切换效果

备注:最好在firefox或chrome运行,在IE效果没出现  -。- 效果图: -----images.html----- How to Create An Imag...
  • zjut_acm
  • zjut_acm
  • 2015-04-08 19:55:03
  • 11340

纯CSS打造相册效果项目完整源码

  • 2014年06月15日 19:05
  • 127KB
  • 下载

纯CSSt实现照片墙效果

纯CSS实现的照片墙效果,鼠标经过图片是图片上浮变大,照片程不同角度倾斜如图: HTML部分 一起度过的第一个生日 ...
  • CNZSWYMP
  • CNZSWYMP
  • 2017-05-27 17:19:04
  • 546

利用css的target选择器实现纯css相册

在看CSS选择符的时候注意到一个特别有意思的选择符–:target,随后在http://benschwarz.github.io/gallery-css/发现利用该选择符可以做出如此漂亮的galler...
  • a153375250
  • a153375250
  • 2016-11-21 12:29:32
  • 1164

js笔记:Js封装库——css选择器

Js封装库——css选择器 在css中我们可以很简单地使用css选择器来对节点对象进行选择,并对其进行style设置。现在,我们想通过js对html的css样式进行动态设置,想以css的形式进行设置,...
  • YaoDeBiAn
  • YaoDeBiAn
  • 2017-08-21 17:27:41
  • 236
收藏助手
不良信息举报
您举报文章:利用css的target选择器实现纯css相册
举报原因:
原因补充:

(最多只允许输入30个字)