首页 课程中心 问答&分享 读书 公众号框架 HUI H.JS 开放源 登录 & 注册
 使用 Animate.css,分分钟搞定你的css 动画
[ 晓乔 ] 发布于 : 2017-09-25  浏览 :  次

Animate.css 介绍
Animate.css是一个有趣的、简洁的css3动画库。很值得我们在项目中使用。


下载 Animate.css
https://daneden.github.io/animate.css/

演示代码

<!DOCTYPE html><html><head><meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="animate.css" />
<style type="text/css">
*{margin:0; padding:0px;}
.demo{
    width:500px; margin:0 auto; font-size:26px;
    line-height:100px; background:#007AFF; color:#FFFFFF; 
    text-align:center; margin-top:100px;
}
</style>
</head>
<body>
<select onchange="showAnimate(this.value);">
  <option value="bounce">|_ bounce (反弹)</option>
  <option value="flash">|_ flash (闪动)</option>
  <option value="pulse">|_ pulse (脉冲)</option>
 </select><script type="text/javascript">
function showAnimate(className){
 var demo = document.getElementById('demo');
 demo.setAttribute('class','demo animated '+className);}
</script>
</body>
</html>


教程更新
More...