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

PetitQ 图片/图形 2019-1-20 1.08K 0 0

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

HTML 结构

这个用户帮助界面使用嵌套

也想出现在这里？联系我们吧

的 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 样式

滑动飘带是使用空来制作。

```
.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 代码请参考下载文件。

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

已有 269 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

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

HTML 结构

CSS 样式

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

相关文章

纯CSS3全屏单页4格网格布局

intense images 图片全屏动态展示js插件

WebGL的图像扭曲变形动画特效

发表回复取消回复

热销模板

图片/图形

HTML 结构

CSS 样式

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复