收藏几款不错的CSS3特效

可立体旋转的CSS导航按钮

 

效果展示及代码下载

特效详解：

一款可立体旋转的CSS导航按钮，当鼠标滑过时，按原位置左右旋转，创造一个优雅，醒目的效果。它采用了CSS3转换和过渡特效。支持IE10+，和所有现代版本的FF，Chrome浏览器，Safari浏览器，和Opera。

每个按钮的技术说明，由3个层次深的标记，特别是：LI -> A -> SPAN。当鼠标滑过LI时，我们旋转内部A和SPAN元素180度，使用CSS3变换rotateY(180deg)值。这里关键是要申报这两个内部元素的值，所以当一个子元素导致的任何内容里面出现如镜本身旋转时，SPAN元素的内容恢复到正确的方向。

CSS3导航条透明玻璃效果

 

效果展示及代码下载

CSS3线性渐变背景，任何元素都可以添加到背景上。

它支持在FF3.6，Safari浏览器和谷歌Chrome。在IE9中（目前不支持CSS3线性渐变），SVG用于创建一个类似的外观，同时IE浏览器响应。这个菜单利用CSS3渐变背景制作一个菜单，一个半透明的翻转效果。

CSS3图片摇摆动画

效果展示及代码下载

使用CSS3的关键帧动画，我们可以精确控制风格元素。在这里，我们使用关键帧创建一个摆动的效果，随着时间的推移，直到停止的位置，或0度逐步通过修改元素的旋转。

图片摆动每5秒左右。

一款CSS3模仿声波的导航菜单

 

效果展示及代码下载

 

CSS3声波菜单是一个水平的脉动声纳效果，突出每个菜单链接列表菜单。在每个a :before和:after 伪元素生成两个圆（通过设置 border-radius 为50％），“double”的边界形成声纳看看。然后用CSS3关键帧动画的动画声纳的规模（通过CSS3 transform），创建一个移动的，脉动的效果。

声波效果兼容IE10+和所有现代版本的Firefox和Chrome。在Safari浏览器中不支持伪元素。

 

欢迎转载，转载请注明来源：收藏几款不错的CSS3特效 本文链接地址：http://www.zzsck.org/html/xhtml-css/4191.html