纯CSS3滚动淡入淡出视觉差特效 - vhttps://www.7uup.com/s/qgfrhi8n

PetitQ 图片/图形 2019-3-19 2.37K 0 2

这是一款使用纯 CSS3 制作的带淡入淡出效果的滚动视觉差特效。该视觉差特效在页面加载时，图片有淡入淡出的效果。当页面滚动时，背景图片会有非常炫酷的视觉差效果。

HTML 结构

该视觉差效果的 HTML 结构如下：

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

```
<div class="gridContainer clearfix">
```
```
  <div id="Wrapper">
```
```
    <h1>主标题</h1>
```
```
    <section class="parallax">
```
```
      <div class="parallax-content">
```
```
 
```
```
        <h2>段落标题-1</h2>
```
```
        <p>......</p>
```
```
      </div>
```
```
    </section>
```
```
 
```

    <section class="parallax-section-two">

```
      <h3>段落标题-2</h3>
```
```
      <p>......</p>
```
```
    </section>
```
```
 
```
```
    <section class="parallax">
```
```
      <div class="parallax-footer">
```
```
        <p>......</p>
```
```
      </div>
```
```
    </section>
```
```
  </div>
```
```
</div>
```

CSS 样式

为了制作响应式效果，整个容器使用百分比作为尺寸单位。

```
.gridContainer {
```
```
  margin-left: auto;
```
```
  margin-right: auto;
```
```
  width: 87.36%;
```
```
  padding-left: 1.82%;
```
```
  padding-right: 1.82%;
```
```
}
```

次级容器左浮动,宽度为父容器的 100%，并清除左右两侧的浮动。

```
#Wrapper {
```
```
  clear: both;
```
```
  float: left;
```
```
  margin-left: 0;
```
```
  width: 100%;
```
```
  display: block;
```
```
}
```

该视觉差特效主要在标题元素上制作。主标题 H1 元素被用来做第一个视觉差效果。标题 H1 被设置了一个固定的 background，并且它的 padding-top 和 padding-bottom 分别为父容器的 25%高度，用于撑开空间。同时为它设置了 3 秒钟的 fadein 动画。该动画用于修改背景图片的透明度，使背景动画有淡入淡出的效果。

```
h1 {
```
```
  text-align: center;
```
```
  font-size: 300%;
```
```
  color: #ffffff;
```
```
  letter-spacing: 1%;
```
```
  margin: 0 0;
```

  background: url("../img/1.jpg") fixed 100%;

```
  padding-top: 25%;
```
```
  padding-bottom: 25%;
```
```
  -webkit-animation: fadein 3s;
```
```
  -moz-animation: fadein 3s;
```
```
  -ms-animation: fadein 3s;
```
```
  -o-animation: fadein 3s;
```
```
  animation: fadein 3s;
```
```
} 
```
```
@keyframes fadein {
```
```
  from {
```
```
    opacity: 0;
```
```
  }
```
```
  to {
```
```
    opacity: 1;
```
```
  }
```
```
}
```

其它的用于设置内容的常规 CSS 代码如下：

```
.parallax {
```
```
  background-color: #3a3e2d;
```
```
}
```
```
/*Parallax Section One*/
```
```
.parallax-content {
```
```
  padding-top: 10%;
```
```
  padding-bottom: 10%;
```
```
}
```
```
 
```
```
.parallax-content h2
```
```
/*Section One Style*/
```
```
{
```
```
  text-align: center;
```

  font-family: Futura, "Trebuchet MS", Arial, sans-serif;

```
  font-size: 275%;
```
```
  color: #ffffff;
```
```
  letter-spacing: 1%;
```
```
}
```
```
 
```
```
.parallax-content p
```
```
/*Section One Paragraph*/
```
```
{
```

  font-family: Futura, "Trebuchet MS", Arial, sans-serif;

```
  color: #ffffff;
```
```
  padding: 10px;
```
```
}
```
```
 
```
```
 
```
```
/*Footer Section*/
```
```
.parallax-footer {
```
```
  padding-top: 5%;
```
```
  padding-bottom: 5%;
```
```
}
```
```
 
```
```
.parallax-footer p
```
```
/*Section One and Footer Paragraph*/
```
```
{
```

  font-family: Futura, "Trebuchet MS", Arial, sans-serif;

```
  text-align: Center;
```
```
  color: #ffffff;
```
```
  padding: 10px;
```
```
}
```

最后通过媒体查询来制作响应式布局效果。

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

```
  .gridContainer {
```
```
    width: 90.675%;
```
```
    padding-left: 1.1625%;
```
```
    padding-right: 1.1625%;
```
```
  }
```
```
  #Wrapper {
```
```
    clear: both;
```
```
    float: left;
```
```
    margin-left: 0;
```
```
    width: 100%;
```
```
    display: block;
```
```
  }
```
```
}
```
```
 
```

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

```
  .gridContainer {
```
```
    width: 88.2%;
```
```
    max-width: 1232px;
```
```
    padding-left: 0.9%;
```
```
    padding-right: 0.9%;
```
```
    margin: auto;
```
```
  }
```
```
  #Wrapper {
```
```
    clear: both;
```
```
    float: left;
```
```
    margin-left: 0;
```
```
    width: 100%;
```
```
    display: block;
```
```
  }
```
```
}
```

纯 CSS3 滚动淡入淡出视觉差特效

已有 592 人购买

资源版本：v https://www.7uup.com/s/qgfrhi8n
永久更新：
演示数据：
提取码：436k

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

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

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

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

图片/图形

纯CSS3滚动淡入淡出视觉差特效 - vhttps://www.7uup.com/s/qgfrhi8n

HTML 结构

CSS 样式

纯 CSS3 滚动淡入淡出视觉差特效

相关文章

个人信息介绍动画效果UI界面设计

仿Google Photos纯javascript图片画廊插件

CSS3鼠标悬停图片遮罩层变形动画特效

发表回复取消回复

热销模板

图片/图形

HTML 结构

CSS 样式

纯 CSS3 滚动淡入淡出视觉差特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复