【问题标题】:slow transition on hover css悬停CSS上的缓慢过渡
【发布时间】:2016-10-20 17:17:46
【问题描述】:

我有一个带有背景的滑块,悬停在此处: http://nigarn.com

我尝试了多种 CSS 来减缓白色背景的过渡,但都没有奏效。

这是我目前拥有的:

.sp-layer {
    opacity: 1 !important;
 -moz-transition: opacity 7.5s!important;
    -webkit-transition: opacity 7.5s!important;
    transition: opacity 7.5s!important;
color: #fff;
padding-top: 157px!important;
padding-bottom: 180px!important;
 pointer-events: none;
}


.sp-slide:hover .sp-layer {
    opacity: 1 !important;
 -moz-transition: opacity 7.5s!important;
    -webkit-transition: opacity 7.5s!important;
    transition: opacity 7.5s!important;
color: #000;
background:url(http://www.nigarn.com/wp-content/uploads/2016/10/slide-background-2-5.png)no-repeat center top;
padding-top: 157px!important;
padding-bottom: 180px!important;
 pointer-events: none;
}

但背景仍然会立即弹出。如果有人有建议,我很感激。

【问题讨论】:

    标签: css hover transition


    【解决方案1】:

    首先,当您实际尝试为background-image 设置动画时,您正在为opacity 属性设置动画; opacity 一开始就不是 0。其次,目前没有办法通过 CSS transition 淡入 background-image

    由于您的背景图片似乎是统一的半透明颜色,您应该改用background-color

    .sp-layer {
        transition: background-color 0.75s;
    }
    .sp-slide:hover .sp-layer {
        background-color: rgba(255, 255, 255, 0.75);
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-01-22
      • 2021-05-17
      • 2014-08-19
      • 2011-11-10
      • 2017-04-03
      • 2011-10-08
      • 1970-01-01
      相关资源
      最近更新 更多