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"><!–将http的不安全请求升级为https–>-->
<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.在 ...
随机推荐
- Cocos Code IDE + Lua初次使用FastTiledMap的坑
近期想玩玩Lua.又想玩玩Cocos Code IDE.更加想写一个即时战斗的.防守的.会动的.有迷雾的.要探索的(旁白:给我停!)跑地图游戏. 于是我就用Cocos Code IDE来写游戏了.挑战 ...
- 创业公司十分钟简单搭建GIT私有库
欢迎关注老码农的微信公共账号,与CSDN博客同步 一.背景 小公司.协同开发的人不多,建gitlab比較麻烦,仅仅须要在Server端建立一个简单的git共享库就OK. 二.建立仓库 Server端: ...
- Codeforces Round #273 (Div. 2) B . Random Teams 贪心
B. Random Teams n participants of the competition were split into m teams in some manner so that e ...
- c++ 编译器会绕过拷贝构造函数
C++ primer P442 P447:在拷贝初始化过程中,编译器可以跳过拷贝构造函数,直接创建对象.即,编译器允许将下面的代码 "; //1 改写为 "); //2 由于str ...
- bzoj 3301 Cow Line
题目大意: n的排列,K个询问 为P时,读入一个数x,输出第x个全排列 为Q时,读入N个数,求这是第几个全排列 思路: 不知道康拓展开是什么,手推了一个乱七八糟的东西 首先可以知道 把排列看成是一个每 ...
- 05、ListActivity的使用
第一个好处:处理共同的操作,避免代码重复 假设我要写第二个界面我也是需要使用到mapView,那你都要去查找一个mapView.都要获取一个Map的一个地图. 第二个好处:代码规范(方便阅读,真实开发 ...
- PCB MongoDB 监控
一个数据库监控工具是必不可少的,当然MongoDB安装自带监控啦. 这里将监控工具mongostat.exe与mongotop.exe使用与参数进行讲解说明. 一.监控工具说明: 二.监控工具启用 1 ...
- oracleXE简易版---使用基础
1.开启服务 2.更改端口号 a) EX修改HTTP服务端口,避免和TOMCAT端口冲突 Oracel默认会启动HTTP服务,占有端口8080,但一般8080时TOMCAT的配置端口 可以修改TO ...
- php的session
来源:http://blog.163.com/lgh_2002/blog/static/4401752620105246517509/ http协议是WEB服务器与客户 端(浏览器)相互通信的协议,它 ...
- Gym - 101208C 2013 ACM-ICPC World Finals C.Surely You Congest 最大流+最短路
题面 题意:给你n(2w5)个点,m条边(7w5)有k(1e3)辆车停在某些点上的,然后他们都想尽快去1号点,同时出发,同一个点不允许同时经过, 如果多辆车同时到达一个点,他们就会堵塞,这时候只能选择 ...