<!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>
demo记录
猜你喜欢
转载自www.cnblogs.com/jianxian/p/8989344.html
今日推荐
周排行