我正在尝试在 https://ollynural.github.io/ 上的社交媒体链接上创建转换但我无法让它按预期工作。
当鼠标悬停在每个图标上时,我的目标是让小时栏平滑地将左右两侧过渡到正确的点,同时使其变小。此刻它会将条的起点移动到较小部分的设定点,然后平滑地减小它。我不太确定如何处理这个问题,我现在主要在试验 CSS 和过渡。
我做了一个 JSFiddle here尽我所能。
.social-links {
margin: 0 auto;
width: 50%;
}
hr {
width: 90%;
border-top: 2px solid #8c8b8b;
transition: width 0.5s ease;
}
@media (min-width: 768px) {
.social-links {
width: 30%;
}
}
.social-links span {
width: 100%;
text-align: center;
font-size: 1.8rem;
margin-top: 15px;
}
@media (min-width: 420px) {
.social-links span {
font-size: 2rem;
margin-top: 25px;
}
}
.fa-github:hover {
color: #64a4df;
}
.github-link:hover ~ .social-line {
width: 7.5%;
margin-left: 9%;
}
.fa-linkedin-square:hover {
color: #64a4df;
}
.linkedin-link:hover ~ .social-line {
width: 7.5%;
margin-left: 34%;
}
.fa-twitter-square:hover {
color: #64a4df;
}
.twitter-link:hover ~ .social-line {
width: 7.5%;
margin-left: 59%;
}
.fa-facebook-square:hover {
color: #64a4df;
}
.facebook-link:hover ~ .social-line {
width: 7.5%;
margin-left: 84%;
}
.social-link {
margin-bottom: 20px;
padding-right: 0px;
padding-left: 0px;
height: 20px;
width: 20px;
background: red;
}
<div class="social-bar">
<div class="col-xs-12">
<div class="social-links">
<div class="col-xs-3 github-link social-link">
<a href="https://github.com/OllyNural" target="github">
<span class="fa fa-github"></span>
</a>
</div>
<div class="col-xs-3 linkedin-link social-link">
<a href="https://www.linkedin.com/in/oliver-nural-43565497" target="linkedin">
<span class="fa fa-linkedin-square"></span>
</a>
</div>
<div class="col-xs-3 twitter-link social-link">
<a href="https://twitter.com/OliverNural" target="twitter">
<span class="fa fa-twitter-square"></span>
</a>
</div>
<div class="col-xs-3 facebook-link social-link">
<a href="https://www.facebook.com/Olly.Nural" target="facebook">
<span class="fa fa-facebook-square"></span>
</a>
</div>
<hr class="social-line">
</div>
</div>
</div>
谢谢,奥利
最佳答案
您在这里更改了两个属性,width
和 margin-left
。
因此,您需要为 width
(正如您所做的那样)和 margin-left
设置过渡。
为了使其顺利运行,您需要为 `margin-left' 设置一个数字初始值。
这对我有用:
hr {
margin-left: 5%;
width: 90%;
border-top: 2px solid #8c8b8b;
transition: width 0.5s ease, margin-left 0.5s ease;
}
关于html - CSS <hr> 宽度过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39649817/