demo记录

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><!--IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame -->
    <meta name="renderer" content="webkit" /><!--默认内核-->
    <meta name="author" content="Tony,田槐旺"><!--作者-->
    <meta name="keywords" content="PHP,前端,全栈开发,个人博客"><!--关键词-->
    <meta name="description" content="Tony的个人博客,全栈开发,PHP开发"><!--描述-->
    <!--<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">&lt;!&ndash;将http的不安全请求升级为https&ndash;&gt;-->
    <link rel="shortcut icon" href="__PUBLIC__/Home/imgs/author.jpg" />
    <title>关于作者</title>
    <!--[]>
    <script type="text/javascript">
        , html5tags = ["header", "footer", "nav", "aside", "article", "section"];
        for (i in html5tags) {
            document.createElement(html5tags[i]);
        }
    </script>
    <![endif]-->
    <!--[]>
    <script>window.location.href = "__MODULE__/Ie/ie";</script>
    <![endif]-->
    <link rel="stylesheet" href="__PUBLIC__/Home/css/base.css"><!--初始化-->
    <link rel="stylesheet" href="__PUBLIC__/Home/css/style.css">
    <link rel="stylesheet" href="__PUBLIC__/Home/css/animate.css">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome-4.7.0/css/font-awesome.css">
    <style type="text/css">
        .hi {
            width: 50px;
            height: 72px;
            background-image: url("http://s.cdpn.io/79/sprite-steps.png");
            -webkit-animation: play .8s steps() infinite;
               -moz-animation: play .8s steps() infinite;
                -ms-animation: play .8s steps() infinite;
                 -o-animation: play .8s steps() infinite;
                    animation: play .8s steps() infinite;
        }

        @-webkit-keyframes play {
           from { background-position:    0px; }
             to { background-position: -500px; }
        }

        @-moz-keyframes play {
           from { background-position:    0px; }
             to { background-position: -500px; }
        }

        @-ms-keyframes play {
           from { background-position:    0px; }
             to { background-position: -500px; }
        }

        @-o-keyframes play {
           from { background-position:    0px; }
             to { background-position: -500px; }
        }

        @keyframes play {
           from { background-position:    0px; }
             to { background-position: -500px; }
        }

        @-webkit-keyframes typing {
             }
            to { width:.3em }
        }

        @-moz-keyframes typing {
             }
            to { width:.3em }
        }

        @-webkit-keyframes blink-caret {
            from, to { border-color: transparent }
            % { border-color: black }
        }

        @-moz-keyframes blink-caret {
            from, to { border-color: transparent }
            % { border-color: black }
        }
        h1 {
            width:.3em;
            white-space:nowrap;
            overflow:hidden;
            border-right: .1em solid black;
            -webkit-animation: typing 7s steps(, end), /* # of steps = # of characters */
                                blink-caret 1s step-end infinite;
            -moz-animation: typing 7s steps(, end), /* # of steps = # of characters */
                                blink-caret 1s step-end infinite;
        }

        .avatar {
          height: 200px;
          width: 200px;
          background: url(http://ww1.sinaimg.cn/large/67c839fajw1f2staqebnxj20nk05wjru.jpg) no-repeat 0 0;
          /*visibility: hidden; */
        }

        .above:hover {
          -webkit-animation: run .6s steps() infinite;
          /*-webkit-animation: run .6s steps(1) infinite; */
        }

        .down:hover {
          -webkit-animation: run .6s linear infinite;
        }

        @keyframes run {
          % {
            background-position:  ;
          }
          % {
            background-position: -200px ;
          }
          % {
            background-position: -400px ;
          }
          % {
            background-position: -600px ;
          }
          % {
            background-position:  ;
          }
        }

        @keyframes run2 {
          % {
            background-position:  ;
          }
          % {
            background-position: -800px ;
          }

        }

        @-webkit-keyframes tuski {
            % {
                background-position:;
            }
            % {
                background-position: -576px ;
            }
        }
        @-moz-keyframes tuski {
            % {
                background-position:;
            }
            % {
                background-position: -576px ;
            }
        }
        @keyframes tuski {
            % {
                background-position:;
            }
            % {
                background-position: -576px ;
            }
        }

        #tuski {
            width: 48px;
            height: 48px;
            background-image: url(http://acwongblog.qiniudn.com/2015-03_tuski-sprite.png);
            background-repeat: no-repeat;
            background-position:  ;
            -webkit-animation: tuski .5s steps() infinite;
            -moz-animation: tuski .5s steps() infinite;
            animation: tuski .5s steps() infinite;
        }
    </style>
</head>
<body>
<!--loading page-->
<div class="loader">
    <div class="loader-content">
        <img src="__PUBLIC__/Home/imgs/loading.gif" alt="Loader" class="loader-loader"/>
    </div>
</div>
<!--文档导航-->
<header>
    <div class="top-nav">
        <span>小田博客-原创个人网站</span>
    </div>
    <nav>
        <ul class="nav">
            <li><a class="nav-class" href="__MODULE__/Index/index" title="首页">首页</a></li>
             <volist name="navdata" id="vol">
                <li class="nav-class">
                    <a title="{$vol.catename}" href="__MODULE__/Cate/index/id/{$vol.id}">{$vol.catename}</a>
                </li>
            </volist>
            <li><a class="nav-class" href="__MODULE__/Index/item" title="项目展示">项目展示</a></li>
            <li><a class="nav-class" href="__MODULE__/Index/author" title="关于作者">关于作者</a></li>
            <li><a class="nav-class" href="__MODULE__/Message/index" title="留言板">留言板</a></li>
        </ul>
    </nav>
</header>
<!--返回顶部-->
<div class="toolbar">
    <a href="__MODULE__/Message/index" class="toolbar-item toolbar-item-feedback"></a>
    <a href="javascript:;" id="top" class="toolbar-item toolbar-item-top"></a>
</div>
<section>
    <h1>Typing animation by Lea Verou.</h1>
    <img src="http://s.cdpn.io/79/sprite-steps.png" />
    <div class="hi"></div>
    <hr>
    <h3>tips:鼠标悬停图片上方预览效果</h3>
    <p> 使用steps属性控制时间函数</p>
    <div class = 'avatar above'></div>
    <p> 使用linear控制时间函数</p>
    <div class = 'avatar down'></div>
    <hr>
    <div id="tuski"></div>
    <input type=" step="0.5" value="0.5">
    <p>拉动滑块调整动画速度</p>

</section>

<!--文档底部-->
<include file="Public/foot"/>

<script src="__PUBLIC__/Home/js/jquery-1.8.3.min.js"></script>
<script src="__PUBLIC__/Home/js/public.js"></script>
<script type="text/javascript">
    var range = document.querySelector("#slider");
var tuski = document.querySelector("#tuski");
range.addEventListener("change", function(event){
    var value = event.target.value;
    tuski.style.webkitAnimationDuration = value + "s";
    tuski.style.mozAnimationDuration = value + "s";
    tuski.style.animationDuration = value + "s";
});
</script>
</body>
</html>

demo记录的更多相关文章

使用Flexible适配移动端html页面 - demo记录
前段时间看了大神的博客文章[使用Flexible实现手淘H5页面的终端适配](地址:http://www.w3cplus.com/mobile/lib-flexible-for-html5-layou ...
demo 记录通用方法什么的到这里抄一下
function killerrors() { return true; } window.onerror = killerrors; //检查浏览器类型 function checkBrowser( ...
菜单下拉效果demo记录
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
java8 stream/optional个人测试demo记录
备忘记录 package cc.ash; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConst ...
枚举，Enum，常规使用demo记录
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mv ...
require demo 记录备份
预览地址 http://127.0.0.1:8020/requireDemo/myNEW/index.html 注意远程的非模块的 empty: demo2
第一个MICO CORBA demo实录
因为忙于其他事情没有仔细去学习CORBA原理,也就大概根据网上的教程搭了一个使用MICO的demo 记录如下. 这里的话,代码我就不贴了,程序也不详细解释了,因为项目文件夹里有一个PPT详细解释了这个 ...
c#正则表达式最简demo
各个语言的正则表达式规则略有不同项目中用到,所以将这个最简单的demo记录 using System; using System.Collections.Generic; using System. ...
使用SSI框架写的简单Demo（查询模块）
在网上看到好多个版本,自己有时间索性就写个Demo记录下整个框架的逻辑流程: 1.首先拷贝整个框架所需要的jar包到WEB-INF/lib包下(这个网上都可以搜到的) 2.配置文件的配置, 2.1.在 ...

随机推荐

Android应用程序无法读写USB设备的解决方法
假设android系统中的API或者apk无法读写usb设备.可能是没有加入读写usb的权限,须要依照例如以下方法进行设置: 1. 在android.hardware.usb.host.xml文件里加 ...
【POJ3074】Sudoku DLX（Dancing Links）
数独就要DLX,不然不乐意. 数独的DLX构造:9*9个点每一个点有9种选择,这构成了DLX的729行,每行.列.阵有限制,均为9行(/列/阵),然后每行(/列/阵)都有九种数的情况.于是就有了3*9 ...
ios block 内存管理时使用注意
XMGStudent *stu = [[XMGStudent alloc] init]; __weak XMGStudent *weakStu = stu; stu.block = ^{ NSLog( ...
我所未知的 typeof 现象
一.一些基本使用测试从上述可以看出: 1.判断一个变量是不是对象类型,不能只用 typeof 运算符: 2.它的返回值一直是一个字符串: 3.尽管 typeof null === 'object ...
Configuration.SectionGroups
对于一个空的配置文件,默认自带的sectiongroups 默认有10个section节点 1 ConfigurationSectionGroupName=system.runtime.seriali ...
bzoj 3721 Final Bazarek
题目大意: n个数选k个使和为奇数且最大思路: 可以先将这n个数排序然后先去最大的k个数若和为奇数则直接输出为偶数可以用没选的最大的奇数替换选了的最小的偶数或用没选的最大的偶数替换选了的最小 ...
[POJ 1386] Play on Words
[题目链接] http://poj.org/problem?id=1386 [算法] 将每个单词的首字母向尾字母连一条有向边,判断欧拉路径是否存在,即可 [代码] #include <algor ...
CSS-类和ID选择器的区别
学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点: 相同点:可以应用于任何元素不同点: 1.ID选择器只能在文档中使用一 ...
ASP.NET MVC5 之 AspNetUsers 表增加字段
MVC5 执行数据库迁移时,会生成一些默认的数据表,但是在实际的工作中.若用到的时候,难免要增添一些字段. 1.AspNetUsers 增加字段 A.打开MVC中的 IdentityModels.cs ...
BZOJ 4085 丧心病狂的毒瘤题目线段树+矩乘
思路: 一眼矩阵快速幂再用线段树维护一下矩阵就完了... 我hhhhh 哎我还是too young,too simple 入了这个大坑线段树维护9个值以上如果A+1 转移矩阵是这个样 ...

demo记录

demo记录的更多相关文章

随机推荐

热门专题