CSS3 prefix-free script prefixfree. js and Animatable

Requirements

Required knowledge

This article requires a basic understanding of JAVASCRIPT and CSS3.

• Running Environment

  Desktop: IE9 +, Opera 10 +, Firefox 3.5 +, Safari 4 +, and Chrome browser; Mobile terminal: Mobile Safari, Android browser, Chrome browser, and Opera Mobile.

• Demo address

  The demo address has been provided in the article and you can find it yourself.

Modern browsers support CSS3, but some earlier browsers still need to add prefixes. Imagebox-shadow,border-radiusThese attributes do not require a prefix (including IE9) for newer browsers. However, some CSS3 attributes, such as gradient and prefix, are indispensable, every time we need to stack CSS3 code like a tall building, such:

{:;:;:;:;:;:;:;:;:;:;:;}

The Code effect is as follows. Click here to view the demo:

{:}{:}{:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:; :;:;:;:;}{}

For example, if you are using the latest Chrome browser, you can click here to view the demo page:

{:}{:}{:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:; :;:;:;:;}{}

The effect in Chrome is as follows: the same effect can be achieved with the prefix. If you are using the latest version of Chrome, you can click here to view the demo page:

$ (Expr, con) {(con | $ (expr, con) {[]. slice. call (con | css =$ $ ('a [data-property] '). forEach (property = el. getAttribute ('data-properties' = el. getAttribute ('data-from' = el. getAttribute ('data-to 'id = property, I = 1 = property + '/' ++ = '#' + = property + 'from' + from + 'to' + selector = '#' + id. replace (/([^ \ w-])/g, '\ $1' = id. replace (/([^ \ w-])/g, '-' css. push ('@ keyframes' + ident + '{''f Rom {'+ property +': '+ from +'} ''to {'+ property +': '+ to +'} '+' {animation: '+ ident + '1 s infinite alternate;' + property + ':' + from + '}' style = document. createElement ('style' = css. join ('\ r \ n' = target = location. hash? $ (Location. hash. replace (/([^ \ w-#])/g, '\ $1 ')):(! = 'Home' = 'in-page' info = $ ('# info' = target. getAttribute ('data-author') | 'leaverou ''h1 ', info ). innerHTML = target. getAttribute ('data-properties' '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 "> @ '+ author +' </a> 'a [title =" Previous "] ', info ). setAttribute ('href ',' # '+ (previous? Previous. id: '''a [title = "Next"] ', info). setAttribute ('href', '#' + (next? Next. id: ''(2 * target. offsetLeft + target. offsetWidth <= target. offsetLeft + target. offsetWidth + 30 + 'px '= target. offsetLeft-info. offsetWidth-30 + 'px '= target. offsetTop + 'px '1050 = key = 27 = ''37 38 = location. hash? $ ('A [title = "Previous"] '). hash: $ ('a [data-property]: last-child '39 40 = location. hash? $ ('A [title = "Next"] '). hash: $ ('a [data-property]: first-child'

 

The article references the following address. If you are interested, click to View Details:

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

Prefixfree official address:

Http://leaverou.github.io/prefixfree/

Official Address of Animatable:

Http://leaverou.github.io/animatable/

 

If the above article or link is helpful to you, don't forget to click "" at the end of the article or click "" in the lower right corner of the page. You can also click the "floating" button on the right of the page to let more people read this article.

 

Author: Li-Cheng Source: The copyright of this article is shared by the author and the blog Park. You are welcome to reprint it. However, you must keep this statement without the author's consent and provide a connection to the original text on the article page, otherwise, you are entitled to pursue legal liability.