需要使用HTML和CSS的曲线垂直线

我需要一个弯曲的垂直线,有5个这样的点 -

将鼠标悬停在每个点上时,文本应从左向右滑动,文本在取走鼠标时应消失.

到目前为止,我只能通过修改margin-left列表中每个项目的属性来缩进并放置这5个点.我无法得到曲线.我如何实现这一目标？

背景:

Border-radius非常适合创建曲线的外观.问题是使用这种方式弯曲的容器内的任何东西都会忽略所述弯曲.正如您所指出的,我们需要使用边距.但是,通过保持所有对称,我们可以将margin-lefts 保持为三组,其中一组不需要类.

回答:

我们可以在这里找到一个非常简单的结构:

    
Text

我们ul将外包装作为顶部和底部水平边框.我们使用::before附加到包装器的伪元素来创建曲线.每个li都是菜单项.蓝色圆圈是用::before附加的伪元素创建的li,我们可以通过span里面实现文本动画.我们可以逃脱没有span,但我们需要在CSS中声明实际的文本内容,我认为它属于HTML.

CSS也不错.我们弯曲ul::before并给它边界.我们使它更大,100%因为你显示的曲线切断了顶部和底部.

截图:

码:

ul {
    height:300px;
    width:300px;
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    border-top:solid 2px black;
    border-bottom:solid 2px black;
    overflow:hidden;
}
ul::before {
    height:133%;
    width:133%;
    border-radius:50%;
    border:solid 2px black;
    display:block;
    position:absolute;
    top:-18%;
    left:10px;
    content:"";
}
li {
    margin:28px 0;
    color:lightblue;
    font-style:italic;
    font-weight:bold;
    overflow:hidden;
}
li::before {
    height:20px;
    width:20px;
    content:"";
    display:inline-block;
    background-color:lightblue;
    border-radius:50%;
    position:relative;
    top:4px;
    margin-right:6px;
}
li.right {
    margin-left:30px;
}
li.middle {
    margin-left:6px;
}
li span {
    position:relative;
    left:-100%;
    transition: left 200ms ease-in;
}
li:hover span {
    left:0;
}

    
Anecdotes
    
Interviews
    
Records
    
Recent Stats
    
Recent Snaps