Home >Web Front-end >HTML Tutorial >Cross-platform mobile development Xuijs ultra-lightweight framework Emile CSS animation_html/css_WEB-ITnose
Cross-platform mobile development Xuijs ultra-lightweight framework Emile CSS animation_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:35:011454browse
Xuijs ultra-lightweight framework Emile CSS animation renderings
Sample code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>XuijsDemo</title><script src="content/scripts/xui-2.2.0.min.js"></script><script src="content/scripts/emile.js"></script><script>function initialise(){}//style 样式处理function styleshow(){ }//style 动画、形变、渐变function fx(){ emile('box1', 'background:#008FFF;left:100px;padding-bottom:100px;opacity:1', { duration: 4000, easing: bounce }); emile('box2', 'background:#C8E919;left:200px;padding-bottom:100px;opacity:1', { duration: 4000, easing: bounce }); emile('box3', 'background:#AC193D;left:300px;top:400px;padding-bottom:100px;opacity:1', { duration: 4000, easing: bounce }); emile('box4', 'background:#008FFF;right:400px;padding-bottom:100px;opacity:1', { duration: 4000, easing: bounce }); emile('box5', 'background:#C8E919;right:150px;padding-bottom:100px;opacity:1', { duration: 4000, easing: bounce }); emile('box6', 'background:#AC193D;right:350px;top:200px;padding-bottom:100px;opacity:1', { duration: 4000, easing: bounce }); emile('boxb', 'left:500px;padding:10px;border:50px solid #5133AB', { duration: 500, after: function(){ emile('boxa', 'background:#D24726;left:100px;padding-bottom:100px;opacity:1', { duration: 4000, easing: bounce }); } });}function bounce(pos) { if (pos < (1/2.75)) { return (7.5625*pos*pos); } else if (pos < (2/2.75)) { return (7.5625*(pos-=(1.5/2.75))*pos + .75); } else if (pos < (2.5/2.75)) { return (7.5625*(pos-=(2.25/2.75))*pos + .9375); } else { return (7.5625*(pos-=(2.625/2.75))*pos + .984375); } }</script></head><body onload="initialise();styleshow();fx();"><div id="box1" style="position:absolute;left:0px;background:#f00;opacity:0">DIV动画区域块</div><div id="box2" style="border:0px solid #00ff00;position:absolute;left:0px;top:200px;background:#000000">DIV动画区域块</div><div id="box3" style="border:0px solid #AC193D;position:absolute;left:0px;top:300px;background:#AC193D">DIV动画区域块</div><div id="box4" style="position:absolute;right:0px;background:#f00;opacity:0">DIV动画区域块</div><div id="box5" style="border:0px solid #00ff00;position:absolute;right:0px;top:200px;background:#000000">DIV动画区域块</div><div id="box6" style="border:0px solid #AC193D;position:absolute;right:0px;top:150px;background:#AC193D">DIV动画区域块</div><div id="boxa" style="position:absolute;left:0px;background:#D24726;opacity:0">DIV</div><div id="boxb" style="border:0px solid #00ff00;position:absolute;left:0px;top:350px;background:#362168">DIV动画区域块</div></body></html>
Code sample package
Click to download
Statement: This blog attaches great importance to the protection of intellectual property rights. If you find that the information published on this blog contains link content that infringes your copyright, please contact me and I will handle it as soon as possible. Contact email ffgign@qq.com.
Author: Mark Fan (小 Thought) Source: http://cube.cnblogs.com
Note: Without the consent of the author, it is necessary Keep this statement and provide a link to the original text in an obvious position on the article page. Otherwise, we reserve the right to pursue legal liability. If you have any questions, you can contact the author at ffgign@qq.com. This article is licensed under the Creative Commons Attribution-Noncommercial-ShareAlike 2.5 Mainland China License