注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

猪儿不懒

UI设计 前端开发 HTML5+CSS3

 
 
 

日志

 
 

CSS3 Light-Box  

2012-01-03 23:00:19|  分类: 设计教程与素材 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

light-box

 

Light-Box 是一个JS插件,很多人都知道的。需要写一大堆的JS,我在一个国外网站上看到一个纯CSS3的Light-Box研究后与大家分享!

我这里不是翻译E文教程,是自己下载后研究,重新写的,写得要相对常规化点,大家可以选择在以下地址中下载我的源文件或E文的!

 

制作:懒猪儿(猪儿不懒)

教程发布:新松

源文件下载(文件放至新浪微盘,请登录新浪微博后下载)

原E文地址:http://tympanus.net/codrops/2011/12/26/css3-lightbox/ (原文上可以看到DOM和E文源文件)

 

为了体现我的懒,这里的代码全是只写了-webkit-引擎,请使用chrome或safari最新版本查看效果。另外这些都是需要大家动手练习才能深刻理解的,光看是没用的。

 

接下来讲一下我们要做的是什么事情!

1

 

2

和往常一样,我们只讲要点。

在看完美女,接下来,我们先看HTML代码布局格式,代码如下:

<div class="line-box">
    <li>
           <a href="#image-1">
            <img src="images/thumbs/1.jpg" />
            <span>POINTE</span>   
        </a>
        <div class="big-box" id="image-1">
            <a href="#page">X Close</a>
            <img src="images/full/1.jpg" />
        </div>

    </li>
</div>

li之间的代码就表示一组图片。

接着我们看CSS部分。

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('fonts/BebasNeue-webfont.eot');
    src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BebasNeue-webfont.woff') format('woff'),
         url('fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

自定义字体,这里只提一下,我自己对这个也不熟。如果有人对这个比较熟的,请指教或发一个教程。

我们将缩略图放置A标签之间,给A标签添加样式代码如下:

.line-box li>a{
    display:block;
    width:150px;
    height:150px;
    position: relative;
    -webkit-border-radius:6px;
    text-decoration:none;
    color:#111;
    float:left;
    padding:10px;
    background:#f1d2c2;
    -webkit-box-shadow:1px 1px 2px #fff,1px 1px 2px rgba(158,111,86,0.3) inset;
    float:left;
    margin:5px;
}

以上代码中有“.line-box li>a”CSS子元素选择

例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:

h1 > strong {color:red;}
这个规则会把第一个 h1 下面的 strong 元素变为红色,但是第二个 strong 不受影响:

<h1>This is <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

还有段“-webkit-box-shadow:1px 1px 2px #fff,1px 1px 2px rgba(158,111,86,0.3) inset;”表示阴影,在这里我们给A加了两重阴影。

 

当鼠标指上后要显示文字和半透明的背景,代码如下:

.line-box li>a span{
    cursor:pointer;
    width:150px;
    height:150px;
    position:absolute;
    top:10px;
    left:10px;
    line-height:150px;
    text-align:center;
    font-size: 24px;
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
    opacity:0;
    -webkit-transition:opacity 0.3s ease-in-out;
}
.line-box li>a:hover span{
    opacity:1;
}

“background: -webkit-radial-gradient(…“径向渐变,并从容器中心开始渐变,elipse表示渐变形状为圆,cover表示渐变的大小覆盖整个容器,rgab()0%表示起始颜色值,rgba()100%表示渐变终止颜色

这里先设置了整个容器的opacity为0,当页面加载的时候这里是不会被显示的,当鼠标经过后,设置opacity为1,并使用CSS3的动画过程“-webkit-transition:opacity 0.3s ease-in-out;”

 

接下来需要做点击缩略图后显示大图。大图自自适应大小,并且有一个半透明的层。

先来装图片的容器样式:

.big-box{
    width:0;
    height:0;
    overflow:hidden;
    z-index:99;
    position:fixed;
    background:#333;
    text-align:center;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

图片自适应大小:

.big-box img {
    max-height:100%;
    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
    opacity:0;
    -webkit-transition:opacity 1s ease-in;
}

接下来,需要在点击缩略图的时候显示大图了。以前我们需要用到JS才能实现这些,但是在CSS3中,JS就可以省掉了。这里我们需要用到“选择器target”。target 伪类用于改变锚链接URL所指向的ID的样式。我们在CSS中这样写:

.big-box:target{
    width:auto;
    height:auto;
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(241,210,194,1) 100%);
    padding:80px 100px 120px 100px;
}

.big-box:target img{
    opacity:1;
}

当然光有这些是不够的。接下来,我们还需要在HTML中给DIV层加上ID,然后将A标签里的href属性中的值设为“#ID“。代码如下:

<a href="#image-1">
<img src="images/thumbs/1.jpg" />
<span>POINTE</span>
</a>
<div class="big-box" id="image-1">
<a href="#page">X Close</a>
<img src="images/full/1.jpg" />
</div>

这样我们就实现了,点击缩略图,显示大小。然后点击大“Close”就关闭大图,这里实现关闭的原理也很简单,只要将关闭按钮的href属性值设置为一个页面上没有的ID就行了:

<a href="#page">X Close</a>

到这里,要点已经说完了,中间图片变化还可以有很多种其他效果,只要通过CSS3动画去设置就行了,大家自己研究一下,我比较懒就不写多的了!

另外如果有些新新新新手们,看了这个表示很多地方不明白,那么我建议,可以先看看之前我写的几个教程,然后再回头看这篇就能明白了!

CSS3 Transitions(CSS3里的动画!) 推荐!
CSS3菜单实例解析

看完这两篇之后应该能明白了。第一个是入门,第二个是实例!

  评论这张
 
阅读(420)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017