`
luantao9999
  • 浏览: 5076 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

收藏几款不错的CSS3特效

阅读更多
 

特效详解:

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

分享到:
评论

相关推荐

    css样式特效 网页设计特效

    我收藏的css制作的各种神奇特效~供大家分享

    纯CSS图片切换特效

    纯CSS图片 切换特效 纯CSS图片 切换特效 纯CSS图片 切换特效 纯CSS图片 切换特效 纯CSS图片 切换特效 纯CSS图片 切换特效

    CSS特效收藏和js实例

    CSS层折叠(或收缩)与展开特效; CSS高度自适应代码(用了都说好); JavaScript密码强度检测代码; JavaScript判断输入框中是否包含中文; JavaScript判断远程图片是否存在; Js+Css图片切换,带缩略图响应鼠标滑过; JS...

    CSS3名片式卡片设计特效

    在这款特效中,通过利用CSS3的强大功能,我们可以创建出带有图像、图标、标题和描述信息的卡片布局,使网页更加生动有趣。 首先,卡片设计的核心在于布局。CSS3提供了多种布局方式,如Flexbox(弹性盒模型)和Grid...

    css弹出窗口类特效收藏

    "css弹出窗口类特效收藏"是一个集合,它提供了多种弹出窗口的实现方式,帮助开发者快速实现各种弹出效果,无需从零开始编写代码。这些特效可以应用于通知提示、模态对话框、下拉菜单、图像预览等多种场景,极大地...

    jQuery和CSS3全屏3D背景图片视觉差特效

    **jQuery和CSS3全屏3D背景图片视觉差特效** 在网页设计中,为了提升用户体验和视觉吸引力,设计师经常采用各种动态特效。其中,“视觉差”(Parallax)特效是一种流行的技术,它使得前景和背景元素以不同的速度移动...

    一款利用HTML5和CSS3制作的3D爱心动画特效源码.rar

    一款利用HTML5和CSS3制作的3D爱心动画特效源码,是一款值得收藏的HTML5 3D爱心动特效,特别适合作为七夕节或情人节的礼物,代码运行效果美观大方,有很强的立体感,是一款HTML5 3D特效的经典之作。

    CSS3 时间轴 时空轴大事记特效网页.rar

    CSS3 时间轴 时空轴大事记特效网页,这个是13年时候自己收藏的,现在无意又发现了,觉得依然很不错哦,美观大方,特别适合用于显示公司大事记、公司发程历程的展示,运用于HTML5和CSS3技术实现,兼容目前主流的...

    css3鼠标hover卡片动画特效

    本案例中提到的“css3鼠标hover卡片动画特效”就是利用CSS3的新特性来实现的一种交互式设计。 首先,我们要了解CSS3中的`:hover`伪类选择器。`:hover`用于定义元素在鼠标指针悬停时的样式。在卡片动画特效中,`:...

    纯CSS3鼠标悬停图片炫酷动画特效

    【纯CSS3鼠标悬停图片炫酷动画特效】是一种利用CSS3的强大功能,为网页中的图片添加互动性与视觉吸引力的技术。在这个特效中,我们不依赖JavaScript,而是完全依靠CSS3来实现,使得代码更简洁,性能更高效。以下是...

    本人收藏的各种页面特效大部分javascript+css实现

    这个收藏集中的特效可能包括但不限于以下几种类型: 1. **滑动效果**:如轮播图、侧边栏滑动、页面平滑滚动等,这些通常通过JavaScript的定时器和事件监听来实现。 2. **动画效果**:如渐入渐出、旋转、缩放、淡入...

    纯css3黑色发光分享按钮特效

    【纯CSS3黑色发光分享按钮特效】是一种利用CSS3特性实现的、具有视觉吸引力的网页设计元素。在现代网页设计中,按钮不仅是交互的核心,也是提升用户体验的关键因素。本特效通过CSS3的属性和方法,为按钮赋予了黑色...

    挚爱HTML5 7款华丽的HTML5/CSS3应用

    之前我们已经分享过几款很酷的HTML5图片特效,像HTML5 3D图片折叠特效、HTML5 3D旋转图片相册等应用。今天我们来分享一款既炫酷又实用的HTML5图片选择特效,当图片被选中时,图片上就会覆盖一个半透明的层,上面有一...

    文章列表喜欢点赞按钮CSS3特效

    文章列表喜欢点赞按钮CSS3特效是一款基于js+css3制作的文章列表点击按钮喜欢或收藏功能。

    HTML5实现的3D爱心动画特效源码

    这是一款利用HTML5和CSS3制作的3D爱心动画特效源码,取自国外网站。是一款值得收藏的HTML5 3D爱心动特效,特别适合作为七夕节或情人节的礼物,代码运行效果美观大方,有很强的立体感,是一款HTML5 3D特效的经典之作...

    收藏的网页特效代码收藏的网页特效代码

    2. **MyPixbot带阴影的可拖动的浮动层.txt**:这个特效涉及到了CSS3阴影效果和JavaScript拖放功能。浮动层不仅可以在页面上自由移动,还带有阴影效果,增强了视觉层次感,常用于弹窗、提示框或者设置面板等元素。 3...

    网页特效收藏收藏收藏

    8. **不用js实现的css下拉菜单特效**:虽然CSS3提供了更多的动画和过渡效果,纯CSS的下拉菜单可以通过伪类和`:hover`实现,但在交互性上可能不及JavaScript实现的灵活。 9. **星星飞舞**:这可能是一种视觉效果,...

    收藏的一些网页的静态特效

    压缩包中的特效可能包括以下几种: - 图片轮播:用于展示一组图片,支持自动播放和手动切换。 - 滚动效果:如固定头部、滚动加载更多内容等。 - 弹出框/模态窗口:用于显示详细信息或对话框。 - 导航菜单:动态...

    ASP 实例 CSS样式滚动条样式 文字特效 收藏本站 窗口控制 文字滚动显示 网页拾色器 安徽机电职业技术学院 陈伟

    3. **收藏本站**:网站通常提供收藏功能,方便用户将站点添加到他们的浏览器书签或收藏夹。这个功能可以通过JavaScript或者服务器端脚本实现,当用户点击按钮时,生成一个书签链接,并提示用户保存。 4. **窗口控制...

Global site tag (gtag.js) - Google Analytics