逛博客时看到一个很有意思的特效
于是强迫症来了

用到css的渐变和动画
直接上代码

CSS

<style>
#loading {
    width:100%;
    height:200%;
    position:fixed;
    background:-webkit-linear-gradient(top,rgba(255,255,255,0),#eee 100px);
    background:-moz-linear-gradient(top,rgba(255,255,255,0),#eee 100px);
    background:-o-linear-gradient(top,rgba(255,255,255,0),#eee 100px);
    background:-ms-linear-gradient(top,rgba(255,255,255,0),#eee 100px);
    background:linear-gradient(top,rgba(255,255,255,0),#eee 100px);
    left:0;
    -webkit-animation:loading 2s;
    animation:loading 2s;
    pointer-events:none;
    opacity:0;
    top:100%;
    z-index:10000
}
@keyframes loading {
    from {
    top:-100px;
    opacity:1
}
to {
    top:100%;
    opacity:1
}
}@-webkit-keyframes loading {
    from {
    top:-100px;
    opacity:1
}
to {
    top:100%;
    opacity:1
}
}
</style>

引用

在下添加<div id="loading"></div>引用，主题下引用一般在header.php里，例如下面

<body>
<div id="loading"></div>
...
</body>

图效
效果


另外搜索animation:loading 2s;或者Loading(加载)动画效果你就发现有很多这样的特效

例如这个博客的loading特效也是不错的

这个特效个人觉得对于那些加载不是那么快的站点来说，给人的感觉不那么单调吧

标签：CSS, loading

你的评论