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><!--[if lt ie 9]><script type="text/javascript">var i = 0, html5tags = ["header", "footer", "nav", "aside", "article", "section"];for (i in html5tags) {document.createElement(html5tags[i]);}</script><![endif]--><!--[if lt IE 9]><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(10) infinite;-moz-animation: play .8s steps(10) infinite;-ms-animation: play .8s steps(10) infinite;-o-animation: play .8s steps(10) infinite;animation: play .8s steps(10) 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 {from { width: 0 }to { width:16.3em }}@-moz-keyframes typing {from { width: 0 }to { width:16.3em }}@-webkit-keyframes blink-caret {from, to { border-color: transparent }50% { border-color: black }}@-moz-keyframes blink-caret {from, to { border-color: transparent }50% { border-color: black }}h1 { width:16.3em;white-space:nowrap;overflow:hidden;border-right: .1em solid black;-webkit-animation: typing 7s steps(30, end), /* # of steps = # of characters */blink-caret 1s step-end infinite;-moz-animation: typing 7s steps(30, 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(1) infinite;/*-webkit-animation: run .6s steps(1) infinite; */ }.down:hover {-webkit-animation: run .6s linear infinite;}@keyframes run {0% {background-position: 0 0;}25% {background-position: -200px 0;}50% {background-position: -400px 0;}75% {background-position: -600px 0;}100% {background-position: 0 0;}}@keyframes run2 {0% {background-position: 0 0;}100% {background-position: -800px 0;}}@-webkit-keyframes tuski {0% {background-position:0;}100% {background-position: -576px 0;}}@-moz-keyframes tuski {0% {background-position:0;}100% {background-position: -576px 0;}}@keyframes tuski {0% {background-position:0;}100% {background-position: -576px 0;}}#tuski {width: 48px;height: 48px;background-image: url(http://acwongblog.qiniudn.com/2015-03_tuski-sprite.png);background-repeat: no-repeat;background-position: 0 0;-webkit-animation: tuski .5s steps(12) infinite;-moz-animation: tuski .5s steps(12) infinite;animation: tuski .5s steps(12) 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="range" id="slider" min="0.5" max="2" 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>
?
轉載于:https://www.cnblogs.com/jianxian/p/8989344.html
總結
- 上一篇： 鲅鱼圈万科里离鲅鱼湾魔法温泉多远？
- 下一篇： eclipse官网下载详细指南