<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3 导航</title>
<style>
*{ padding:0; margin:0;}
body{ font-size:12px; font-family:"宋体", Arial; color:#333;}
ul{ list-style:none;}
a{ color:#333; text-decoration:none;}
a:hover{ text-decoration:underline;}
.clearFix{*zoom:1;}
.clearFix:after{ clear:both; display:block; content:''; height:0; overflow:hidden;}
.navMenu{ padding:0 10px; height:38px; line-height:38px; background:#f6f6f6; border-top:1px solid #ccc; border-bottom:1px solid #ccc;}
.navMenu li{ float:left; font-family:"微软雅黑"; font-size:14px; font-weight:bold;}
.navMenu li a{ display:inline-block; padding:0 20px;}
.navMenu li a:hover{ color:#f60; text-decoration:none; -webkit-animation:swing .8s ease .2s normal; -moz-animation:swing .8s ease .2s normal; -o-animation:swing .8s ease .2s normal;}
@-webkit-keyframes swing{
0%,20%,40%,60%,80%,100%{-webkit-transform-origin:top center}
20%{-webkit-transform:rotate(15deg)}
40%{-webkit-transform:rotate(-10deg)}
60%{-webkit-transform:rotate(5deg)}
80%{-webkit-transform:rotate(-5deg)}
0%,100%{-webkit-transform:rotate(0deg)}
}
@-moz-keyframes swing{
0%,20%,40%,60%,80%,100%{-moz-transform-origin:top center}
20%{-moz-transform:rotate(15deg)}
40%{-moz-transform:rotate(-10deg)}
60%{-moz-transform:rotate(5deg)}
80%{-moz-transform:rotate(-5deg)}
0%,100%{-moz-transform:rotate(0deg)}
}
@-o-keyframes swing{
0%,20%,40%,60%.80%,100%{ -o-transform-origin:top center;}
20%{-o-transform:rotate(15deg)}
40%{-o-transform:rotate(-10deg)}
60%{-o-transform:rotate(5deg)}
80%{-o-transform:rotate(-5deg)}
0%,100%{-o-transform:rotate(0deg)}
}
</style>
</head>
<body>
<ul class="navMenu clearFix">
<li><a href="#">导航菜单1</a></li>
<li><a href="#">导航菜单2</a></li>
<li><a href="#">导航菜单3</a></li>
<li><a href="#">导航菜单4</a></li>
<li><a href="#">导航菜单5</a></li>
<li><a href="#">导航菜单6</a></li>
<li><a href="#">导航菜单7</a></li>
<li><a href="#">导航菜单8</a></li>
</ul>
</body>
</html>
以chrome的webkit为例，简单的说明一下：
-webkit-animation:swing .8s ease .2s normal;
此句代码是指swing动画先停留0.2秒然后以正常速度开始播放，到0.8秒结束动画。
CSS3 @keyframes 规则
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
浏览器支持情况：
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注意：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。
CSS3 动画
当在@keyframe创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：(这里是从0%【动画开始】到100%【动画结束】之间过渡)
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
http://www.w3cfuns.com/blog-5421655-5399838.html
相关推荐
纯CSS3模拟风车转动效果纯css3云彩动画效果纯css3制作出来的狐狸尾巴燃烧效果纯CSS3模拟跳动的音乐音符效果多种css3滚动下拉动画加载效果css3颗粒全屏动画效果懒人原生纯CSS3鼠标悬停抖动效果css3点击动画效果css3...
总的来说，这个压缩包提供了一个实践性的学习案例，展示了如何利用CSS3的动画和3D变换功能来创建一个逼真的音箱抖动效果。这对于提升前端开发者在动态效果设计和实现方面的能力大有裨益。在深入研究这个案例时，可以...
总结来说，"懒人原生纯CSS3鼠标悬停抖动效果.zip"这个资源是CSS3动画和交互设计的实践案例，它展示了如何利用CSS3的新特性来实现动态的鼠标悬停效果和下拉加载动画。对于网页开发者而言，掌握这些技巧可以提升网站的...
在本项目中，"CSS3绘制卡通闹钟摇晃动画特效.zip" 提供了一个使用纯CSS3技术实现的趣味性小...总的来说，这个项目是一个很好的实践案例，可以帮助开发者掌握和运用CSS3的动画特性，提升网页设计的动态效果和用户体验。
在这个案例中，"抖动效果"很可能是通过CSS3动画实现的，通过调整元素的位置和透明度来模拟物体抖动的效果。 6. **过渡效果**：CSS3的`transition`属性用于平滑地改变一个或多个CSS属性值，当元素的状态发生改变时，...
在本案例中，“html5+css3摇一摇动画打开红包抽奖特效.zip”是一个利用这两种技术实现的互动抽奖效果，它模拟了现实中摇动手机打开红包的场景，增加了用户体验的趣味性。 首先，HTML5在其中主要负责构建页面结构和...
总结来说，"CSS3图片3D旋转相册"是利用CSS3的变换、过渡和可能的动画特性，配合jQuery插件，来实现一个具有动态3D旋转和鼠标悬停时的抖动效果的图片展示组件。这个技术的运用展示了CSS3在网页设计中的强大功能，以及...
总的来说，"jQuery元素漂浮抖动导航菜单"是一个结合了HTML5、CSS3和jQuery技术的前端实践案例，它展示了如何通过动态效果提升网站的互动性和吸引力。开发者可以通过研究这个压缩包中的文件，学习如何运用这些技术来...
在这个案例中，可能使用了`hover()`事件监听用户鼠标悬停在菜单项上，然后触发抖动动画。动画可能通过`animate()`函数实现，通过不断改变元素的位置或透明度来模拟抖动效果。 `fonts`文件夹可能包含了用于美化菜单...
在这个案例中，JavaScript可能与CSS3结合，通过修改CSS属性来实现动画效果。例如，使用`requestAnimationFrame`函数来平滑地执行动画序列，或者监听DOM元素的变化来触发特定的动画。 具体到CSS3动画，可能使用了`@...
在本案例中，我们关注的是“css3瑞士手表ui动画特效”，这是一个利用CSS3特性创建的精致UI元素，它模拟了瑞士手表的外观和动态效果，尽管它显示的时间并不准确，但其设计和动画效果无疑展示了CSS3的强大潜力。...
5. **多列布局（Multiple Columns）**: 虽然在这个特定的案例中可能用不到，但了解如何创建多列布局也是CSS3的重要技能，可以用于设计复杂的网页结构。 6. **Flexbox**: 弹性布局（Flexbox）是CSS3的一个模块，能...
在这个案例中，JavaScript代码与jQuery库结合，用于处理用户的交互，例如当用户鼠标悬停在导航项上时触发下拉菜单的显示，或者控制方格元素的抖动动画。 4. **HTML5**：HTML5是现代网页开发的标准，提供了许多新的...
我们可以结合JavaScript或者CSS3的动画效果来实现动态的旋转变化，模拟出抖动的感觉。 在“新浪微博图片抖动”这个案例中，我们可能会使用到的关键CSS代码可能是这样的： ```css img { transition: transform 0.5...
【标题与描述解析】 ...总结来说，这个压缩包为学习者提供了一个实战案例，通过实践可以深入了解CSS3的动画、过渡、伪类选择器等特性，并掌握如何利用这些工具创造出富有动态感和交互性的网页元素。
在本资源中，我们主要关注的是使用纯CSS3技术实现的空中飘浮的呆萌小猪动画特效。CSS3是层叠样式表的第三版，它极大地扩展了Web设计者可以实现的视觉效果，提供了丰富的动画功能，无需依赖JavaScript或其他外部脚本...
在这个案例中，我们将深入研究如何利用CSS3的形状绘制、伪类选择器、转换（transform）和动画（animation）属性来实现这个有趣的交互式效果。 首先，`index.html`文件是网页的主体部分，它通常包含HTML结构，如`...
3. **过渡（Transitions）**：CSS3的transition属性允许我们在两个样式之间平滑过渡，这在汉堡包抖动动画中起到关键作用。当鼠标悬停时，通过改变汉堡包元素的transform属性，配合transition，可以实现汉堡包自然...
2. **CSS动画（CSS Transitions）**：可能结合CSS3的过渡效果（transition）和变换（transform）属性，如`transition: all 0.5s;`和`transform: translateX(10px);`，来实现平滑的抖动动画。 3. **事件触发...