0
我對CSS動畫相當陌生,並且遇到了以我想要的方式動畫邊框的問題。最初我想從中心獲得左右邊框望遠鏡,並在結果元素懸停時滿足頂部和底部邊界。懸停的CSS伸縮邊框動畫
我能弄清楚如何用頂部和底部的邊框做到這一點,但我把它們放在單獨的div中,並給了它們最初的尺寸。
任何幫助或建議將不勝感激。
#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;
}
<section id="case-results">
\t
\t <div class="container">
\t \t <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>
\t \t </div><!--/.row-->
\t </div><!--/.container-->
</section><!--/#case-results-->