前端网页--图片的滑动效果

胡汉九 · 发表于 2022-1-7 14:37:52

本帖最后由胡汉九于 2022-1-7 14:54 编辑

前端网页--图片的滑动效果

代码来源：@风火轮技术团队

（1）设置好需要实现的漫画效果这里实现的效果是在一个网页界面里面，实现下一张图片
直接覆盖住前面的一张图片，也就是实现了一部漫画的连续
阅读的效果，也就有动画的效果，使得图片的展示更加的生
动形象。

LL6L1EAMEO4@_RC$GXMJ4ZV.png

（2）漫画的内容


（3）代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小时候和长大以后</title>
<style>
      *{
         margin:0 ;
         padding: 0;
      }
      div{
         height:700px;
         background-position: top center;
         background-repeat: no-repeat;
         background-size:contain;
         background-attachment:fixed;
      }
      .box1 {
         background-image: url("TP/1.jpg");
      }
   //同样的方法设置好其余的6个盒子来装好其余的6张图片
      .box8{
         height: 750px;
         margin-left: 300px;
         margin-right:300px;
         background-color:#0395e1;
         text-align: center ;
         font-size:50px;
         font-weight: bolder;
         font-family: 宋体;
         font-style:italic;
      }
      .box9{
         height: 750px;
         margin-left: 300px;
         margin-right:300px;
         background-color:#0395e1;
         text-align: center ;
         font-size:50px;
         font-weight: bolder;
         font-family: 宋体;
         font-style:italic;
      }
</style>

</head>
<body>

<div class="box8">
      <br>
      <br>
      <p><h1>
      <span style="color:red;">漫</span><span style="color:blue">画</span>
      <span style="color:#452356">欣</span><span style="color:#556677">赏</span>

</h1></p>
      <br>
      <p><h1>
   <span style="color:#883311">小时候</span><span style="color:#56224477">和</span><span style="color:#665511;">长大后</span>
</h1></p>
</div>

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>

<div class="box9">
      <br>
      <br>
      <h1 style="color:blue;">感谢欣赏</h1>
      <br>
      <h1 style="color:#771199">下期再见</h1>
</div>
</body>
</html>