一、编写原因：

由于animate.css作者的官方效果预览网站无法登陆，为了方便自己预览各个效果

二、实现思路：

刚开始想把animate.css的所有类都筛选出来，写个静态的数组，但是由于比较懒，所以想了其他办法:用正则表达式从样式表里面筛选出来所有的类，然后当select触发change事件的时候来改变实例的class

三、代码实现：

样式表：base.css主要是用来reset样式的、style.css的样式如下

html{height: 100%;
}
body{background: #E9E9E9;font-family: 'Poiret One',cursive,serif;height: 100%;overflow: hidden;
}
.main{width: 960px;margin: 0 auto;height: 100%;
}
#prew{padding-top: 100px;font-size: 50px;color: #666;text-align: center;
}
.classStyle{font-size: 40px;height:60px;line-height: 60px;background-color: #3299BB;background: rgba(50, 153, 187, .5) !important;text-shadow: 0 1px white;width:100%;margin-top: 50px;border-radius: 10px;outline: none;padding-left: 50px; 
}

（1）使用jQuery+animate.css

index.html 代码

Animate Preview

请选择

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！