水墨风格的加载页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #wrap-load{
            width: 163px;
            height: 203px;
            animation: scale 20s;
            animation-fill-mode:forwards;

        }

        @-webkit-keyframes scale {
                  0% {
                      background: url(images/load.png) 0 0;
                    transform: scale(1.5);
                        opacity: 1; }
                 8% {
                      background: url(images/load.png) 0 0;
                    transform: scale(0);
                        opacity: 0; }
                 9% {
                      background: url(images/load.png) -163px 0;
                    transform: scale(0);
                        opacity: 0; }
                 10% {
                      background: url(images/load.png) -163px 0;
                    transform: scale(1.5);
                        opacity: 1; }
                 18% {
                      background: url(images/load.png) -163px 0;
                    transform: scale(0);
                        opacity: 0; }
                 19% {
                      background: url(images/load.png) -326px 0;
                    transform: scale(0);
                        opacity: 0; }
                 20% {
                      background: url(images/load.png) -326px 0;
                    transform: scale(1.5);
                        opacity: 1; }
                 28% {
                      background: url(images/load.png) -326px 0;
                    transform: scale(0);
                        opacity: 0; }
                 29% {
                      background: url(images/load.png) -489px 0;
                    transform: scale(0);
                        opacity: 0; }
                 30% {
                      background: url(images/load.png) -489px 0;
                    transform: scale(1);
                        opacity: 1; }
                 38% {
                      background: url(images/load.png) -489px 0;
                    transform: scale(0);
                        opacity: 0; }
                 39% {
                      background: url(images/load.png) -647px 0;
                    transform: scale(0);
                        opacity: 0; }
                 40% {
                      background: url(images/load.png) -647px 0;
                    transform: scale(1.5);
                        opacity: 1; }
                 48% {
                      background: url(images/load.png) -647px 0;
                    transform: scale(0);
                        opacity: 0; }
                 49% {
                      background: url(images/load.png) -803px 0;
                    transform: scale(0);
                        opacity: 0; }
                 50% {
                      background: url(images/load.png) -803px 0;
                    transform: scale(1);
                        opacity: 1; }
                 58% {
                      background: url(images/load.png) -803px 0;
                    transform: scale(0);
                        opacity: 0; }
                 59% {
                      background: url(images/load.png) 0 -219px;
                    transform: scale(0);
                        opacity: 0; }
                 60% {
                      background: url(images/load.png) 0 -219px;
                    transform: scale(1.5);
                        opacity: 1; }
                 68% {
                      background: url(images/load.png) 0 -219px;
                    transform: scale(0);
                        opacity: 0; }
                 69% {
                      background: url(images/load.png) -163px -219px;
                    transform: scale(0);
                        opacity: 0; }
                 70% {
                      background: url(images/load.png) -163px -219px;
                    transform: scale(1.5);
                        opacity: 1; }
                 78% {
                      background: url(images/load.png) -163px -219px;
                    transform: scale(0);
                        opacity: 0; }
                 79% {
                      background: url(images/load.png) -326px -219px;
                    transform: scale(0);
                        opacity: 0; }
                 80% {
                      background: url(images/load.png) -326px -219px;
                    transform: scale(1.5);
                        opacity: 1; }
                 88% {
                      background: url(images/load.png) -326px -219px;
                    transform: scale(0);
                        opacity: 0; }
                 89% {
                      background: url(images/load.png) -489px -219px;
                    transform: scale(0);
                        opacity: 0; }
                 90% {
                      background: url(images/load.png) -489px -219px;
                    transform: scale(0);
                        opacity: 0; }
                 100% {
                      background: url(images/load.png) -489px -219px;
                    transform: scale(1);
                        opacity: 1; }

        }
    </style>

</head>
<body>
    <!-- 163 326 489 647 803 -->
    <!-- 219 -->
    <div id=‘wrap-load‘></div>
</body>
</html>

时间： 2024-11-08 06:09:52

水墨风格的加载页面的相关文章

屏蔽电信流氓广告造成的诡异的问题--Android WebView 长时间不能加载页面

发现在家里的时候用Android App里的WebView打开网站很慢,会有十几秒甚至更长时间的卡住. 但是在电脑上打开同样的网页却很快. 查找这个问题的过程比较曲折,记录下来. 抓取Android网络数据为了调试这个问题,首先要抓取Android的网络包数据.开始时,是想用Wireshark来抓包的,但是很麻烦,tcpdump在手机要root权限. 于是转换思路,能不能在Android上设置代理,来抓包? 但是fiddler没有linux版本,于是转用BurpSuite了. 设置Androi

爬虫再探实战（三）———爬取动态加载页面——selenium

自学python爬虫也快半年了,在目前看来,我面临着三个待解决的爬虫技术方面的问题:动态加载,多线程并发抓取,模拟登陆.目前正在不断学习相关知识.下面简单写一下用selenium处理动态加载页面相关的知识.目标——抓取页面所有的高考录取分数信息. 对于动态加载,开始的时候是看到Selenium+Phantomjs的强大,直接就学的这个.打开网页查看网页源码(注意不是检查元素)会发现要爬取的信息并不在源码里面.也就是说,从网页源码无法通过解析得到数据.Selenium+Phantomjs的强大一方

artdialog 异步加载页面生成验证码

artdialog 异步加载一个页面需求:例如现在好多网站的登录或注册都是点击弹出一个层出来然后在上面登录.注册这个登录可能在网站的每个页面都会有,但是我们又不能在每个页面都这一段html加载出来不显示,到需要用的时候,在给shou出来,这样做于情于理都说!不!!过!!!去!!!!!! 恰好以前接触过artdialog 不多说上代码,(注意思维,代码是死的方法是活,解决需求不一定非要这个方法 ) 1.页面html代码 1 <head runat="server">

动态加载页面数据的小工具 javascript + jQuery （持续更新）

使用该控件,可以根据url,参数,加载html记录模板(包含json参数对应,以及具体记录位置Index根据参数描述加载对应的属性,并可以根据简单的判断分支加载对应html或者控件)至列表容器内(JQuery选择器字符串)注: 该控件在使用前需引入JQuery框架支持,使用该控件,可极大的减少Ajax列表数据动态加载开发工作的实际工作量. 使用方式: 首先,添加控件引用,并加入Jquery支持 <script src="js/jquery.js"></script&g

在meta标签添加代码实现每次请求都要求重新加载页面而不是读取缓存

<meta http-equiv="pragram" content="no-cache">  <meta http-equiv="cache-control" content="no-cache, must-revalidate"> <!--同上面意思差不多,必须重新加

js加载页面使用execute_script选定加载位置

#由于js逐步加载页面,存在未显示的网页无法加载源码 from selenium import webdriver driver = webdriver.Firefox() init_element = driver.find_element_by_xpath('//a[@href="#" and @title="展开"]') driver.execute_script("return arguments[0].scrollIntoView();"

jquery加载页面的方法(页面加载完成就执行)

jquery加载页面的方法(页面加载完成就执行) jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别. 1.$(function(){ $("#a").click(function(){ //adding your code here }); }); 2.$(document).ready(function(){ $("#a").click(function(){ //a

Ace admin 如何实现类似于freamset加载页面

如上标题所述,ace admin做后台页面的时候,可以实现类似于用freamset的功能,但是ace admin做的比freamset更好,他可以用异步加载的形式展示,而加载的页面的内容可以尽可能的少(或者说按需加载). 这个主要是使用了pjax的功能,pjax的实现原理如下: history API中有几个新特性,分别是history.pushState和history.replaceState,我们把pushState+AJAX进行封装,合起来简单点叫,就是PJAX~ 虽说实现技术上没什么新

easyui的tab加载页面中的form重复提交

http://blog.csdn.net/fxz1982/article/details/8987769 Easyui中的tabs组件以href方式加载目标页面,如果目标页面中有dialog或者window这类的easyui组件中放了form.那么在关闭这个tab再次打开.如果进行form提交操作,后台就会收到两次提交请求,再次重复以上操作会收到3次提交请求,如果将表单serialize()后以jquery的post提交服务器将收到值全是数组方式组织的. 经分析发现,Easyui的tab加载页面