论坛首页 Web前端技术论坛

收藏几款不错的CSS3特效

浏览 6793 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2013-10-07  
 

特效详解:

一款可立体旋转的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

   发表时间:2013-10-11  
楼主,你的网站进不去啊。。。怎么办
0 请登录后投票
   发表时间:2013-10-11  
你提供的网址无法访问
0 请登录后投票
   发表时间:2013-10-11  
问题同上,网站不能打开。。。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics