prefixfree.js和依托应用之Animatable

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

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

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>Animatable: One property, two values, endless possibilities</title>

<style type="text/css">

    * {

    margin: 0;

}

body {

    padding: 1em 5em;

    font: 1em/1.5em Futura, 'Century Gothic', sans-serif;

    text-align: center;

    overflow-x: hidden;

}

hgroup > h1 {

    font-size: 500%;

    line-height: 1;

    text-transform: lowercase;

}

hgroup > h2 {

    font-size: 120%;

}

a {

    text-decoration: none;

    color: slategray;

}

div[role="main"] {

    padding: 2em .5em;

    counter-reset: demo;

}

div[role="main"]:after {

    content: '';

    display: block;

    clear: both;

}

    a[data-property] {

        position: relative;

        float: left;

        width: 150px;

        height: 150px;

        box-sizing: border-box;

        margin: 0 15px 30px;

        background: slategray;

        color: white;

        font-size: 60px;

        line-height: 150px;

        text-align: center;

        counter-increment: demo;

        outline-color: transparent;

    }

    body.in-page a[data-property]:not(:target) {

        opacity: .2 !important;

    }

    #on-hover:checked ~ div[role="main"] > a[data-property]:not(:hover):not(:target),

    body.in-page a[data-property]:not(:target) {

        animation: none !important;

    }

        a[data-property]:after {

            content: attr(data-property);

            position: absolute;

            right: 0;

            left: 0;

            bottom: -1.2em;

            z-index: 2;

            color: slategray;

            font-size: 14px;

            line-height: 1;

            text-indent: 0;

            text-shadow: none;

            letter-spacing: 0;

        }

        a[data-property]:before {

            content: counter(demo);

        }

input[type="radio"] {

    position: absolute;

    clip: rect(0,0,0,0);

}

input[type="radio"] + label {

    display: inline-block;

    padding: .3em .7em;

    border: 1px solid rgba(0,0,0,.3);

    margin-top: 1em;

    background: #809070;

    color: white;

    text-shadow: .05em .05em .2em rgba(0,0,0,.8);

    cursor: pointer;

    border-radius: .3em;

    box-shadow: 0 1px rgba(255,255,255,.6) inset;

}

input[type="radio"]:not(:checked) + label {

    background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));

}

input[type="radio"]:checked + label {

    box-shadow: .05em .05em .4em .1em rgba(0,0,0,.8) inset;

}

.in-page input[type="radio"] + label {

    display: none;

}

#info {

    position: absolute;

    z-index: 2;

    width: 510px;

    height: 150px;

    padding: 10px 15px;

    box-sizing: border-box;

    overflow: hidden;

    background: black;

    color: white;

    text-align: left;

    transition:.5s;

}

.home > #info {

    display: none;

}

    #info h1 {

        color: slategray;

        margin-bottom: .3em;

    }

    #info > a {

        position: absolute;

        top: 10px;

        right: 10px;

        width: 2em;

        line-height: 2;

        font-size: 80%;

        background: rgba(255,255,255,.25);

        color: black;

        text-align: center;

        border-radius: 0 50% 50% 0;

    }

    #info > a:hover {

        background: #809070;

    }

    #info > a[title="Previous"] {

        right: 36px;

        border-radius: 50% 0 0 50%;

    }

    dl {

        font-size: 80%;

    }

    dl:after {

        content: '';

        display: block;

        clear: both;

    }

        dt {

            float: left;

            clear: left;

            width: 6em;

            color: gray;

        }

        dd {

            float: left;

            clear: right;

            white-space: nowrap;

        }

            dd > a {

                color: inherit;

            }

                dd > a > img {

                    margin-right: 5px;

                    vertical-align: -8px;

                    border-radius: 12px;

                }

.twitter-share-button {

    position: fixed;

    top: 10px;

    left: 10px;

}

.github-ribbon {

    position: absolute;

    top: 0;

    right: 0;

}

</style>

<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>

</head>

<body>

<hgroup>

    <h1><a href="#">Animatable</a></h1>

    <h2>One property, two values, endless possibilities</h2>

</hgroup>

<input type="radio" name="animate" id="on-hover" checked />

<label for="on-hover">Animate on hover</label>

<input type="radio" name="animate" id="all" />

<label for="all">Animate all</label>

<div role="main">

    <a data-property="background-color" data-from="slategray" data-to="black"></a>

    <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>

    <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>

    <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>

    <a data-property="border-radius" data-from="0" data-to="50%"></a>

    <a data-property="border-radius" data-from="0 100%" data-to="100% 0"></a>

    <a data-property="border-width" data-from="0" data-to="75px" style="border-style:solid; border-color: black;"></a>

    <a data-property="border-width" data-from="0" data-to="35px" style="border-style:dashed; border-color: black;"></a>

    <a data-property="border-width" data-from="0" data-to="75px" style="border-style:double; border-color: black;"></a>

    <a data-property="box-shadow" data-from="0 0 black" data-to="0 150px 10px -50px rgba(0,0,0,.5)"></a>

    <a data-property="box-shadow" data-from="none" data-to="inset -75px -75px 400px #000" data-author="yuritkachenko"></a>

    <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>

    <a data-property="color" data-from="white" data-to="black"></a>

    <a data-property="font-size" data-from="60px" data-to="300px"></a>

    <a data-property="height" data-from="150px" data-to="0"></a>

    <a data-property="letter-spacing" data-from="0" data-to="100px"></a>

    <a data-property="line-height" data-from="10px" data-to="300px"></a>

    <a data-property="opacity" data-from="1" data-to="0"></a>

    <a data-property="outline-width" data-from="0" data-to="100px" style="outline-color:black; outline-style: solid;"></a>

    <a data-property="outline-offset" data-from="-5px" data-to="30px" style="outline-style: dashed; outline-color:slategray;" data-author="mkuehnel"></a>

    <a data-property="outline-color" data-from="transparent" data-to="red" style="outline-width: 30px; outline-style: solid;" data-author="mkuehnel"></a>

    <a data-property="padding" data-from="0" data-to="50px 200px 50px 50px" data-author="steno"></a>

    <a data-property="text-indent" data-from="0" data-to="100px"></a>

    <a data-property="text-shadow" data-from="0 0 black" data-to="20px 20px 10px rgba(0,0,0,.5)"></a>

    <a data-property="text-shadow" data-from="0 0 0 white" data-to="0 0 10px white" style="color: transparent;" data-author="bartaz"></a>

    <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>

    <a data-property="top" data-from="0" data-to="100px" style="position:relative"></a>

    <a data-property="transform" data-from="rotate(0deg)" data-to="rotate(360deg)"></a>

    <a data-property="transform" data-from="scale(1)" data-to="scale(2)"></a>

    <a data-property="transform" data-from="skewX(0deg)" data-to="skewX(180deg)"></a>

    <a data-property="transform" data-from="rotate(0deg) scale(1)" data-to="rotate(360deg) scale(0)"></a>

    <a data-property="transform" data-from="perspective(400px) rotateY(0deg)" data-to="perspective(400px) rotateY(360deg)"></a>

    <a data-property="transform" data-from="perspective(400px) rotateX(0deg)" data-to="perspective(400px) rotateX(360deg)" data-author="calvein"></a>

    <a data-property="transform" data-from="perspective(400px) rotateY(0deg)" data-to="perspective(400px) translateZ(150px) rotateY(180deg)" data-author="bartaz"></a>

    <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>

    <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>

    <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>

    <a data-property="transform-origin" data-from="50% 50%" data-to="0 100%" style="transform:rotate(45deg)"></a>

    <a data-property="width" data-from="150px" data-to="330px" data-author="mkuehnel"></a>

</div>

<section id="info">

    <h1>box-shadow</h1>

    <a href="#" title="Previous">◀</a>

    <a href="#" title="Next">▶</a>

    <dl>

        <dt>From:</dt>

        <dd>0 0 black</dd>

        <dt>To:</dt>

        <dd>0 150px 10px -50px rgba(0,0,0,.5)</dd>

        <dt>Author:</dt>

        <dd>@leaverou</dd>

    </dl>

</section>

<footer>Made by <a href="http://lea.verou.me">Lea Verou</a> with care</footer>

<script>

    function $(expr, con) { return (con || document).querySelector(expr); }

function $$(expr, con) { return [].slice.call((con || document).querySelectorAll(expr)); }

var css = [];

$$('a[data-property]').forEach(function(el, i){

    var property = el.getAttribute('data-property'),

        from = el.getAttribute('data-from'),

        to = el.getAttribute('data-to');

    var id = property, i = 1;

    while(document.getElementById(id)) {

        id = property + '/' + ++i;

    }

    el.id = id;

    el.href = '#' + id;

    el.title = property + ' from ' + from + ' to ' + to;

    var selector = '#' + id.replace(/([^\w-])/g, '\\$1'),

        ident = id.replace(/([^\w-])/g, '-');

    css.push('@keyframes ' + ident + '{',

            'from{' + property + ':' + from + '}',

            'to{' + property + ':' + to + '}}',

            selector + ' { animation: ' + ident + ' 1s infinite alternate;' + property + ':' + from + '}');

});

var style = document.createElement('style');

style.textContent = css.join('\r\n');

StyleFix.styleElement(style);

document.head.appendChild(style);

setTimeout(onhashchange = function() {

    var target = location.hash? $(location.hash.replace(/([^#\w-])/g, '\\$1')) : null;

    if(!target) {

        document.body.className = 'home';

        return;

    }

    document.body.className = 'in-page';

    var info = $('#info'),

        previous = target.previousElementSibling,

        next = target.nextElementSibling,

        author = target.getAttribute('data-author') || 'leaverou';

    $('h1', info).innerHTML = target.getAttribute('data-property');

    $('dd:first-of-type', info).innerHTML = target.getAttribute('data-from');

    $('dd:nth-of-type(2)', info).innerHTML = target.getAttribute('data-to');

    $('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>';

    $('a[title="Previous"]', info).setAttribute('href', '#' + (previous? previous.id : ''));

    $('a[title="Next"]', info).setAttribute('href', '#' + (next? next.id : ''));

    setTimeout(function() {

        if(2*target.offsetLeft + target.offsetWidth < innerWidth) {

            info.style.left = target.offsetLeft + target.offsetWidth + 30 + 'px';

        }

        else {

            info.style.left = target.offsetLeft - info.offsetWidth - 30 + 'px';

        }

        info.style.top = target.offsetTop + 'px';

    }, 10);

}, 50);

onkeyup = function(evt) {

    var key = evt.keyCode;

    switch (key) {

        case 27:

            location.hash = '';

            break;

        case 37:

        case 38:

            location.hash = location.hash? $('a[title="Previous"]').hash : $('a[data-property]:last-child').hash;

            break;

        case 39:

        case 40:

            location.hash = location.hash? $('a[title="Next"]').hash : $('a[data-property]:first-child').hash;

    }

};

</script>

<a href="https://github.com/leaverou/animatable" target="_blank" class="github-ribbon">

    <img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">

</a>

<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="LeaVerou">Tweet</a>

<script src="https://platform.twitter.com/widgets.js"></script>

<script src="http://www.google-analytics.com/ga.js"></script>

<script>

try {

var pageTracker = _gat._getTracker("UA-597483-5");

pageTracker._trackPageview();

} catch(err) {}

</script> 

</body>

</html>

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

CSS3无前缀脚本prefixfree.js与Animatable使用
现代浏览器基本支持CSS3,但是一些旧版本的浏览器还是需要添加前缀的.像box-shadow, border-radius这类属性,目前较新版本的浏览器都是不需要前缀的(包括IE9),但是,有些CSS ...
CSS3无前缀脚本prefixfree.js与Animatable使用介绍
要求必备知识本文要求基本了解 JAVASCRIPT 和和 CSS3 基本知识. 运行环境桌面端:IE9 +,Opera 10+,火狐3.5 +,Safari 4+和Chrome浏览器;移动端: ...
HTML5/CSS3(PrefixFree.js) 3D文字特效
之前在园子里看到一个HTML5/CSS3的文字特效(这里),觉得挺好玩的所以小小的研究了下,不过发现代码都是针对webkit以及FF的所以IE跪了. Runjs 我将示例中的代码进行了精简,后来发现C ...
prefixfree.js介绍
假如你现在正学习着强大的Css3,你知道Css3的很多数属性为实验属性,使用他们的时候得加上各式各样的浏览器前缀.可能你默默忍受了,因为还没到统一的时间.有没想过给自己减下负,偶然间在网上看到一个js ...
prefixfree.js_无前缀脚本
prefixfree.js是JavaScript工具库,怎么用呢... 回答就是:哼!省去CSS3中的前缀“-moz”.“-webkit”.“-o”.“-ms” 省的在写一大堆前缀来适应旧版本浏览器或 ...
html5+css3学习笔记-prefixfree前缀补全插件
虽然现代浏览器支持CSS3,但是一些过往的版本或是目前有些CSS3属性的应用还是离不开前缀的.一些牛逼且执着于web技术且乐于分享的仁兄(Lea Verou)就搞了个名叫prefixfree.js的插 ...
js插件---弹出层sweetalert2（总结）
js插件---弹出层sweetalert2(总结) 一.总结一句话总结: sweetalert2的效果非常好,效果比较Q萌,移动端适配也比较好,感觉比layer.js效果好点 1.SweetAler ...
到网上收集了一个“高大上”的CSS3登入表单和大家分享一下
要求必备知识基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6 演示地址演示地址预览截图(抬抬你的鼠标就可以看到演示地址哦): 制作步骤: 一 ...
利用:before和:after伪类制作CSS3 圆形按钮含demo
要求必备知识基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6 演示地址演示地址预览截图(抬抬你的鼠标就可以看到演示地址哦): 制作步骤: 一 ...

随机推荐

JS系列：函数function
### 函数 function > 在js中函数就是一个方法(一个功能体)基于这个函数,一般是为了实现某个功能. ``` var total =10; total+=10; total=tota ...
perl oneline
可参考博客:http://blog.csdn.net/carzyer/article/details/5117429 Perl常用命令行参数概览 -e 指定字符串以作为脚本(多个字符串迭加)执行 -M ...
Anaconda的pip加速下载命令
pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
20.Python略有小成(面向对象Ⅱ)
Python(面向对象Ⅱ) 一.类的空间问题何处可以添加对象属性 class A: def __init__(self,name): self.name = name def func(self,s ...
cookielib模块 for python3
python2 可以直接安装cookielib模块而py3却不能安装故需要安装http模块举例子: from http import cookiejar cookie = cookiejar.C ...
74HC573锁存器应用（附英文手册）
锁存器(LATCH)概念锁存器(Latch)是一种对脉冲电平敏感的存储单元电路,它们可以在特定输入脉冲电平作用下改变状态. 锁存,就是把信号暂存以维持某种电平状态. 锁存器作用: 缓存完成高速的控 ...
Django开发简单博客流程
什么是Django? Django是一个基于python的高级web开发框架它能够让开发人员进行高效且快速的开发高度集成(不用自己造轮子), 免费并且开源当前路径创建工程 django-admi ...
Java异常体系结构学习笔记
异常类的继承层次 1.Throwable是所有异常类的父类,他也继承自Object.所以Throwable是一个类,而不是接口. 2.Error这个分支的异常是由于Java虚拟机内部错误导 ...
阿里巴巴 Java 开发手册 (八) 注释规约
1. [强制]类.类属性.类方法的注释必须使用 Javadoc 规范,使用/**内容*/格式,不得使用 //xxx 方式. 说明:在 IDE 编辑窗口中,Javadoc 方式会提示相关注释,生成 Ja ...
vxlan 协议
vxlan 协议原理简介 1. vxlan 简介 VXLAN 全称是 Virtual eXtensible Local Area Network,虚拟可扩展的局域网.它是一种 overlay 技术,通 ...

prefixfree.js和依托应用之Animatable

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

随机推荐

热门专题