悬停的CSS伸缩边框动画

Question

我对CSS动画相当陌生，而且我无法按照我想要的方式制作动画边框。最初我想让左右边框从中心伸缩，并在结果col元素悬停时与顶部和底部边框相遇。

我能够弄清楚如何使用顶部和底部边框进行操作，但我将它们放在不同的div中，并给出了它们的初始尺寸。

非常感谢任何帮助或建议。

jsfiddle

＆＃13;

＆＃13;

#case-results {
  background: #f6f5f0;
  padding: 0 0 40px 0;
  text-align: center;
}


.case-results-title hr{
  border: 1px solid #959a90;
  width: 35%;
  float: left;
}


.case-results-title i{
  font-size: 30px;
  color: #787c74;
  padding-top: 5px;
}

.result-col {
  color: #45474e;
}

.result-col:hover {
  color: #45474e;
}

.result-top {
  margin: 0 auto;
  width: 60px;
  height: 20px;
  border-top: 5px solid #959a90;
  border-left: 5px solid #959a90;
  border-right: 5px solid #959a90;
  padding-bottom: 5px;
  margin-top: 40px;
}

.result-col:hover .result-top {
  width: 100%;
  background: #FFF;
  border-top: 5px solid #78a1bb;
  border-left: 5px solid #78a1bb;
  border-right: 5px solid #78a1bb;
  transition: .9s;
}

.result-bottom {
  margin: 0 auto;
  width: 60px;
  height: 20px;
  border-bottom: 5px solid #959a90;
  border-left: 5px solid #959a90;
  border-right: 5px solid #959a90;
  padding-top: 10px;
}

.result-col:hover .result-bottom {
  width: 100%;
  background: #FFF;
  border-bottom: 5px solid #78a1bb;
  border-left: 5px solid #78a1bb;
  border-right: 5px solid #78a1bb;
  transition: .9s;
}

.result-txt {
  min-height: 210px;
    
}
.result-txt p{
    margin:0 0;
}
.result-col:hover .result-txt {
  width: 100%;
  background: #FFF;
  border-left: 5px solid #78a1bb;
  border-right: 5px solid #78a1bb;
  transition-delay: .9s;
  /*transition: .5s;*/
}

.result-amount {
  font-size: 45px;
  padding-top: 30px;
}

.result-type {
  font-size: 24px;
  padding-top: 20px;
}

.result-description {
  padding-bottom: 20px;
  margin: 0;
}

＆＃13;

<section id="case-results">
    	
    	<div class="container">
    		<div class="row">
                <div class="col-sm-6 result-col col-md-3">
                <div class="result-top"></div>
                <div class="result-txt">
                    <p class="result-amount">$100</p>
                    <p class="result-type">Settlement</p>
                    <p class="result-description">blah blah blah</p>
                </div>
                <div class="result-bottom"></div>
                </div>
    		</div><!--/.row-->
    	</div><!--/.container-->

    </section><!--/#case-results-->

＆＃13;

＆＃13;

＆＃13;

Answer 1

我认为你的答案可能是为 min-height 属性设置动画。

您必须将容器的最小高度设置为原始状态（result-txt），然后在悬停状态下将其设置为更大。

有了这个，你不需要额外的顶部和底部div。

＆＃13;

＆＃13;

.case-results-title hr{
  border: 1px solid #959a90;
  width: 35%;
  float: left;
}


.case-results-title i{
  font-size: 30px;
  color: #787c74;
  padding-top: 5px;
}

.result-col {
  color: #45474e;
}

.result-col:hover {
  color: #45474e;
}

.result-txt {
  margin: 0 auto;
  width: 60px;
  border-top: 5px solid #959a90;
  border-left: 0px solid #959a90;
  border-right: 0px solid #959a90;
    border-bottom: 5px solid #959a90;
  padding-bottom: 5px;
  margin-top: 40px;

  height: auto;
  min-height:20px;
}

.result-col:hover .result-txt {
  width: 100%;
  background: #FFF;
  border-top: 5px solid #78a1bb;
  border-left: 5px solid #78a1bb;
  border-right: 5px solid #78a1bb;
    border-bottom: 5px solid #78a1bb;
  transition: .9s;


  min-height:200px;
}
.result-txt p{
    margin:0 0;
}
.result-col:hover .result-txt {
  width: 100%;
  background: #FFF;
  border-left: 5px solid #78a1bb;
  border-right: 5px solid #78a1bb;
  transition-delay: .9s;
  /*transition: .5s;*/
}
.result-amount {
  font-size: 45px;
  padding-top: 30px;
}
.result-type {
  font-size: 24px;
  padding-top: 20px;
}
.result-description {
  padding-bottom: 20px;
  margin: 0;
}
#case-results {
  background: #f6f5f0;
  padding: 0 0 40px 0;
  text-align: center;
}

＆＃13;

<section id="case-results">
    	
    	<div class="container">
    		<div class="row">
                <div class="col-sm-6 result-col col-md-3">
                
                <div class="result-txt">
                    <p class="result-amount">$100</p>
                    <p class="result-type">Settlement</p>
                    <p class="result-description">blah blah blah</p>
                </div>
                
                </div>
    		</div><!--/.row-->
    	</div><!--/.container-->

    </section><!--/#case-results-->
    

＆＃13;

＆＃13;

＆＃13;