【问题标题】:Ease-in-out function doesn't work, what to do?缓入出功能不起作用,怎么办?
【发布时间】:2014-06-17 22:07:52
【问题描述】:

我所有的按钮都具有缓入缓出功能。它们都能正常工作,只有我的社交按钮无法正常工作。它们提供不透明度,但不提供 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;

}

【问题讨论】:

  • .contact-links { opacity: 0; }

标签: html css button opacity


【解决方案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; }

【讨论】:

    【解决方案2】:

    您需要在.contact-links 上为opacity 定义一个值,否则您正在从未知值过渡,因此无法推断关键帧并且不会实现过渡。

    您还需要在动画元素上定义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;
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-09-13
      • 1970-01-01
      • 2014-03-02
      • 2020-10-31
      • 1970-01-01
      相关资源
      最近更新 更多