<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3种炫酷纯CSS3预加载动画特效</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
<style type="text/css">
.loader{
width: 56px;
height: 50px;
margin: 50px auto;
position: relative;
perspective: 100px;
perspective-origin: 50% 100%;
transform-style: preserve-3d;
transform: translateZ(-1px);
}
.loader .loader-inner{
width: 50%;
height: 100%;
background: #fff;
border: 3px solid #fc440f;
position: absolute;
right: 0;
transform-origin: 0% 100%;
}
.loader .loader-inner:first-child{
left: 0;
}
.loader .loader-inner hr{
margin: 3px 3px 6px;
border: 1px solid rgba(252,68,15, 0.9);
}
.loader .loader-inner.box{
-webkit-animation: loading-1 3.6s infinite ease-in-out;
animation: loading-1 3.6s infinite ease-in-out;
}
.loader .loader-inner.box-1{
animation-delay: .2s;
}
.loader .loader-inner.box-2{
animation-delay: .4s;
}
.loader .loader-inner.box-3{
animation-delay: 0.6s;
}
.loader .loader-inner.box-4{
animation-delay: 0.8s;
}
.loader .loader-inner.box-5{
animation-delay: 1.8s;
}
.loader .loader-inner.box-6{
animation-delay: 2.2s;
}
@-webkit-keyframes loading-1{
25%,100%{
transform: translateX(3px) rotateY(-180deg);
}
}
@keyframes loading-1{
25%,100%{
transform: translateX(3px) rotateY(-180deg);
}
}
</style>
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>3种炫酷纯CSS3预加载动画特效 <span>Preloader Style</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
<div class="htmleaf-demo center">
<a href="index.html" class="current">DEMO1</a>
<a href="index2.html">DEMO2</a>
<a href="index3.html">DEMO3</a>
</div>
</header>
<div class="demo">
<div class="container">
<div class="row text-center">
<h3 class="white">CSS3预加载动画-1</h3>
</div>
<div class="row">
<div class="col-md-12">
<div class="loader">
<div class="loader-inner"><hr><hr><hr><hr><hr></div>
<div class="loader-inner box box-1"><hr><hr><hr><hr><hr></div>
<div class="loader-inner box box-2"><hr><hr><hr><hr><hr></div>
<div class="loader-inner box box-3"><hr><hr><hr><hr><hr></div>
<div class="loader-inner box box-4"><hr><hr><hr><hr><hr></div>
<div class="loader-inner box box-5"><hr><hr><hr><hr><hr></div>
<div class="loader-inner box box-6"><hr><hr><hr><hr><hr></div>
<div class="loader-inner"><hr><hr><hr><hr><hr></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
炫酷纯CSS3预加载动画特效源码 3种.zip （11个子文件） 
132677723313491911 CSS3_jiazai css 
htmleaf-demo.css 6KB bootstrap-grid.min.css 28KB related 
2.jpg 27KB 1.jpg 20KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 4KB index2.html 4KB index3.html 3KB资源评论
毕业_设计
- 粉丝: 1979
- 资源: 1万+
最新资源
- YOLOv8完整网络结构图详细visio
- LCD1602电子时钟程序
- 西北太平洋热带气旋【灾害风险统计】及【登陆我国次数评估】数据集-1980-2023
- 全球干旱数据集【自校准帕尔默干旱程度指数scPDSI】-190101-202312-0.5x0.5
- 基于Python实现的VAE（变分自编码器）训练算法源代码+使用说明
- 全球干旱数据集【标准化降水蒸发指数SPEI-12】-190101-202312-0.5x0.5
- C语言小游戏-五子棋-详细代码可运行
- 全球干旱数据集【标准化降水蒸发指数SPEI-03】-190101-202312-0.5x0.5
- spring boot aop记录修改前后的值demo
- 全球干旱数据集【标准化降水蒸发指数SPEI-01】-190101-202312-0.5x0.5
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
