使用纯CSS打造一个触发窗口

刚刚悄悄改了一个分类目录名称,改成了现在这个,前端路上。行走在前端路上,磕磕绊绊,也不知什么时候能走向正道=。=

这个分类目录主要是记录一些和前端相关的东西,目前先记录CSS,可能是我从书上看来的,也可能是从别的网站看来的,还可能是自己学来的。今天写的这个比较好玩(第一篇文章当然要好玩=。=),可以帮助我们用纯CSS打造一个淡入淡出的窗口,对此有人可能认为只有Javascript实现,但是事实上CSS也能实现。效果就是,通过点击,可以实现窗口的隐藏和出现。有些名词可能不是那么专业,我也是菜鸟,有不对的地方希望提出来。 为了实现更好的效果,这里采用了自适应布局,会根据屏幕大小自行调整。

[info]先上演示地址: 点我进入演示[/info] 下面我们一步一步来。 首先我们随便创建一个Html文本,不需要任何特殊元素,只需要一个普通的Html静态页面,就像这样:

<div class="container">
  <h1>CSS演示模块</h1>
  <p>这个页面演示一个纯CSS打造的自适应、淡入淡出、通过点击实现隐藏和展开的窗口。</p>
</div>

很好,下面我们来输入触发器的代码。

<div class="container">
  <h1>CSS演示模块</h1>
  <p>这个页面演示一个纯CSS打造的自适应、淡入淡出、通过点击实现隐藏和展开的窗口。</p>
</div>

  <label for="toggle">点我触发</label>
  <input type="checkbox" id="toggle" />
</div>

我们可以看见, “label for” 部分和输入id相匹配。这很重要,我们将真正的窗口隐藏,而这正是作为一个可点击的触发器,用来显示/隐藏窗口。 下面我们就可以添加窗口了。

<div class="container">
  <h1>CSS演示模块</h1>
  <p>这个页面演示一个纯CSS打造的自适应、淡入淡出、通过点击实现隐藏和展开的窗口。</p>
</div>

  <label for="toggle">点我触发</label>
  <input type="checkbox" id="toggle" />
</div>

<div class="modal">
    <h2>演示窗口</h2>
    <p>随便输点什么...</p>
  </div>
</div>

现在我们已经有了Html文件,那么最后就是最关键的CSS部分。

主体部分CSS:

body {
  background: url('bkg.jpg');
  /*Src: http://subtlepatterns.com/retina-wood/*/
}

.container {
  margin: 10px auto;
  padding: 20px;
  width: 350px;
  text-align: center;
}

.container h1 {
  font: bold 40px/1.5 "Microsoft Yahei",Helvetica, Verdana, sans-serif;
}

.container p {
  font: 13px/1.5 "Microsoft Yahei",Helvetica, Verdana, sans-serif;
}

图片已注明出处,这部分CSS可以帮我们构筑基本框架。

触发器CSS:

label {
  display: block;
  margin: 20px auto;
  width: 200px;
  height: 50px;
  background: #232323;
  color: #fff;
  text-align: center;
  font: 14px/50px Helvetica, Verdana, sans-serif;
}

label:hover {
  background: #444;
  cursor: pointer;
}

input#toggle {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

 然后是弹出框的CSS:

.modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -100;
  margin: auto;
  padding: 20px;
  width: 500px;
  height: 200px;
  border-radius: 10px;
  background: rgba(255,255,255,0.7 );

  -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
  box-shadow: 3px 3px 3px rgba(0,0,0,0.1);
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);

  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  -ms-transition: opacity 1s ease;
  -o-transition: opacity 1s ease;
  transition: opacity 1s ease;
}

我们先暂停一会儿,来看看上面这段CSS。首先我们要实现的是让弹出窗显示在屏幕中间,由于我们不知道屏幕大小,所以我们使用absolute , auto margins 和reset,这样我们就能将窗口自动固定在中间。嗯,其他的么,自己多看看就懂了=。=

下面是弹出框的CSS:

.modal h2 {
  color: #232323;
  text-transform: uppercase;
  font: 35px/1.5 Helvetica, Verdana, sans-serif;
}

.modal p {
  color: #444;
  text-align: left;
  font: 13px/1.8 Georgia, Times, sans-serif;
}

 检查状态:

input#toggle:checked + .modal {
  opacity: 1;
  z-index: 1;
}

下面就是让他工作了!

不过在此之前,先加上一段自适应CSS:

@media all and (max-width: 767px) {
  .modal {
    width: 300px;
    height: 250px;
  }

  .modal h2 {
    font: 30px/1.5 Helvetica, Verdana, sans-serif;
  }

  .modal p {
    font: 12px/1.8 Georgia, Times, sans-serif;
  }
}

好了,下面就可以保存文件并查看效果了。

嗯,你觉得这个怎么样呢?

15 thoughts on “使用纯CSS打造一个触发窗口

发表评论

电子邮件地址不会被公开。 必填项已用*标注