CSS交替固定网页背景视觉差特效

2019-10-09 09:38:01 作者: 大梦 浏览: 62 [百度已收录] [搜狗已收录] [360已收录]

简要教程

这是一款纯CSS交替固定网页背景视觉差特效插件。如何创建一个没有javascript的交替固定的背景视觉差效果呢?我们可以通过CSS background-attachment属性来实现它。

现在又很多网站上都使用了背景视觉差效果。我们可以在不影响网站性能的前提下只通过CSS来实现背景视觉差效果。你所要知道的仅是如何使用CSS background-attachment属性。

HTML结构

html结构中class为.cd-fixed-bg的

,被用来放置固定的背景图片;class为.cd-scrolling-bg的
被用来放置文本内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
<main>
  <div class="cd-fixed-bg cd-bg-1">
    <h1>h1>
  div>
  
  <div class="cd-scrolling-bg cd-color-2">
    <div class="cd-container">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
      p>
    div>
  div>
main>

CSS样式

默认情况下,background-attachment的值是Scroll,意思是背景和元素一起滚动。但是如果你将background-attachment设置为Fixed,那么背景就像一个位置固定的元素一样:它随着窗口一起移动。

在桌面设备上(屏幕大小超过1024px),我们为.cd-item-info设置position: absolute 和width: 50% ,并将其放在屏幕的右边。

对于.cd-slider-wrapper元素,我们设置其width: 50%。当用户点击了图片幻灯片,我们为.cd-single-item添加.cd-slider-active class:.cd-slider-wrapper的宽度将被设置为100%。通过这个方法,.cd-slider-wrapper将变大,覆盖掉.cd-item-info,并将额外内容向下推进。通过在宽度值上使用CSS3 Transition来使动画变得更加平滑。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
body, html, main {
  /* important */
  height: 100%;
}
  
.cd-fixed-bg {
  min-height: 100%;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
}
  
.cd-fixed-bg.cd-bg-1 {
  background-image: url("../img/cd-background-1.jpg");
}
.cd-fixed-bg.cd-bg-2 {
  background-image: url("../img/cd-background-2.jpg");
}
.cd-fixed-bg.cd-bg-3 {
  background-image: url("../img/cd-background-3.jpg");
}
.cd-fixed-bg.cd-bg-4 {
  background-image: url("../img/cd-background-4.jpg");
}
  
.cd-scrolling-bg {
  min-height: 100%;
}

通过几行CSS代码,我们就可以得到一个很好的网页背景视觉差效果的模板。

版权免责声明 1、本网站名称:罗网云集-支付之家!
2、本站永久网址:http://www.luopay.cn
3、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
4、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
5、本站Potato土豆群:请先加好友啦你进群:dizhus —potato是一款不用翻墙的聊天软件
6、本站资源大多存储在云盘,如发现链接失效  点此反馈 我们会第一时间更新。

下载地址
评论
本文作者 阅读排行 文章推荐

首页
最新
投稿
精选
我的