Question

我希望我的徽标在页面加载后具有以下饱和度效果并且缓出。这可能吗？或者它只适用于“悬停”？这是我的代码：

/* CSS*/
     #logo {
        -moz-transition: all 7s ease-out;  
        -o-transition: all 7s ease-out;  
        -webkit-transition: all 7s ease-out;  
        -ms-transition: all 7s ease-out;  
        transition: all 7s ease-out;
        filter: saturate(120%);
        -webkit-filter: saturate(120%);
        -moz-filter: saturate(120%);
        -o-filter: saturate(120%);
        -ms-filter: saturate(120%);
        cursor:default;

        }


     /* HTML */
 <div id="logo">
        <h4>MyLogo</h4>
        </div>

Answer 1

当然你可以这样做，为什么不呢？

例如，我们会做一些改变你的徽标。我们将默认的margin-top设置为-50px，因此徽标不会显示在页面上，然后当页面完全加载时，将使用jQuery将类添加到徽标DOM。

这里如何：

$(document).on("ready", function () {
    $("#logo").addClass("trans");
});

这是完整的小提琴：http://jsfiddle.net/c2d4xv13/

你可以看看它，当然如果你有任何进一步的问题在这里回答你。

祝你好运，玩得开心。

Answer 2

我删除了浏览器特定的前缀，但如果您只关注更现代的浏览器支持，则可以使用CSS动画。我还添加了一个随机颜色来显示它的工作情况。

#logo h4 {
    filter: saturate(10%); 
    color: fuchsia; 
    animation: sat 7s ease-out 1;
    animation-fill-mode: forwards;
}

@keyframes sat {
    100% {
        filter: saturate(120%);    
    }
}

example pen

页面加载时的缓动效果

2 个答案: