带37种3D动画特效的跨浏览器CSS3动画框架
当前位置： >
> 带37种3D动画特效的跨浏览器CSS3动画框架
AllAnimation.css是一款带37种3D动画特效的跨浏览器CSS3动画框架。它可以轻松的制作出各种CSS3 3D动画效果，可以在移动手机上使用。并且使用极其简单，使用时只需要添加相应的class即可。
浏览器兼容性
AllAnimation.css是一款带37种3D动画特效的跨浏览器动画框架。它可以轻松的制作出各种CSS3 3D动画效果，可以在移动手机上使用。并且使用极其简单，使用时只需要添加相应的class即可。
使用AllAnimation.css时要引入all-animation.css文件。
&link rel="stylesheet" type="text/css" href="yourpath/all-animation.css" /&
你可以使用一个按钮来触发事件，在事件中为指定元素添加相应的动画class。
&div id="animation"&&/div&
&button class="anny-class"&Trigger class, go!&/button&
初始化插件
在编写上面的HTML结构之后，可以通过下面的方法来触发CSS3动画。
$(".anny-class").click(function(){
$("#animation").addClass("journal");
或者使用纯JS的方法来编写代码：
document.querySelector('button').addEventListener('click',function(e){
e.preventDefault();
document.querySelector('div').classList.add('dance');
你还可以为动画设置一个定时器。
setTimeout(function(){
$("#animation").addClass("journal");
另外也可以使用jQuery的链式编程方式来取消一个动画在执行另一个动画。
$("#animation").removeClass("journal").addClass("four-rock");
可用的动画CLASS
pulse-slow
enter-up-bounce
enter-down-bounce
enter-right-bounce
enter-left-bounce
scale-bounce
jump-bounce
Perspective
tree-flip-right
tree-flip-up
tree-flip-down
flip-left-bounce
rotate-flip
flip-right-bounce
Fading Entrances
flip-right
flip-bottom
rotate-flip-down
rotate-down-bounce
rotate-out
flash-bang
本文版权属于jQuery之家，转载请注明出处：
您已经顶过了哦！纯css3开发的响应式设计动画菜单（支持ie8）-爱编程
纯css3开发的响应式设计动画菜单（支持ie8）
这是一个响应式设计的菜单。单击列表图标，当你显示屏大小可以完全水平放下所有菜单项时，菜单水平显示（如图1）。当你的显示屏不能水平放置所有菜单项时，菜单垂直显示（如图2）。 而且显示的时候是以动画的型式显示。效果相当的好。
下面贴出实现这功能的源代码，这是一个纯用css3实现的菜单
html代码：
&div class="container"&
&!--[if lte IE 8]&
.iconicmenu & label{
border-width: 7
background: #
.iconicmenu:hover ul{
left: 8 /* show menu onmouseover in IE8 and below */
&![endif]--&
&div class="iconicmenu"&
&input type="checkbox" id="togglebox" /&
&li&&a targe="_blank" href="/Shili/css3%E8%8F%9C%E5%8D%95"&Home&/a&&/li&
&li&&a targe="_blank" href="/Shili/css3%E8%8F%9C%E5%8D%95"&DHTML&/a&&/li&
&li&&a targe="_blank" href="/Shili/css3%E8%8F%9C%E5%8D%95"&CSS Library&/a&&/li&
&li&&a targe="_blank" href="/Shili/css3%E8%8F%9C%E5%8D%95"&CSS Gallery&/a&&/li&
&li&&a targe="_blank" href="/Shili/css3%E8%8F%9C%E5%8D%95"&JavaScript&/a&&/li&
&label for="togglebox"&
&label class="toggler" for="togglebox"&
Menu&/label&
这里加入了兼容ie8的hack 。
padding:0; margin:0;
.container
.iconicmenu {
height: 45
.iconicmenu, .iconicmenu * {
-moz-box-sizing: border-
box-sizing: border-
.iconicmenu input[type="checkbox"] { /* checkbox used to toggle menu state */
opacity: 0;
.iconicmenu & label { /* Main label icon to toggle menu state */
z-index: 1000;
height: 40
background:
text-indent: -1000000
border: 6 /* border color */
border-width: 6px 0;
-moz-transition: all 0.3s ease-
-webkit-transition: all 0.3s ease-
transition: all 0.3s ease- /* transition for flipping label */
.iconicmenu & label::after { /* inner stripes inside label */
content: "";
width: 100%;
height: 18%;
border: 6 /* border color */
border-width: 6px 0;
-moz-transition: all 0.3s ease-
-webkit-transition: all 0.3s ease-
transition: all 0.3s ease- /* transition for flipping label */
.iconicmenu ul { /* UL menu inside container */
margin: 0;
padding: 0;
margin-left: 40
background: #
left: -100%; /* hide menu intially */
height: 40 /* height of menu */
font: bold 14px V
text-align:
list-style:
opacity: 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
-moz-perspective: 10000
perspective: 10000
-moz-transition: all 0.5s ease-
-webkit-transition: all 0.5s ease-
transition: all 0.5s ease- /* transition for animating UL in and out */
.iconicmenu li {
margin: 0;
padding: 0;
.iconicmenu ul label { /* label button inside UL to close menu */
height: 100%;
text-align:
.iconicmenu ul label::after { /* label button x */
content: "x";
display: inline-
line-height: 14
-moz-border-radius: 50
-webkit-border-radius: 50
border-radius: 50
height: 20
background:
font-size: 18
margin-top: 10
-moz-transition: all 0.3s ease-
-webkit-transition: all 0.3s ease-
transition: all 0.3s ease-
.iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu ul label:hover::after {
-moz-transform: rotatey(180deg);
-ms-transform: rotatey(180deg);
-webkit-transform: rotatey(180deg);
transform: rotatey(180deg); /* flip labels vertically onMouseover */
.iconicmenu & label:hover, .iconicmenu & label:hover::after, .iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu input[type="checkbox"]:checked ~ label::after {
border-color: /* highlight color of main menu label onMouseover */
.iconicmenu input[type="checkbox"]:checked ~ ul {
left: 8 /* Animate menu into view */
opacity: 1;
-moz-box-shadow: 1px 1px 5
-webkit-box-shadow: 1px 1px 5
box-shadow: 1px 1px 5
.iconicmenu li a {
text-align:
text-decoration:
margin: 0;
padding: 10
padding-right: 15
height: 100%;
.iconicmenu li a:hover {
background:
/* ----------------------------- CSS Media Queries ----------------------------- */
These rules control which portions of the menu gets shown when the screen size is below a certain width.
By default 2 stages are defined depending on browser screen width.
@media screen and (max-width: 580px) { /* Hide toggle icon when menu is already open (increases usable menu space by 40px) */
.iconicmenu input[type="checkbox"]:checked ~ label {
.iconicmenu input[type="checkbox"]:checked ~ ul {
margin-left: 0;
@media screen and (max-width: 560px) { /* Convert horizontal menu to vertical drop down instead (friendly across all screen sizes) */
.iconicmenu {
.iconicmenu ul {
.iconicmenu ul li {
min-width: 200;
.iconicmenu ul li a {
text-align:
注：本文原创文章，转载请注明原文地址：
加入前端爱好者QQ群() ，共同交流进度!
版权所有 爱编程 (C) Copyright 2012. . All Rights Reserved.
闽ICP备号-3
微信扫一扫关注爱编程，每天为您推送一篇经典技术文章。　　各大主流浏览器对 CSS3 和 HTML5 的支持越来越完善，曾经让多少前端开发人员心碎的IE系也开始拥抱标准。就在前几天，W3C的 HTML5 社区领袖 Shelley 宣布，HTML5的开发工作已经接近完成，如果进展顺利，HTML5 将在 2012 年正式成为国际标准。
　　当然，即使标准正式制定了，现代浏览器要普及到大部分用户也是需要一个相当漫长的过程。如果你现在就希望使用 CSS3 和 HTML5 创建你的站点，需要对各个浏览器对这两种新技术的支持情况有一个全面了解。本文是一份IE，Chrome，Firefox， Safari，Opera五大主流浏览器，在 Mac 和 Windows 两个平台，对 CSS3 和 HTML5 各种特性支持情况的详细清单。
　　从表中可以看出，CSS Transforms 3D 还没有浏览器支持，除此之外的其它属性在&Windows 平台，Chrome 和 Safari 全部支持，其次支持比较好的是 Opera 和 Firefox，曾经一片红叉的 IE 开始迎头赶上。在 Mac 平台 Safari&仍然表现优异，其次是 Firefox 和 Opera。
CSS3 选择器
　　最让人高兴的就是这张表了，除了 IE 9 以下的版本，其它浏览器已全部支持 CSS3 选择器，包括 IE 9 和 将在明年发布的 IE 10。
HTML5 Web 应用程序
　　从表中可以看出，除了客户端数据库 IndexDB 和 触控（Touch）事件外，其它特性 Chrome 和 Safari 都全部支持，微软还得加油啊。（更新：经验证 Chrome 10 和 Firefox 4 已支持 IndexDB，Firefox 4 也已支持 WebSocket，不过由于安全原因默认是不开启的，我们可以通过 about:config 重新启用 WebSocket，只需启用 network.websocket.override-security-block 选项即可。）
HTML5 图形和内嵌内容
　　这应该是 HTML5 最令人期待的东西了，内置画布，视频，音频，SVG，WebGL等对象。全部支持的有 Chrome，Firefox，还有 IE 9，很惊讶吧。
HTML5 音频编码
　　Chrome 又是全部支持，Safari 除Ogg Vorbis 外全部支持，IE 9 开始支持 MP3 和 AAC。
HTML5 视频编码
　　还是 Chrome 最厉害，包容天下，不知道 H.264 能否成为统一的视频编码标准，期待。
HTML5 表单对象
　　这些浏览器中最淡定的要数 Opera 了，那么多年了市场份额都没什么大变化。在 Windows 和 Mac 平台，Opera 对 HTML5 表单对象全部支持，IE 家族全军覆没。
HTML5 表单属性
　　IE 又一次全军覆没，Opera 依然全部支持，其次是 Safari，Chrome，Firefox。
　　目前，对 CSS3 和 HTML5 支持最好的是 Chrome，Safari 次之，Firefox 和 Opera 旗鼓相当，IE 9开始拥抱标准。鉴于这种情况，假如你想使用这两项新技术创建一个先锋体验式站点，现在的 CSS3 和 HTML5 可以让你实现，假如你想大规模应用于实际项目，现在还为时过早。
编译来源：
数据来源：
编写参考：
未经允许不得转载： &让IE支持HTML5标签及对CSS3 Media Query的兼容 - 轩枫阁 – 前端开发 | web前端技术博客
/ 让IE支持HTML5标签及对CSS3 Media Query的兼容
阅读：3815
作者：ivan
分类：、、、
HTML5新增了很多语义化的标签，赋予网页更好的意义和结构。一个网站要做到一套代码多种终端设备都美观的展现，就需要使用CSS3多媒体查询Media Query做成响应式的。
HTML5标签兼容方案
使用HTML5标记的优势
HTML5提供了一些新的元素和属性，例如&nav&（网站导航块）和&footer&。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用。让你在拥有更简洁的代码的同时，也有利于SEO。
关于HTML5结构
HTML5是在低版本的浏览器（IE8-）的兼容是有限的，类似很多结构性的标签&header&、&section&、&footer&等在IE8以下不会被识别。有什么方法能实现兼容呢？在高级浏览器能使用上这些标签，增强语义化；而在低级浏览器（包括IE6）上表现不会出错。那就需要引入html5.js这个文件。
既然是只有IE低版本需要使用，那就需要做个判断。
&!--[if lte IE 8]&&&&&&script type="text/javascript" src="./js/html5.js"&&/script&&![endif]--&
需要注意的地方是，这段代码需要添加在head标签内，而不是最后写在前面即底部，因为IE浏览器必须在元素解析签知道这些元素。
响应式兼容方案一
Respond.js 是一个快速、轻量的 polyfill，用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计（Responsive Web Design）。
这样子，IE6-8也能良好的展现,支持在浏览器中使用CSS3媒体查询功能.
&!--[if lte IE 8]& &&&&&script type="text/javascript"&&src="./js/respond.min.js"&&/script&&![endif]--&
响应式兼容方案二
IE8 或者更低的版本不支持 CSS3 媒体查询，但通过添加脚本 css3-mediaqueries.js 来实现这一功能
&!--[if lt IE 9]&&script type="text/javascript" src=”http://css3-mediaqueries-/svn/trunk/css3-mediaqueries.js”&&/script&&![endif]--&
源文件下载
html5.js：
respond.min.js：
纸飞机许愿
前端路上，一路有你。编辑你的正能量，快乐工作，努力生活~
请选择弹奏的曲谱
点击开始录制，可以录制弹奏的曲子
分享钢琴节奏：Respond.js让IE6-8支持CSS3 Media Query-前端开发博客 推荐文章 12-23 01-14 10-21 08-01 03-07 11-07热门文章
15,508Views
14,350Views
9,240Views
8,231Views
7,704Views
7,686Views}