承德做网站：如何使用CSS 3转换创建显示内容覆盖

在本教程中，承德做网站将向您展示如何创建显示内容覆盖与CSS 3转换，让您尽量减少内容杂乱，并提供一个整洁的用户体验。

导言

我将通过介绍一个非常合适的用例来介绍本教程。假设您的公司提供了一系列不同的服务，而在您的网站服务部分，它们被列出。每个服务都有自己的描述，但您不想占用大量的页面房地产。您将呈现一组吸引人的链接或按钮，提示并允许用户单击这些链接查看更多内容。每个服务可能不需要一个全新的页面，因此，您可以显示内容与CSS 3转换的覆盖。

它们的动画进入页面上方的视图，可以很容易地关闭，而不需要遍历不同的页面。挺干净的，是吧？让我们挖一点！

标记

标记是相当标准的。我们有一个导航，和一堆相应的内容包含的部分。通过匹配将每个导航项引用到特定的部分。href和id他的。下面是标记：

<nav class="cmn-overlays-nav">
  <ul class="clearfix">
    <li><a href="#html">HTML</a></li>
    <li><a href="#css">CSS</a></li>
    <li><a href="#js">JavaScript</a></li>
    <li><a href="#php">PHP</a></li>
    <li><a href="#rails">Rails</a></li>
    <li><a href="#swift">Swift</a></li>
  </ul></nav><!-- /nav.cmn-overlays-nav -->
 <section id="html">
  <div class="content">
    <article>
      <h2>HTML</h2>
    </article>
    <a href="#" class="close">x</a>
  </div><!-- /.content --></section><!-- /section#html -->
 <section id="css">
  <div class="content">
    ...  </div><!-- /.content --></section><!-- /section#css -->
 <section id="js">
  <div class="content">
    ...  </div><!-- /.content --></section><!-- /section#js -->
 <section id="php">
  <div class="content">
    ...  </div><!-- /.content --></section><!-- /section#php -->
 <section id="rails">
  <div class="content">
    ...  </div><!-- /.content --></section><!-- /section#rails -->
 <section id="swift">
  <div class="content">
    ...  </div><!-- /.content --></section><!-- /section#swift -->

深入研究CSS

第一件事-我在用box-sizing: border-box在我的整个文档中，下面的CSS没有前缀。确保在必要时(即转换/转换)前缀。我们将分两部分处理CSS-

1. 导航项，我们将作出响应
2. 这些部分最初隐藏在屏幕之外，并在单击导航项时转换到视图中。

对于这个系统的功能来说，导航的美感是微不足道的。承德做网站为了简单起见，我只是把它们设计成一个好的ol‘块元素，在一个断点上移动到每一行两个。下面是CSS：

nav.cmn-overlays-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;}nav.cmn-overlays-nav li {
  display: block;
  margin: 0 0 1px 0;}nav.cmn-overlays-nav a {
  display: block;
  padding: 20px;
  color: #fff;
  background-color: #b4e664;
  text-align: center;}nav.cmn-overlays-nav a:hover {
  background-color: #85c420;}
 @media all and (min-width: 600px) {
  nav.cmn-overlays-nav ul {
    padding-left: 1px;
  }
  nav.cmn-overlays-nav li {
    float: left;
    width: 50%;
  }
  nav.cmn-overlays-nav li:nth-child(2n+1) {
    margin: 0 1px 1px -1px;
  }}

内容部分的CSS需要更多的思想处理。起初，所有的部分都是隐藏的和看不到的。单击导航项时，将显示相应的部分。一个半透明的黑色覆盖消失在所有的上方，然后是一个白色的正方形，内容从左边滑进来。这些转换将在.active类添加到节中。还将有一个“关闭”按钮关闭覆盖，这是表示在上面的HTML。

所以快速回顾一下-

1. 用户按下导航按钮，相应的部分将转换为视图。
2. 黑色覆盖(面具)消失0.2秒
3. 在转换完成后，一个白色的方框将从左侧滑入所有内容。
4. 用户可以通过单击“关闭”按钮或掩码关闭当前部分。

下面是CSS：

section {
  position: fixed;
  top: -9999px;
  left: -9999px;
  visibilty: hidden;
  opacity: 0;
  background: rgba(0, 0, 0, 0.8);
  transition: opacity 0.2s;}section.active {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  visibilty: visible;
  opacity: 0;
  opacity: 1;}
 section .content {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  margin: 0 auto;
  max-width: 600px;
  padding: 40px;
  background-color: #fff;
  overflow-y: scroll;
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.2s, transform 0.2s;
  transition-delay: 0.2s;}section .content a.close {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background-color: #b4e664;
  color: #fff;
  font-weight: 700;
  line-height: 40px;
  text-align: center;}section .content a.close:hover {
  background-color: #85c420;}
 section.active .content {
  opacity: 1;
  transform: translateX(0);}

让它与JavaScript一起工作

如果JavaScript不相应地处理这种情况，这一切都是无用的。我们需要侦听对导航项的单击，并通过添加.active班级，等级。我们还需要侦听关闭按钮和掩码上的单击，这将通过删除“关闭”按钮和掩码来隐藏当前活动的部分。.active班级，等级。js用于类添加/删除/检查助手函数，所有JS都在关闭男孩标记之前的一个自动执行函数中运行。以下是JavaScript：

(function(){
 
  // handle the swanky navigation/section stuff
  ////////////////////////////////////////////////////////////
 
  var nav_links = document.querySelectorAll("nav.cmn-overlays-nav a");
    
  /* loop through all nav links */
  [].slice.call(nav_links).forEach(function(el, i) {
    
    /* fetch vars */
    var href = el.getAttribute("href"),
        id = href.substr(1),
        section = document.querySelector(href),
        close = section.querySelector("a.close");
 
    /* listen for nav clicks */
    el.addEventListener("click", function(e) {
      e.preventDefault();
      if (!classie.has(section, "active")) {
        classie.add(section, "active");
      }
    });
 
    /* listen for close clicks on the mask */
    section.addEventListener("click", function(e) {
      e.preventDefault();
      if (e.target.tagName == "SECTION") {
        if (classie.has(section, "active")) {
          classie.remove(section, "active");
        }
      }
    });
 
    /* listen for close clicks on the close button */
    close.addEventListener("click", function(e) {
      e.preventDefault();
      if (classie.has(section, "active")) {
        classie.remove(section, "active");
      }
    });
 
  });
 })();

包起来

这是个包装！我们承德做网站已经解决了一个很好的解决共同问题的方法。我们防止了一次又一次的信息超载，让用户可以选择点击一些吸引人的链接来收集更多的信息。显示内容覆盖是一个很好的方法，可以在一个页面上包含大量的信息，而不会有太多的混乱。一些令人敬畏的CSS 3过渡为用户提供了一个平滑和现代的体验。请随意尝试不同的过渡组合！

谢谢你的阅读，我希望你喜欢这个教程。请随时在下面留下评论、反馈或问题，不要忘记你可以通过点击下面的链接下载源代码并查看演示。