问带斯威珀问题的水平定时器
EN

Stack Overflow用户

提问于 2020-05-12 01:01:26

回答 2查看 124关注 0票数 0

如何在水平定时器中删除第一个元素之前的水平线和最后一个元素，在下面的文章中，我删除了左侧: 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;
}

编码卧式时间线转向器

css

javascript

回答 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

https://codepen.io/AlexWayhill/pen/KKderQx

票数 0

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%;
}