css3 loading 效果1

代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{position: relative;margin: 100px;}
#box span{display: block;width: 9px;height: 5px;position: absolute;bottom: 0;background-color: #9b59b6;-webkit-animation:preloader 1.0s infinite ease-in-out;
}
#box span:nth-child(2){left: 11px;-webkit-animation-delay:0.2s;}
#box span:nth-child(3){left: 22px;-webkit-animation-delay:0.4s;}
#box span:nth-child(4){left: 33px;-webkit-animation-delay:0.6s;}
#box span:nth-child(5){left: 44px;-webkit-animation-delay:0.8s;}
@-webkit-keyframes preloader{0%{height: 5px;transform:translateY(0px);background-color: #9b59b6;}25%{height: 35px;transform:translateY(15px);background-color: #3498db;}50%{height: 5px;transform:translateY(0px);background-color: #9b59b6;}100%{height: 5px;transform:translateY(0px);background-color: #9b59b6;}
}
</style>
</head>
<body><div id="box"><span></span><span></span><span></span><span></span><span></span></div>
</body>
</html>

效果图：

转载于:https://www.cnblogs.com/baixc/p/4430311.html

css3 loading 效果1相关推荐

CSS3 loading效果全
梦想天空关注前端开发技术 ◆ 推动 HTML5 & CSS3 技术发展 ◆ 本博客全新站点:yyyweb.com 欢迎围观:) 首页管理订阅网页设计 JavaScript jQuery ...
css3 loading效果
梦想天空关注前端开发技术 ◆ 推动 HTML5 & CSS3 技术发展 ◆ 本博客全新站点:yyyweb.com 欢迎围观:) 首页管理订阅网页设计 JavaScript jQuery ...
html5 加载svg,HTML5 SVG应用（1）——loading效果
先看一下效果: 链接代码: y="0px" width="40px" height="40px" viewBox="0 0 40 ...
css3个性loading,css3 中实现炫酷的loading效果
•今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 •js需要引入jquery 只用到了一点点js •先看效果图 html: 加载中 . . . css: ...
CSS3实现8种Loading效果【第二波】
CSS3实现8种Loading效果[第二波] 原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接"上菜"-- 注: ...
【转】 CSS3实现10种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记-- PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...
css实现loading,CSS3实现18种Loading效果
昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记-- 第1种效果: 代码如下: .loading{ width: 80px; height: 40px; ...
HTML5+CSS3 最酷的 loading 效果汇总
用 gif 图片来做 loading 的时代已经过去了,它显得太 low 了,而用 HTML5/CSS3 以及 SVG 和 canvas 来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收 ...
常见图像格式类型区别及使用说明绝对路径和相对路径的使用场景css3实现loading效果
经前两天晚上的提问,胡老师给我留下了两个问题: 1. JPEG PNG GIF等图像格式的区别和使用情况: 2. 绝对路径和相对路径的使用场景: 3. 如何用非GIF动画实现loading效果: 以下 ...

css3 loading 效果1

css3 loading 效果1相关推荐

最新文章

热门文章