前端网页--图片的滑动效果
本帖最后由 胡汉九 于 2022-1-7 14:54 编辑前端网页--图片的滑动效果 代码来源：@风火轮技术团队 （1）设置好需要实现的漫画效果 这里实现的效果是在一个网页界面里面，实现下一张图片
直接覆盖住前面的一张图片，也就是实现了一部漫画的连续
阅读的效果，也就有动画的效果，使得图片的展示更加的生
动形象。
（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>
页:
[1]