纯CSS3带动画特效的创意用户帮助界面

这是一款创意十足的纯CSS3带动画效果的用户帮助界面特效。这个用户帮助界面中，每个问题选项都被制作为一个飘带，鼠标上下移动时飘带跟着移动，并且最上方还有每个问题选项的缩略图动画，非常炫酷和人性化。

制作方法

HTML结构

这个用户帮助界面使用嵌套<div>的HTML结构。各种动画效果都在CSS代码中完成，HTML中只给出了相应的结构和class类。

<div class="demo">
  <div class="demo__content">
      <h2 class="demo__heading">What do you need help with?</h2>
      <div class="demo__elems">
        <div class="demo__elem demo__elem-1">With advertising online</div>
        ...
        <span class="demo__hover demo__hover-1"></span>
        ...
        <div class="demo__highlighter">
          <div class="demo__elems">
            <div class="demo__elem">With advertising online</div>
            ...
          </div>
        </div>
        <div class="demo__examples">
          <div class="demo__examples-nb">
            <div class="nb-inner">
              <div class="example example-adv">
                <div class="example-adv">
                  <div class="example-adv__top">
                    <div class="example-adv__top-search"></div>
                  </div>
                  <div class="example-adv__mid"></div>
                  <div class="example-adv__line"></div>
                  <div class="example-adv__line long"></div>
                </div>
              </div>
              ...
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>         
              

CSS样式

滑动飘带是使用空<div.demo__highlighter>来制作。

.demo__highlighter {
  z-index: 1;
  position: absolute;
  top: 0;
  left: -1rem;
  width: 38rem;
  height: 7rem;
  background: #39A5F7;
  overflow: hidden;
  box-shadow: 0 0.3rem 0.2rem rgba(0, 0, 0, 0.3);
  -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.59, 0.04, 0.3, 1.43);
          transition: transform 0.5s cubic-bezier(0.59, 0.04, 0.3, 1.43);
}            
              

飘带会跟谁鼠标一起移动，这是通过在.demo__hover-n上使用:hover伪元素来实现的。

.demo__hover-1 {
  top: 0;
}
.demo__hover-1:hover ~ .demo__highlighter {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}
.demo__hover-1:hover ~ .demo__highlighter .demo__elems {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}                
              

然后在鼠标滑过相应的选项的时候，上方的演示动画也会同时进行，以第二个选项为例，它的代码如下：

.demo__hover-2 {
  top: 7rem;
}
.demo__hover-2:hover ~ .demo__highlighter {
  -webkit-transform: translateY(7rem);
      -ms-transform: translateY(7rem);
          transform: translateY(7rem);
}
.demo__hover-2:hover ~ .demo__highlighter .demo__elems {
  -webkit-transform: translateY(-7rem);
      -ms-transform: translateY(-7rem);
          transform: translateY(-7rem);
}
.demo__hover-2:hover ~ .demo__examples .example-adv__top,
.demo__hover-2:hover ~ .demo__examples .example-adv__mid,
.demo__hover-2:hover ~ .demo__examples .example-adv__line {
  -webkit-transform: translateY(100%);
      -ms-transform: translateY(100%);
          transform: translateY(100%);
  opacity: 0;
  -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
          transition: transform 0.2s, opacity 0.2s;
}
.demo__hover-2:hover ~ .demo__examples .example-web__top,
.demo__hover-2:hover ~ .demo__examples .example-web__left {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  opacity: 1;
  -webkit-transition: -webkit-transform 0.4s 0.2s, opacity 0.4s 0.2s;
          transition: transform 0.4s 0.2s, opacity 0.4s 0.2s;
}
.demo__hover-2:hover ~ .demo__examples .example-web__right-line {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
.demo__hover-2:hover ~ .demo__examples .example-web__right-line:nth-child(1) {
  -webkit-transition: -webkit-transform 0.4s 0s;
          transition: transform 0.4s 0s;
}
.demo__hover-2:hover ~ .demo__examples .example-web__right-line:nth-child(2) {
  -webkit-transition: -webkit-transform 0.4s 0.06s;
          transition: transform 0.4s 0.06s;
}
.demo__hover-2:hover ~ .demo__examples .example-web__right-line:nth-child(3) {
  -webkit-transition: -webkit-transform 0.4s 0.12s;
          transition: transform 0.4s 0.12s;
}
.demo__hover-2:hover ~ .demo__examples .example-web__right-line:nth-child(4) {
  -webkit-transition: -webkit-transform 0.4s 0.18s;
          transition: transform 0.4s 0.18s;
}
.demo__hover-2:hover ~ .demo__examples .example-web__right-line:nth-child(5) {
  -webkit-transition: -webkit-transform 0.4s 0.24s;
          transition: transform 0.4s 0.24s;
}
.demo__hover-2:hover ~ .demo__examples .example-web__right-line:nth-child(6) {
  -webkit-transition: -webkit-transform 0.4s 0.3s;
          transition: transform 0.4s 0.3s;
}                
              

其它的CSS代码请参考下载文件。