ITPub博客

首页 > Linux操作系统 > Linux操作系统 > 收藏几款不错的CSS3特效

收藏几款不错的CSS3特效

原创 Linux操作系统 作者:luantao9999 时间:2013-10-07 14:54:36 0 删除 编辑

可立体旋转的CSS导航按钮

js_4123
效果展示及代码下载

特效详解:

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

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

CSS3导航条透明玻璃效果

js_4133

效果展示及代码下载

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

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

CSS3图片摇摆动画

js_4097t

效果展示及代码下载

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

图片摆动每5秒左右。

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

js_4093
效果展示及代码下载

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

来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/7657743/viewspace-773806/,如需转载,请注明出处,否则将追究法律责任。

上一篇: 没有了~
下一篇: 没有了~
请登录后发表评论 登录
全部评论

注册时间:2013-10-07

  • 博文量
    1
  • 访问量
    2175