设计一个图像画廊,采用无序列表加载五幅图像,并利用滚动文字marquee标记及其属性的设置实现五幅图像从右向左滚动显示
时间: 2024-06-04 11:11:59 浏览: 15
<!DOCTYPE html>
<html>
<head>
<title>图像画廊</title>
<meta charset="utf-8">
<style type="text/css">
#gallery li {
display: inline-block;
margin: 10px;
}
#scrollText {
width: 100%;
height: 50px;
background-color: #f1f1f1;
overflow: hidden;
}
#scrollText p {
display: inline-block;
padding-left: 100%;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<ul id="gallery">
<li><img src="img1.jpg"></li>
<li><img src="img2.jpg"></li>
<li><img src="img3.jpg"></li>
<li><img src="img4.jpg"></li>
<li><img src="img5.jpg"></li>
</ul>
<div id="scrollText">
<p>这是一段滚动文字 marquee 标记及其属性的设置实现五幅图像从右向左滚动显示</p>
</div>
</body>
</html>