本文通过JavaScript和CSS3展示了如何创建一个无限不间断的单方向水平滑动效果。代码示例详细解释了实现这一功能的关键步骤，适用于网页中的轮播图或展示区。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width: 800px;
height: 500px;
border: 1px solid #000000;
position: relative;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.roll_box{
height: 100%;
position: relative;
margin: 0 auto;
padding: 0;
float: left;
}
.roll_box>ul{
padding: 0;
margin: 0;
display: flex;
flex-flow: row nowrap;
}
.roll_box>ul>li{
width: 200px;
height: 100%;
padding: 0;
list-style: none;
border: 1px solid #000000;
box-sizing: border-box;
}
.li_head{
width: 100%;
height: 200px;
background: #504044;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.li_center{
width: 100%;
height: 50px;
background: #d1c5ca;
text-align: center;
line-height: 50px;
font-size: 16px;
}
.li_footer{
width: 100%;
height: 250px;
background: #2fc1ff;
}
.hexa{
width: 96px;
height: 120px;
overflow: hidden;
transform: rotate(120deg);
margin: auto;
position: relative;
}
.hexa_child{
width: 100%;
height: 100%;
transform: rotate(-60deg);
overflow: hidden;
}
.hexa_child_child{
width: 100%;
height: 100%;
transform: rotate(-60deg);
overflow: hidden;
background-color: red;
}
.hexa_text{
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
}
</style>
</head>
最低0.47元/天 解锁文章
935
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
