css编写加载页面动画效果

一、html代码

<!-- Loader --><div id="loader-wrapper"><div id="loader"></div><div class="loader-section section-left"></div><div class="loader-section section-right"></div></div><div>222222</div>

二、js代码

<script>/* 创建loaded类*/window.onload = function () {$('body').addClass('loaded');}/* 加载完成，结束加载动画 */var lod =document.getElementById("loader-wrapper");setTimeout('lod.style.display = "none"',2000);
</script>

三、css代码

/* Loader */
#loader-wrapper {position: fixed;width: 100%;height: 100%;z-index: 2000;}
/* 构建动画 */
#loader {position: relative;top: 50%;left: 50%;border: 3px solid transparent;border-top-color: blue;height: 150px;width: 150px;border-radius: 50%;margin: -75px 0 0 -75px;animation: spin 2s linear infinite;z-index: 1001;
}
#loader:before{content: "";position: absolute;border-radius: 50%;border: 3px solid transparent;border-top-color: #e74c3c;top: 5px;left: 5px;right: 5px;bottom: 5px;animation: spin 3s linear infinite; }#loader::after{content: "";position: absolute;border-radius: 50%;border: 3px solid transparent;border-top-color: #11e71f;top: 15px;left: 15px;right: 15px;bottom: 15px;animation: spin 3s linear infinite; }@keyframes spin {0% {transform: rotate(0deg); }100% {transform: rotate(360deg); }}/* 背景动画 */#loader-wrapper .loader-section {position: fixed;top: 0;width: 100%;height: 100%;background: #222222;z-index: 1000;transform: translateX(0); }
#loader-wrapper .loader-section.section-left {left: 0;
}

四、运行效果

css编写加载页面动画效果相关推荐

html 载入中,用纯CSS实现加载中动画效果
今天要介绍的是用简单的CSS--只用CSS,不用Gif--制作"加载中-"动画效果.先看看效果: 上面的这个加载中效果,以前是用gif动图实现的,但随着CSS的进步,CSS动画功能 ...
html实现图片加载动画效果,HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% 代码如下: ...
PhP加载时显示动画,在ajax请求完之前的loading加载的动画效果实现
这篇文章给大家介绍的内容是关于在ajax请求完之前的loading加载的动画效果实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 很多时候我们需要引入框架来开发项目,这时我们可能会 ...
好看的css预加载旋转动画与流光字体
今天刚好在做这个功能,就实现一个预加载的动画效果,随手记录一.预加载旋转动画 Html <view class="concentric_round"></vi ...
[Swift通天遁地]五、高级扩展-(11)图像加载Loading动画效果的自定义和缓存
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ➤微信公众号:山青咏芝(shanqingyongzhi) ➤博客园地址:山青咏芝(https://www.cnblog ...
CSS3实现loading（加载）动画效果
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
android菊花动画,Android实现仿iOS菊花加载圈动画效果
常见的实现方式切图,做旋转动画自定义View,绘制效果 gif图 1.切图会增加体积,但相对简单,不过在换肤的场景下,会使用不同颜色,需要准备多张图,不够灵活. 2.由于自定义的好处,不同颜色只需 ...
android刷新时的圆形动画_Android自定义加载圈动画效果
本文实例为大家分享了Android自定义加载圈动画展示的具体代码,供大家参考,具体内容如下实现如下效果: 该效果图主要有3个动画: 1.旋转动画 2.聚合动画 3.扩散动画以上3个动画都是通过Va ...
html5点赞仿抖音,iOS仿抖音—加载点赞动画效果
iOS仿抖音短视频前言前段时间比较忙,最近终于有时间就继续对仿抖音的demo进行更新,本次更新的主要是抖音上的几种动画,下面先来看下效果图: 抖音说明经过观察发现抖音主要要以下几种动画效果: ...

css编写加载页面动画效果

一、html代码

二、js代码

三、css代码

四、运行效果

css编写加载页面动画效果相关推荐

最新文章

热门文章