自制css3进度条小动画
来源:互联网 发布:抱枕淘宝店推荐 编辑:程序博客网 时间:2024/05/01 16:51
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css3进度条小动画</title><style>.loading{width:100%;height:100%;position:fixed;left:0;top:0;z-index:100;background:#FFF;}.loading .pic{width:50px;height:50px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}.loading .pic i{display:block;width:6px;height:50px;background:#06C;float:left;margin:0 2px;-webkit-transform:scaleY(0.4); -ms-transform:scaleY(0.4); transform:scaleY(0.4);-webkit-animation:load 1.2s infinite; animation:load 1.2s infinite;};.loading .pic i:nth-child(2){-webkit-animation-delay:0.1s;animation-delay:0.1s;}.loading .pic i:nth-child(3){-webkit-animation-delay:0.2s;animation-delay:0.2s;}.loading .pic i:nth-child(4){-webkit-animation-delay:0.3s;animation-delay:0.3s;}.loading .pic i:nth-child(5){-webkit-animation-delay:0.4s;animation-delay:0.4s;}@-webkit-keyframes load{0%,40%,100%{-webkit-transform:scaleY(0.4); transform:scaleY(0.4);}20%{-webkit-transform:scaleY(1); transform:scaleY(1);}}@keyframes load{0%,40%,100%{-webkit-transform:scaleY(0.4); transform:scaleY(0.4);}20%{-webkit-transform:scaleY(1); transform:scaleY(1);}}</style><script src="http://localhost/jquery-3.2.1.min.js"></script><script>document.onreadystatechange=function(){if(document.readyState=="complete"){$(".loading").fadeOut();}}</script></head><body><div class="loading"> <div class="pic"> <i></i> <i></i> <i></i> <i></i> <i></i> </div> </div><img src="http://p0.so.qhimgs1.com/t011fdff1cc0c3b5ddc.jpg"/> <img src="http://p1.so.qhimgs1.com/t01a7de1625f9c79011.jpg"/> <img src="http://p2.so.qhmsg.com/t0152d7e8bb9f3f79c7.jpg"/> <img src="http://p3.so.qhmsg.com/t017007538171c7e6a8.jpg"/> <img src="http://p2.so.qhimgs1.com/t01279fce5fe1f2724e.jpg"/> <img src="http://p1.so.qhimgs1.com/t01d184559fd4583b51.jpg"/></body></html>
写完css3代码之后可以让代码兼容浏览器的工具网址:
http://autoprefixer.github.io/
阅读全文
0 0
- 自制css3进度条小动画
- 用CSS3实现动画进度条
- CSS3加载小动画
- CSS3 小动画
- css3 animation小动画
- css3实现圆环加载进度条动画
- 进度条小飞机移动动画
- css3小动画的实现
- CSS3 动画配合clip属性创建圆形进度条动画
- 详解用CSS3制作圆形滚动进度条动画效果
- 使用SVG和CSS3创建圆形进度条动画
- 详解用CSS3制作圆形滚动进度条动画效果
- 轮播图插件、CSS3进度条插件、HTML5动画特效
- css3带缺口圆环的步骤条进度条动画制作
- css3进度条
- css3 进度条
- css3实现旋转小三角动画
- CSS3 可爱的小乌龟游泳动画
- 高斯消元法
- java执行器框架执行任务并返回结果
- 前端面试题整理
- U盘重装系统
- B
- 自制css3进度条小动画
- Mac Os 配置java开发环境(Eclipse)
- 定风波
- Python 修改AD账号密码(一)- 启用域控LDAPS
- css的扩展选择器
- python学习笔记(1)
- hihocoder 1531 德国心脏病 (模拟)
- python之路——sys模块与os模块
- Android 8.0新特性