特效详解:
一款可立体旋转的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