带斯威珀问题的水平定时器
带斯威珀问题的水平定时器
提问于 2020-05-12 01:01:26
如何在水平定时器中删除第一个元素之前的水平线和最后一个元素，在下面的文章中，我删除了左侧: css中的42%，因此左移可以删除左水平，而右边的水平线不能删除-
.status span:before {
content: '';
width: 25px;
height: 25px;
background-color: #e8eeff;
border-radius: 25px;
border: 4px solid #3e70ff;
position: absolute;
top: -15px;
**left: 0%;**
transition: all 200ms ease-in;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2020-05-12 02:23:29
我建议在每个swiper-slide中使用一个间隔元素，该元素仅在第一个和最后一个元素中可见。它也有着与旧答案相同的限制，背景需要有一个统一的颜色。
HTML代码
<div class="swiper-container">
<div class="swiper-wrapper timeline">
<div class="swiper-slide" v-for="item in steps">
<div class="status">
<span>{{item.title}}</span>
<div class="overlapper"></div>
</div>
</div>
</div>
</div>CSS
.overlapper {
background-color: white;
position: absolute;
width: 50%;
height: 4px;
z-index: 1;
top: -4px;
display: none;
}
.swiper-slide:first-child .overlapper {
left: 0;
display: block;
}
.swiper-slide:last-child .overlapper {
right: 0;
display: block;
}Codepen
https://codepen.io/AlexWayhill/pen/XWmYyvJ
旧答案
一个只在单色背景上工作的选项是添加“终止符”来重叠在border-top元素上定义的.swiper-slide。它还需要一些推特以获得正确的宽度的.swiper-terminator，否则它将重叠在错误的地方。
HTML代码
<div class="swiper-wrapper timeline">
<div class="swiper-terminator swiper-left"></div>
<div class="swiper-slide" v-for="item in steps">
<div class="status">
<span>{{item.title}}</span>
</div>
</div>
<div class="swiper-terminator swiper-right"></div>CSS
.swiper-terminator.swiper-left {
left: 0;
}
.swiper-terminator.swiper-right {
right: 0;
}
.swiper-terminator {
background-color: white;
position: absolute;
width: 20px;
padding: 20px;
height: 30px;
z-index: 1;
}
.status span {
/* Add the z-index to position the bubble over the terminator */
z-index: 3;
}
.timeline {
position: relative;
}Codepen
Stack Overflow用户
发布于 2020-05-12 05:07:29
因为行是元素与文本的边框，所以它永远不会比元素/文本本身小。
我建议使用一个额外的元素，与您需要的宽度，而不是边框。
要做到这一点，只需删除行
border-top: 4px solid #3e70ff;从css类.status中添加以下css类：
.status:before {
content: "";
position: absolute;
width: 100%;
height: 4px;
bottom: 100%;
left: 0;
background-color: #3e70ff;
}
.swiper-slide:first-of-type .status:before {
width: 50%;
left: 50%;
}
.swiper-slide:last-of-type .status:before {
width: 50%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61747710
复制相关文章
相似问题
腾讯云开发者
