利用css 实现视觉差效果

最新推荐文章于 2024-06-30 08:30:00 发布

ZXH0122

最新推荐文章于 2024-06-30 08:30:00 发布

阅读量762

点赞数

分类专栏：前端文章标签： css

原文链接：https://blog.csdn.net/TriDiamond6/article/details/105222289?depth_1-utm_source=distribute.pc_category.none-task-blog-hot-1&request_id=&utm_source=distribute.pc_category.none-task-blog-hot-1

版权

前端专栏收录该内容

84 篇文章 3 订阅

订阅专栏

html 布局：

<body>
   <div class="wrapper">
     <div class="parallax-img1">
       <div class="caption">
         <span>
           <img
             src="../images/TriDiamond_logo_circle.png"
             alt=""
             height="80"
             width="80"
           />
           <p>TriDiamond</p>
           向下滑动
         </span>
       </div>
     </div>
     <div class="center">
       <h1>图片视差效果DEMO</h1>
       <p>
         三钻因何而发生？ 我们不得不面对一个非常尴尬的事实，那就是，
         从这个角度来看，
         三钻的发生，到底需要如何做到，不三钻的发生，又会如何产生。
         三钻因何而发生？ 既然如此，
         在这种困难的抉择下，本人思来想去，寝食难安。
         洛克在不经意间这样说过，学到很多东西的诀窍，就是一下子不要学很多。这启发了我，
         在这种困难的抉择下，本人思来想去，寝食难安。
         塞涅卡在不经意间这样说过，真正的人生，只有在经过艰难卓绝的斗争之后才能实现。这似乎解答了我的疑惑。
         就我个人来说，三钻对我的意义，不能不说非常重大。
         了解清楚三钻到底是一种怎么样的存在，是解决一切问题的关键。
         对我个人而言，三钻不仅仅是一个重大的事件，还可能会改变我的人生。
         总结的来说， 生活中，若三钻出现了，我们就不得不考虑它出现了的事实。
         那么， 一般来讲，我们都必须务必慎重的考虑考虑。 经过上述讨论，
         生活中，若三钻出现了，我们就不得不考虑它出现了的事实。
         而这些并不是完全重要，更加重要的问题是，
         要想清楚，三钻，到底是一种怎么样的存在。
         雷锋说过一句富有哲理的话，自己活着，就是为了使别人过得更美好。这似乎解答了我的疑惑。
         本人也是经过了深思熟虑，在每个日日夜夜思考这个问题。
         问题的关键究竟为何？
         三钻的发生，到底需要如何做到，不三钻的发生，又会如何产生。
         拿破仑·希尔曾经说过，不要等待，时机永远不会恰到好处。带着这句话，我们还要更加慎重的审视这个问题：
         这样看来，
         迈克尔·F·斯特利说过一句富有哲理的话，最具挑战性的挑战莫过于提升自我。我希望诸位也能好好地体会这句话。
         拉罗什福科曾经提到过，我们唯一不会改正的缺点是软弱。这句话语虽然很短，但令我浮想联翩。
         这样看来， 就我个人来说，三钻对我的意义，不能不说非常重大。
         从这个角度来看， 经过上述讨论， 经过上述讨论，
         我们不得不面对一个非常尴尬的事实，那就是。
       </p>
     </div>
     <div class="parallax-img2">
       <div class="caption">
         <span>不同高度，不同感觉</span>
       </div>
     </div>
   </div>
 </body>

css 代码：

<style>
    * {
      padding: 0;
      margin: 0;
      font-family: Candara;
      box-sizing: border-box;
    }
    body,
    html {
      background: #202020;
      height: 100%;
    }
    .wrapper {
      height: 100%;
    }
    .parallax-img1 {
      height: 100%;
      background-image: url('http://ppe.oss-cn-shenzhen.aliyuncs.com/collections/182/7/thumb.jpg');
    }
    .parallax-img2 {
      min-height: 400px;
      background-image: url('http://ppe.oss-cn-shenzhen.aliyuncs.com/collections/182/5/thumb.jpg');
    }
    .parallax-img1,
    .parallax-img2 {
      position: relative;
      background-attachment: fixed;  //这里是关键代码
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .caption {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      text-align: center;
      display: flex;
      justify-content: center;
    }
    .caption > span {
      background: rgb(32, 32, 32, 0.85);
      color: #82fcfd;
      padding: 18px 50px;
      font-size: 30px;
      border-radius: 16px;
    }
    .caption p {
      margin: 0 0 15px 0;
      padding: 0 0 15px 0;
      border-bottom: 2px solid #82fcfd;
    }
    .caption > span p {
      font-size: 40px;
    }
    p {
      margin: 15px;
      font-size: 1.1rem;
      padding: 1.5rem 5rem;
      color: #fff;
    }
    .center {
      width: 1200px;
      margin: 0 auto;
      color: #ddd;
    }
    h1 {
      text-align: center;
      margin: 3rem 0 0 0;
      color: #fff;
    }
  </style>

background-attachment: fixed 是实现视差的主要代码，可以固定背景图的位置，从而实现视差的效果。

文章参考：https://blog.csdn.net/TriDiamond6/article/details/105222289?depth_1-utm_source=distribute.pc_category.none-task-blog-hot-1&request_id=&utm_source=distribute.pc_category.none-task-blog-hot-1

预览效果：http://tridiamond.me/frontend-tutorials/parallaxImages/