作者归档:sxwgf

CSS3鼠标滑过图片覆盖渐变颜色蒙版

今天我们要介绍一款比较实用的CSS3图片特效,它并没有非常华丽的动画效果,但是很多场合都可以用到。当我们将鼠标滑过图片时,图片上方会覆盖一层渐变颜色的蒙版,移开图片蒙版又会以渐变的方式消失,同时这层蒙版由于颜色动态渐变,因此给人一种发光的视觉效果。

css3-image-gradient-hover

在线演示源码下载

纯CSS3可爱笑脸开关切换按钮

近期我们集中为大家分享过很多基于HTML5和CSS3的开关切换按钮,像这款多组超具创意的CSS3开关切换按钮拥有多套风格的外观,还有这款漂亮的CSS3/SVG个性化开关按钮又非常具有创意。今天要分享的这款同样也富有创意,整个开关按钮由笑脸和哭脸组成,点击按钮后可以在笑脸哭脸之间切换,另外按钮带有阴影,看起来有3D立体的视觉效果。

pure-css3-face-switch

在线演示源码下载

纯CSS3/SVG实现的带秒针表盘圆盘复古时钟

现在的网页上圆盘时钟越来越少见了,更多的是数字时钟和数字日历。之前我们分享过一些基于jQuery和CSS3的圆盘时钟动画,比如纯CSS3 3D立体圆盘时钟动画jQuery实现一个挂在墙上的圆盘时钟动画都非常不错。这次要给大家带来一款比较复古的圆盘时钟,基于纯CSS3,盘面是SVG绘制而成,并没有使用任何图片。时钟整体外观比较怀旧,给人不一样的视觉感受。

css3-svg-longcase-clock

在线演示源码下载

SVG/HTML5超富创意的环形颜色拾取器

记得很早以前我们分享过一款功能很强大的jQuery颜色选取插件 支持透明度选择,确实很不错。今天我们要介绍另外一款基于SVG和HTML5的环形颜色拾取器,非常具有创意。20种颜色组成一个圆环,每一种颜色都有相近的5种颜色可以选取,唯一遗憾的是不能根据任意的RGB值选取颜色。

svg-html5-circle-color-picker

在线演示源码下载

jQuery简易平滑焦点图插件

今天要给大家介绍一款超实用的jQuery简易平滑焦点图插件,这款焦点图的扩展性非常强,主区域可以是图片,也可以是文字和视频,理论上讲可以是任意HTML元素。另外还有一个特点是可以自定义切换按钮,控制显示切换箭头还是切换按钮,还支持自动播放图片。

jquery-easy-image-player

在线演示源码下载

HTML5/CSS3 3D图片播放器 可360度旋转图片

记得之前给大家分享过一些超炫酷基于jQuery和HTML5 的3D焦点图图片播放器,很多还是不错的,比如jQuery 3D 垂直螺旋切换焦点图动画超赞实用的jQuery立体3D焦点图插件。今天要分享的是另外一款基于HTML5和CSS3 3D图片播放器,它的特点是图片呈3D样式,而且可以通过滑杆360旋转图片,效果非常炫酷。

html5-css3-3d-rotate-image

在线演示源码下载

带投影的3D jQuery焦点图 可自适应页面大小

之前我们为大家分享很多带有3d视觉效果的jQuery/HTML5焦点图插件,比如这款jQuery/CSS3 3D旋转图片切换焦点图插件功能就非常强大。这次我们要分享的是一款带投影的3D jQuery焦点图,它的特点是利用CSS3的投影特性,让图片带有3D立体的视觉效果,同时另外一个特点是图片可以随着页面大小而自适应,可以让焦点图插件在大屏的PC页面和迷你的移动页面上均可使用。

jquery-3d-shadow-image

在线演示源码下载

HTML5/CSS3水平二级下拉菜单

今天我们要给大家介绍一款简单而实用的HTML5/CSS3水平二级下拉菜单,这款CSS3菜单由简单的ul列表组成,因此兼容所有的浏览器。它的背景一共由3部分组成:主菜单的淡蓝色、下拉菜单黑色和下拉菜单选中时的红色。同时菜单也会随着页面大小的改变而自适应,淡然这部分功能不是所有开发者都会喜欢。

html5-css3-hor-drop-menu

在线演示源码下载

超炫酷纯CSS3 3D折叠二级下拉菜单

这是一款外观非常炫酷的CSS3 3D下拉菜单,它的特点是主菜单的背景和页面背景非常融合,看上去就像菜单嵌入在页面中一样;最大的特点在于当鼠标滑过菜单项时,就会展开3D样式的二级子菜单,同时子菜单会产生摇晃折叠的动画效果,看起来十分炫酷,而这一切都是纯CSS3实现。

css3-3d-swing-menu

在线演示源码下载

jQuery/CSS3带小图标垂直手风琴菜单

今天我们要给大家分享一款超清新的CSS3带小图标垂直手风琴菜单,这款手风琴菜单的特点是菜单项带有小图标,而且如果存在二级菜单,该菜单项右侧则有箭头符号表示。菜单项展开时,其他菜单项同时会隐藏。这款CSS3手风琴菜单非常适合网站后台管理页面中使用。

css3-accordion-icon-menu

在线演示源码下载