Question

如果您可以在我的css动画中查看下面的代码，我将非常感谢您的帮助。我试图让这项工作变得更好。我希望这个下划线从图标下方开始，不要粘在窗口上，而是在第一个图标下面右边有一些空格。

＆＃13;

* {
  box-sizing: border-box;
}

body {
  font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}

.container {
  width: 100%;
  margin: 0 auto;
}

ul li {
  display: inline;
  text-align: center;
}

a {
  display: inline-block;
  width: 25%;
  padding: .75rem 0;
  margin: 0;
  text-decoration: none;
  color: #333;
}

.two:hover ~ hr {
  margin-left: 40%;
}
.one:hover ~ hr {
  margin-left: 12.5%;
}

.three:hover ~ hr {
  margin-left: 66%;
}

.four:hover ~ hr {
  margin-left: 75%;
}

hr {
  height: .25rem;
  width: 20%;
  margin: 0;
  background: tomato;
  border: none;
  transition: .3s ease-in-out;
}

.home-content-1{background-color: #F7F8F9; text-align: center;padding:5em 0em 2em;}

.home-content-1 .row{margin-top: 2em;}

.home-content-1 h3{font-weight: 700;text-transform: uppercase;color: #646464;font-size: 1.3125em;}

.hc-icon{width: 150px;height: 150px;border-radius: 50%;margin: 0px auto 2.25em;}
.hc-icon img{padding-top: 30px;}


.hc-icon1{background: #b5d73c;}
.hc-icon2{background: #32aaeb;}
.hc-icon3{background: #ef3f54;}
  
  .circles li { padding: 10px;}

hr {
  height: .25rem;
  width: 22%;
  margin-left: 12.5%;
  background: tomato;
  border: none;
  transition: .3s ease-in-out;
}

＆＃13;

<div class="home-content-1">
   <div class="container">

    <h1>The Blabla Approach</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
   <div class="row">
 <div class="col span_1_of_4">
  <ul class="circles">
    <li class="one"><a href="#">
      <div class="hc-icon hc-icon1"></div>
      <h3>Demand Generation</h3></a></li>
      <li class="two"><a href="#"><div class="hc-icon hc-icon1">
            </div>
            <h3>Demand Generation</h3></a>
    </li>
 <li class="three">
   <a href="#">
     <div class="hc-icon hc-icon1"></div>
            <h3>Demand Generation</h3></a></li>
    <hr />
  </ul>
</div>

＆＃13;

请在此处查看我的所有代码 - http://codepen.io/anetk/pen/QyZLNb

Answer 1

最简单的解决方案是在<hr>上添加一种风格，以改变它的起始位置。

的CSS：

hr {
  height: .25rem;
  width: 20%;
  margin-left: 12.5%;
  background: tomato;
  border: none;
  transition: .3s ease-in-out;
}

想法是将hr与第一个圆圈对齐。您希望使用％和不 px，以便对齐将响应窗口的大小。

更改时间从margin: 0;到margin-left: 12.5%;

Answer 2

就个人而言，我会这样做。我删除了所有的标题，以隔离你想要做的事情。我用'div'替换你的'hr'元素。将div的相对位置更改为父容器感觉比更改尺寸为body的'hr'元素上的边距更安全。这会响应地将'highlight'div与'li'元素进行调整。您可以根据自己的喜好调整“圆圈”容器的边距和宽度。

HTML：

<ul class="circles">
<li class="one">
  <a href="#">
    <div class="hc-icon hc-icon1"></div>
    <h3>Demand Generation</h3>
  </a>
</li>
<li class="two">
  <a href="#">
    <div class="hc-icon hc-icon1"></div>
    <h3>Demand Generation</h3></a>
</li>
<li class="three">
  <a href="#">
    <div class="hc-icon hc-icon1"></div>
    <h3>Demand Generation</h3>
  </a>
</li>
<div class="highlight"></div>
</ul>

CSS：

body {
  font: 300 100% 'Helvetica Neue', Helvetica, Arial;
  margin:0;
}
.circles {
  display:inline-block;
  width:80%;
  margin:0 10%;
  padding:0;
}
.circles li {
  display:inline-block;
  list-style-type:none;
  text-align:center;
  width:33%;
}
.highlight {
  position:relative;
  left:0;
  height:5px;
  width:33%;
  background: tomato;
  transition: .3s ease-in-out;
}
a {
  display: inline-block;
  width: 100%;
  margin: 0;
  text-decoration: none;
  color: #333;
}
.two:hover ~ .highlight {
  left: 33%;
}
.three:hover ~ .highlight {
  left: 66%;
}
.circles h3{font-weight: 700;text-transform: uppercase;color: #646464;font-size: 1.3125em;}
.hc-icon{width: 150px;height: 150px;border-radius: 50%;margin: 0px auto 2.25em;}
.hc-icon1{background: #b5d73c;}
.hc-icon2{background: #32aaeb;}
.hc-icon3{background: #ef3f54;}

http://codepen.io/midgitsuu/pen/VeEKgQ

CSS动画需要修正

2 个答案: