Question

我的所有按钮都有一个轻松的功能。他们都工作，只有我的社交按钮不能正常工作。他们给出了不透明度，但不是3s的轻松。

这就是我所拥有的：

<div class="contact-links">
<a class="fb" href="https://www.facebook.com/cgiphart" target="_blank"><img src="images/icon_fb.png" width="40px" height="40px"></a>
<a class="da" href="https://www.veavictis.deviantart.com" target="_blank"><img src="images/icon_da.png" width="40px" height="40px"></a>
</div>

.contact-links 
{
    position:absolute;
    float:left;
   -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -ms-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
}


.contact-links a:hover
{

    opacity: 0.5;

}

Answer 1

定位Anchor元素的转换，并为非悬停状态添加默认的不透明度。

.contact-links a {
    opacity:1;
    position:absolute;
    float:left;    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -ms-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out; }

Answer 2

您需要在opacity上定义.contact-links的值，否则您将从未知值转换，因此无法推断关键帧，也无法实现转换。

您还需要在要设置动画的元素上定义transition。下面的CSS应该可以工作：

.contact-links a{
    opacity:1; /* <-- any transitioning property needs a starting value */
    -webkit-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out;
}  
.contact-links a:hover{
    opacity: 0.5;
}

缓入功能不起作用，该怎么办？

2 个答案: