http://www.zhangxinxu.com/wordpress/2011/11/css3-prefixfree-js-animatable/

http://leaverou.github.io/animatable/

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.  
  5. <meta charset="utf-8" />
  6. <title>Animatable: One property, two values, endless possibilities</title>
  7. <style type="text/css">
  8.     * {
  9.     margin: 0;
  10. }
  11.  
  12. body {
  13.     padding: 1em 5em;
  14.     font: 1em/1.5em Futura, 'Century Gothic', sans-serif;
  15.     text-align: center;
  16.     overflow-x: hidden;
  17. }
  18.  
  19. hgroup > h1 {
  20.     font-size: 500%;
  21.     line-height: 1;
  22.     text-transform: lowercase;
  23. }
  24.  
  25. hgroup > h2 {
  26.     font-size: 120%;
  27. }
  28.  
  29. a {
  30.     text-decoration: none;
  31.     color: slategray;
  32. }
  33.  
  34. div[role="main"] {
  35.     padding: 2em .5em;
  36.     counter-reset: demo;
  37. }
  38.  
  39. div[role="main"]:after {
  40.     content: '';
  41.     display: block;
  42.     clear: both;
  43. }
  44.  
  45.     a[data-property] {
  46.         position: relative;
  47.         float: left;
  48.         width: 150px;
  49.         height: 150px;
  50.         box-sizing: border-box;
  51.         margin: 0 15px 30px;
  52.         background: slategray;
  53.         color: white;
  54.         font-size: 60px;
  55.         line-height: 150px;
  56.         text-align: center;
  57.         counter-increment: demo;
  58.         outline-color: transparent;
  59.     }
  60.  
  61.     body.in-page a[data-property]:not(:target) {
  62.         opacity: .2 !important;
  63.     }
  64.  
  65.     #on-hover:checked ~ div[role="main"] > a[data-property]:not(:hover):not(:target),
  66.     body.in-page a[data-property]:not(:target) {
  67.         animation: none !important;
  68.     }
  69.  
  70.         a[data-property]:after {
  71.             content: attr(data-property);
  72.             position: absolute;
  73.             right: 0;
  74.             left: 0;
  75.             bottom: -1.2em;
  76.             z-index: 2;
  77.             color: slategray;
  78.             font-size: 14px;
  79.             line-height: 1;
  80.             text-indent: 0;
  81.             text-shadow: none;
  82.             letter-spacing: 0;
  83.         }
  84.  
  85.         a[data-property]:before {
  86.             content: counter(demo);
  87.         }
  88.  
  89. input[type="radio"] {
  90.     position: absolute;
  91.     clip: rect(0,0,0,0);
  92. }
  93.  
  94. input[type="radio"] + label {
  95.     display: inline-block;
  96.     padding: .3em .7em;
  97.     border: 1px solid rgba(0,0,0,.3);
  98.     margin-top: 1em;
  99.     background: #809070;
  100.     color: white;
  101.     text-shadow: .05em .05em .2em rgba(0,0,0,.8);
  102.     cursor: pointer;
  103.     border-radius: .3em;
  104.     box-shadow: 0 1px rgba(255,255,255,.6) inset;
  105. }
  106.  
  107. input[type="radio"]:not(:checked) + label {
  108.     background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
  109. }
  110.  
  111. input[type="radio"]:checked + label {
  112.     box-shadow: .05em .05em .4em .1em rgba(0,0,0,.8) inset;
  113. }
  114.  
  115. .in-page input[type="radio"] + label {
  116.     display: none;
  117. }
  118.  
  119. #info {
  120.     position: absolute;
  121.     z-index: 2;
  122.     width: 510px;
  123.     height: 150px;
  124.     padding: 10px 15px;
  125.     box-sizing: border-box;
  126.     overflow: hidden;
  127.     background: black;
  128.     color: white;
  129.     text-align: left;
  130.     transition:.5s;
  131. }
  132.  
  133. .home > #info {
  134.     display: none;
  135. }
  136.  
  137.     #info h1 {
  138.         color: slategray;
  139.         margin-bottom: .3em;
  140.     }
  141.  
  142.     #info > a {
  143.         position: absolute;
  144.         top: 10px;
  145.         right: 10px;
  146.         width: 2em;
  147.         line-height: 2;
  148.         font-size: 80%;
  149.         background: rgba(255,255,255,.25);
  150.         color: black;
  151.         text-align: center;
  152.         border-radius: 0 50% 50% 0;
  153.     }
  154.  
  155.     #info > a:hover {
  156.         background: #809070;
  157.     }
  158.  
  159.     #info > a[title="Previous"] {
  160.         right: 36px;
  161.         border-radius: 50% 0 0 50%;
  162.     }
  163.  
  164.     dl {
  165.         font-size: 80%;
  166.     }
  167.  
  168.     dl:after {
  169.         content: '';
  170.         display: block;
  171.         clear: both;
  172.     }
  173.  
  174.         dt {
  175.             float: left;
  176.             clear: left;
  177.             width: 6em;
  178.             color: gray;
  179.         }
  180.  
  181.         dd {
  182.             float: left;
  183.             clear: right;
  184.             white-space: nowrap;
  185.         }
  186.  
  187.             dd > a {
  188.                 color: inherit;
  189.             }
  190.  
  191.                 dd > a > img {
  192.                     margin-right: 5px;
  193.                     vertical-align: -8px;
  194.                     border-radius: 12px;
  195.                 }
  196.  
  197. .twitter-share-button {
  198.     position: fixed;
  199.     top: 10px;
  200.     left: 10px;
  201. }
  202.  
  203. .github-ribbon {
  204.     position: absolute;
  205.     top: 0;
  206.     right: 0;
  207. }
  208. </style>
  209. <script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
  210. </head>
  211. <body>
  212.  
  213. <hgroup>
  214.     <h1><a href="#">Animatable</a></h1>
  215.     <h2>One property, two values, endless possibilities</h2>
  216. </hgroup>
  217.  
  218. <input type="radio" name="animate" id="on-hover" checked />
  219. <label for="on-hover">Animate on hover</label>
  220. <input type="radio" name="animate" id="all" />
  221. <label for="all">Animate all</label>
  222.  
  223. <div role="main">
  224.     <a data-property="background-color" data-from="slategray" data-to="black"></a>
  225.     <a data-property="background-position" data-from="0 0" data-to="100% 100%" style="background-image: linear-gradient(135deg, transparent 25%, black 25%, black 50%, transparent 50%, transparent 75%, black 75%, black); background-size:50px 50px"></a>
  226.     <a data-property="background-position" data-from="3px 0, 3px 0, 15px -150px, 15px -150px" data-to="3px -70px, 3px -70px, 15px -80px, 15px -80px" style="background-color: #E04332; background-repeat: repeat-x; background-size: 24px 300px; background-image: linear-gradient(135deg, slategray 25%, transparent 25%), linear-gradient(45deg, transparent 75%, slategray 75%), linear-gradient(45deg, slategray 25%, transparent 25%), linear-gradient(135deg, transparent 75%, slategray 75%);" data-author="kizmarh"></a>
  227.     <a data-property="background-size" data-from="5px 5px" data-to="150px 150px" style="background-image: repeating-radial-gradient(transparent, transparent 9px, black 11px, black 20px); background-position:center"></a>
  228.     <a data-property="border-radius" data-from="0" data-to="50%"></a>
  229.     <a data-property="border-radius" data-from="0 100%" data-to="100% 0"></a>
  230.     <a data-property="border-width" data-from="0" data-to="75px" style="border-style:solid; border-color: black;"></a>
  231.     <a data-property="border-width" data-from="0" data-to="35px" style="border-style:dashed; border-color: black;"></a>
  232.     <a data-property="border-width" data-from="0" data-to="75px" style="border-style:double; border-color: black;"></a>
  233.     <a data-property="box-shadow" data-from="0 0 black" data-to="0 150px 10px -50px rgba(0,0,0,.5)"></a>
  234.     <a data-property="box-shadow" data-from="none" data-to="inset -75px -75px 400px #000" data-author="yuritkachenko"></a>
  235.     <a data-property="box-shadow" data-from="inset 0 0 75px 75px slategray, 0 0 0 slategray" data-to="inset 0 0 35px 35px transparent, 0 0 75px 50px transparent" style="background: transparent; border-radius: 1px;" data-author="kizmarh"></a>
  236.     <a data-property="color" data-from="white" data-to="black"></a>
  237.     <a data-property="font-size" data-from="60px" data-to="300px"></a>
  238.     <a data-property="height" data-from="150px" data-to="0"></a>
  239.     <a data-property="letter-spacing" data-from="0" data-to="100px"></a>
  240.     <a data-property="line-height" data-from="10px" data-to="300px"></a>
  241.     <a data-property="opacity" data-from="1" data-to="0"></a>
  242.     <a data-property="outline-width" data-from="0" data-to="100px" style="outline-color:black; outline-style: solid;"></a>
  243.     <a data-property="outline-offset" data-from="-5px" data-to="30px" style="outline-style: dashed; outline-color:slategray;" data-author="mkuehnel"></a>
  244.     <a data-property="outline-color" data-from="transparent" data-to="red" style="outline-width: 30px; outline-style: solid;" data-author="mkuehnel"></a>
  245.     <a data-property="padding" data-from="0" data-to="50px 200px 50px 50px" data-author="steno"></a>
  246.     <a data-property="text-indent" data-from="0" data-to="100px"></a>
  247.     <a data-property="text-shadow" data-from="0 0 black" data-to="20px 20px 10px rgba(0,0,0,.5)"></a>
  248.     <a data-property="text-shadow" data-from="0 0 0 white" data-to="0 0 10px white" style="color: transparent;" data-author="bartaz"></a>
  249.     <a data-property="text-shadow" data-from="0 0 white" data-to="0 0 rgba(255,255,255,0), -45px -45px 0 red, -30px -30px 0 orange, -15px -15px 0 yellow, 0 0 0 green, 15px 15px 0 blue, 30px 30px 0 indigo, 45px 45px 0 violet" style="color: transparent" data-author="kizmarh"></a>
  250.     <a data-property="top" data-from="0" data-to="100px" style="position:relative"></a>
  251.     <a data-property="transform" data-from="rotate(0deg)" data-to="rotate(360deg)"></a>
  252.     <a data-property="transform" data-from="scale(1)" data-to="scale(2)"></a>
  253.     <a data-property="transform" data-from="skewX(0deg)" data-to="skewX(180deg)"></a>
  254.     <a data-property="transform" data-from="rotate(0deg) scale(1)" data-to="rotate(360deg) scale(0)"></a>
  255.     <a data-property="transform" data-from="perspective(400px) rotateY(0deg)" data-to="perspective(400px) rotateY(360deg)"></a>
  256.     <a data-property="transform" data-from="perspective(400px) rotateX(0deg)" data-to="perspective(400px) rotateX(360deg)" data-author="calvein"></a>
  257.     <a data-property="transform" data-from="perspective(400px) rotateY(0deg)" data-to="perspective(400px) translateZ(150px) rotateY(180deg)" data-author="bartaz"></a>
  258.     <a data-property="transform" data-from="perspective(400px) translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0)" data-to="perspective(400px) translate3d(0,0,-5000px) rotateX(720deg) rotateY(360deg) rotateZ(-360deg)" data-author="bartaz"></a>
  259.     <a data-property="transform" data-from="perspective(400px) rotate3d(1,1,0,0deg)" data-to="perspective(400px) rotate3d(1,1,0,180deg)" data-author="bartaz"></a>
  260.     <a data-property="transform" data-from="perspective(400px) rotate3d(0,1,0,0deg)" data-to="perspective(400px) rotate3d(0,1,0,-180deg)" data-author="filipearaujo" style="transform-origin: 100% 50%;"></a>
  261.     <a data-property="transform-origin" data-from="50% 50%" data-to="0 100%" style="transform:rotate(45deg)"></a>
  262.     <a data-property="width" data-from="150px" data-to="330px" data-author="mkuehnel"></a>
  263. </div>
  264.  
  265. <section id="info">
  266.     <h1>box-shadow</h1>
  267.     <a href="#" title="Previous">◀</a>
  268.     <a href="#" title="Next">▶</a>
  269.     <dl>
  270.         <dt>From:</dt>
  271.         <dd>0 0 black</dd>
  272.  
  273.         <dt>To:</dt>
  274.         <dd>0 150px 10px -50px rgba(0,0,0,.5)</dd>
  275.  
  276.         <dt>Author:</dt>
  277.         <dd>@leaverou</dd>
  278.     </dl>
  279. </section>
  280.  
  281. <footer>Made by <a href="http://lea.verou.me">Lea Verou</a> with care</footer>
  282.  
  283. <script>
  284.     function $(expr, con) { return (con || document).querySelector(expr); }
  285. function $$(expr, con) { return [].slice.call((con || document).querySelectorAll(expr)); }
  286.  
  287. var css = [];
  288.  
  289. $$('a[data-property]').forEach(function(el, i){
  290.     var property = el.getAttribute('data-property'),
  291.         from = el.getAttribute('data-from'),
  292.         to = el.getAttribute('data-to');
  293.  
  294.     var id = property, i = 1;
  295.  
  296.     while(document.getElementById(id)) {
  297.         id = property + '/' + ++i;
  298.     }
  299.  
  300.     el.id = id;
  301.     el.href = '#' + id;
  302.  
  303.     el.title = property + ' from ' + from + ' to ' + to;
  304.  
  305.     var selector = '#' + id.replace(/([^\w-])/g, '\\$1'),
  306.         ident = id.replace(/([^\w-])/g, '-');
  307.  
  308.     css.push('@keyframes ' + ident + '{',
  309.             'from{' + property + ':' + from + '}',
  310.             'to{' + property + ':' + to + '}}',
  311.             selector + ' { animation: ' + ident + ' 1s infinite alternate;' + property + ':' + from + '}');
  312. });
  313.  
  314. var style = document.createElement('style');
  315. style.textContent = css.join('\r\n');
  316. StyleFix.styleElement(style);
  317. document.head.appendChild(style);
  318.  
  319. setTimeout(onhashchange = function() {
  320.     var target = location.hash? $(location.hash.replace(/([^#\w-])/g, '\\$1')) : null;
  321.  
  322.     if(!target) {
  323.         document.body.className = 'home';
  324.         return;
  325.     }
  326.  
  327.     document.body.className = 'in-page';
  328.  
  329.     var info = $('#info'),
  330.         previous = target.previousElementSibling,
  331.         next = target.nextElementSibling,
  332.         author = target.getAttribute('data-author') || 'leaverou';
  333.  
  334.     $('h1', info).innerHTML = target.getAttribute('data-property');
  335.     $('dd:first-of-type', info).innerHTML = target.getAttribute('data-from');
  336.     $('dd:nth-of-type(2)', info).innerHTML = target.getAttribute('data-to');
  337.     $('dd:nth-of-type(3)', info).innerHTML = '<a href="http://twitter.com/' + author + '" target="_blank"><img src="http://twitter.com//api/users/profile_image?screen_name=' + author + '&size=mini"/>@' + author + '</a>';
  338.  
  339.     $('a[title="Previous"]', info).setAttribute('href', '#' + (previous? previous.id : ''));
  340.     $('a[title="Next"]', info).setAttribute('href', '#' + (next? next.id : ''));
  341.  
  342.     setTimeout(function() {
  343.         if(2*target.offsetLeft + target.offsetWidth < innerWidth) {
  344.             info.style.left = target.offsetLeft + target.offsetWidth + 30 + 'px';
  345.         }
  346.         else {
  347.             info.style.left = target.offsetLeft - info.offsetWidth - 30 + 'px';
  348.         }
  349.  
  350.         info.style.top = target.offsetTop + 'px';
  351.     }, 10);
  352. }, 50);
  353.  
  354. onkeyup = function(evt) {
  355.     var key = evt.keyCode;
  356.  
  357.     switch (key) {
  358.         case 27:
  359.             location.hash = '';
  360.             break;
  361.         case 37:
  362.         case 38:
  363.             location.hash = location.hash? $('a[title="Previous"]').hash : $('a[data-property]:last-child').hash;
  364.             break;
  365.         case 39:
  366.         case 40:
  367.             location.hash = location.hash? $('a[title="Next"]').hash : $('a[data-property]:first-child').hash;
  368.     }
  369. };
  370.  
  371. </script>
  372.  
  373. <a href="https://github.com/leaverou/animatable" target="_blank" class="github-ribbon">
  374.     <img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
  375. </a>
  376.  
  377. <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="LeaVerou">Tweet</a>
  378. <script src="https://platform.twitter.com/widgets.js"></script>
  379.  
  380. <script src="http://www.google-analytics.com/ga.js"></script>
  381. <script>
  382. try {
  383. var pageTracker = _gat._getTracker("UA-597483-5");
  384. pageTracker._trackPageview();
  385. } catch(err) {}
  386. </script> 
  387.  
  388. </body>
  389. </html>

prefixfree.js和依托应用之Animatable的更多相关文章

  1. CSS3无前缀脚本prefixfree.js与Animatable使用

    现代浏览器基本支持CSS3,但是一些旧版本的浏览器还是需要添加前缀的.像box-shadow, border-radius这类属性,目前较新版本的浏览器都是不需要前缀的(包括IE9),但是,有些CSS ...

  2. CSS3无前缀脚本prefixfree.js与Animatable使用介绍

    要求 必备知识 本文要求基本了解 JAVASCRIPT 和 和 CSS3 基本知识. 运行环境 桌面端:IE9 +,Opera 10+,火狐3.5 +,Safari 4+和Chrome浏览器;移动端: ...

  3. HTML5/CSS3(PrefixFree.js) 3D文字特效

    之前在园子里看到一个HTML5/CSS3的文字特效(这里),觉得挺好玩的所以小小的研究了下,不过发现代码都是针对webkit以及FF的所以IE跪了. Runjs 我将示例中的代码进行了精简,后来发现C ...

  4. prefixfree.js介绍

    假如你现在正学习着强大的Css3,你知道Css3的很多数属性为实验属性,使用他们的时候得加上各式各样的浏览器前缀.可能你默默忍受了,因为还没到统一的时间.有没想过给自己减下负,偶然间在网上看到一个js ...

  5. prefixfree.js_无前缀脚本

    prefixfree.js是JavaScript工具库,怎么用呢... 回答就是:哼!省去CSS3中的前缀“-moz”.“-webkit”.“-o”.“-ms” 省的在写一大堆前缀来适应旧版本浏览器或 ...

  6. html5+css3学习笔记-prefixfree前缀补全插件

    虽然现代浏览器支持CSS3,但是一些过往的版本或是目前有些CSS3属性的应用还是离不开前缀的.一些牛逼且执着于web技术且乐于分享的仁兄(Lea Verou)就搞了个名叫prefixfree.js的插 ...

  7. js插件---弹出层sweetalert2（总结）

    js插件---弹出层sweetalert2(总结) 一.总结 一句话总结: sweetalert2的效果非常好,效果比较Q萌,移动端适配也比较好,感觉比layer.js效果好点 1.SweetAler ...

  8. 到网上收集了一个“高大上”的CSS3登入表单和大家分享一下

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到演示地址哦): 制作步骤: 一 ...

  9. 利用:before和:after伪类制作CSS3 圆形按钮 含demo

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到演示地址哦): 制作步骤: 一 ...

随机推荐

  1. git revert commitid

    是生成一个和commitid的提交完全相反的提交.类似倒转.

  2. 图像变化之Laplacian（）函数 and Schaar()滤波及综合例子

    先来  Laplacian()函数 #include<math.h> #include<opencv2/opencv.hpp> #include<string.h> ...

  3. PTA A1016

    A1016 Phone Bills (25 分) 题目内容 A long-distance telephone company charges its customers by the followi ...

  4. 阿里巴巴 Java 开发手册 (九) 异常日志

    (一) 异常处理 1. [强制]Java 类库中定义的一类 RuntimeException 可以通过预先检查进行规避,而不应该 通过 catch 来处理,比如:IndexOutOfBoundsExc ...

  5. JS中的if语句内如何加or使多个条件通过

    if(a==1&&b==2){ //do something }//条件是a等于1  并且  b等于2时才能成立,两个条件必须同时满足 if(a==1||b==2){ //do som ...

  6. python3 语法 数据类型

     python3中 有6种标准数据类型 数字,字符串,列表,元祖,集合,字典

  7. Elasticsearch 主要监控指标 -- 描述了es监控的几个维度，相当不错！

    转发自:https://blog.csdn.net/majianxiong_lzu/article/details/90437559 主要指标梳理 Cluster Health – Nodes and ...

  8. Objective-C 知识点拾遗

    -- :: UIWebView的使用总结 UIWebView全解

  9. python基础-模块(全是理论，没有代码)

    模块 概念:一系列功能的结合体.相当于模块包着一堆函数与代码.本质上是py文件. 来源: python内置的模块----→ python解释器的模块 第三方的模块 -----→ 其他人编写提供的 自定 ...

  10. C# DataTable 和List之间相互转换的方法（转载）

    来源:https://www.cnblogs.com/shiyh/p/7478241.html 一.List<T>/IEnumerable转换到DataTable/DataView 方法一 ...