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

Question

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

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

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

Answer 1

背景：

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

回答：

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

<ul>
    <li><span>Text</span></li>
</ul>

我们将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; } 

 <ul> <li class="right"><span>Anecdotes</span></li> <li class="middle"><span>Interviews</span></li> <li><span>Records</span></li> <li class="middle"><span>Recent Stats</span></li> <li class="right"><span>Recent Snaps</span></li> </ul> 

成功！ 如前所述，使用Canvas或可能的SVG可能会更好。 但是如果你想严格遵守HTML和CSS，这应该会有所帮助。

---

第二种方法

我们可以使用HTML和CSS来实现这一目标的另一种方法是使用transform:translate 。 我认为这可能更容易，更可靠，但事实证明它需要更多的CSS和更多的类。 但是，我得到了它的工作，所以我打算在这里发布它，因为尽管我认为这很酷。

 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:-17.5%; left:10px; content:""; } li { margin:0; color:lightblue; font-style:italic; font-weight:bold; overflow:hidden; position:absolute; top:50%; left:50%; line-height:30px; margin-top:-15px; } li::before { height:20px; width:20px; content:""; display:inline-block; background-color:lightblue; border-radius:50%; position:relative; top:4px; margin-right:6px; } li.one { transform: translate(60px) rotate(-140deg) translate(208px) rotate(140deg); } li.two { transform: translate(60px) rotate(-160deg) translate(208px) rotate(160deg); } li.three { transform: translate(60px) rotate(-180deg) translate(208px) rotate(180deg); } li.four { transform: translate(60px) rotate(-200deg) translate(208px) rotate(200deg); } li.five { transform: translate(60px) rotate(-220deg) translate(208px) rotate(220deg) } li span { position:relative; left:-100%; transition: left 200ms ease-in; } li:hover span { left:0; } 

 <ul> <li class="one"><span>Anecdotes</span></li> <li class="two"><span>Interviews</span></li> <li class="three"><span>Records</span></li> <li class="four"><span>Recent Stats</span></li> <li class="five"><span>Recent Snaps</span></li> </ul> 

Answer 2

以下是如何实现下面的曲线，点和文本显示。 你必须调整它以满足你的需要。

 #arch { border-left: solid 2px black; border-radius: 50%; height: 500px; width: 300px; margin-left: 100px; padding-top: 100px; margin-top: -80px; } #arch-outer { /* serves as a blade to cut off overly curved area */ height: 450px; width: 300px; overflow: hidden; /* Cuts off the overly cured area */ } #arch li { font-size: 76px; height: 85px; color: rgb(153, 217, 234); } #arch li:nth-of-type(1) { margin-left: 20px; } #arch li:nth-of-type(4) { margin-left: 15px; } #arch li:nth-of-type(5) { margin-left: 40px; } #arch li a { font-size: 20px; line-height: 76px; vertical-align: middle; color: rgb(153, 217, 234); } 

 <div id="arch-outer"> <div id="arch"> <ul> <li><a href="#">One</a> </li> <li><a href="#">Two</a> </li> <li><a href="#">Three</a> </li> <li><a href="#">Four</a> </li> <li><a href="#">Five</a> </li> <ul> </div> <!-- End arch --> </div> <!-- End arch outer --> 

查看jsfiddle

Answer 3

您可以创建1个空白<div class="curve"></div>并仅显示该div的left border ，如下所示：

.curve{
border-left:2px solid #000;
height:200px;
width:100px;
border-radius:50px; /*see how much you want to curve*/
}

要不然

创建1个曲线image并应用于该背景div并在position帮助下浮动你的点div并使用hover effect显示你的文字。

点击这里http://jsfiddle.net/Lz97rgyf/2/