作者归档:sxwgf

CSS3社交关系网模拟动画

这次我们要给大家分享一款CSS3模拟社交关系网的动画特效,社交网的中心是用户的头像图片,由中心连线展开到各个社交网络的Logo图片,同时每一条连接线上面都会有一个圆点由中心向各个节点移动,形成关系网的模拟动画,利用CSS3,我们可以让点运动,也可以让图片变成圆形,还是比较有趣的。

css3-social-net-animation

在线演示源码下载

CSS3自定义菜单内容的二级下拉菜单

之前我们分享过很多基于jQuery和CSS3的二级下拉菜单,大部分都非常实用,当然也不乏炫酷的动画,比如这款HTML5/CSS3水平二级下拉菜单就比较朴实,这款jQuery/CSS3波浪形弹性下拉菜单就比较富有个性。今天我们要分享的这款CSS3下拉菜单特点在于二级下拉菜单内容可以自定义,可以是简单的多列,也可以是复杂的图文排版。

css3-custom-dropdown-menu

在线演示源码下载

HTML5 多维度3D图片切换动画

今天我们要给大家分享一款非常特别的HTML5/CSS3焦点图插件,这款焦点图插件可以实现XY两个维度的图片切换动画,并且图片在排列时有一种3D立体的视觉效果,这样的效果正是使用了CSS3特殊属性改变了图片4条边的倾斜角度。

html5-3d-mult-axis-images

在线演示源码下载

纯CSS3乒乓球动画

这是一个比较有意思的纯CSS3乒乓球动画特效,主要是模拟了乒乓球运动动画,画面上用CSS3绘制了一张乒乓球桌,一个乒乓球在球桌上来回运动,就好象两个运动员在打乒乓球一样。当然如果你可以在球桌两端绘制两个运动员那就更加逼真的,有兴趣的同学可以自己研究一下。

pure-css3-ping-pong

在线演示源码下载

15个超强悍的CSS3圆盘时钟动画赏析

在网页上,特别是个人博客中经常会用到时钟插件,一款个性化的时钟插件不仅可以让页面显得美观,而且可以让访客看到当前的日期和时间。今天我们给大家收集了15个超强悍的圆盘时钟动画,很多都是基于CSS3,也有一部分利用jQuery和SVG,让我们一起来看看吧。

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

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

css3-svg-longcase-clock

在线演示    源码下载

2、HTML5 Canvas 3种不同风格的圆盘时钟

这次我们要继续为大家分享一款基于HTML5 Canvas的圆盘时钟动画,和之前分享的这款HTML5 Canvas 圆形时钟动画类似,它也是基于HTML5的,但是这款时钟提供了3种不同的样式风格,而且时钟的大小可以自己控制。

html5-canvas-3-style-clock[......]

阅读全文>>

移动端可拖拽jQuery图片切换插件 带Tooltip缩略图

这是一款很特别的jQuery焦点图插件,它和其他的图片切换插件不同,它主要在移动设备上使用,因此我们并不能像其他焦点图插件那样点击切换按钮来切换图片,而是通过滑动带Tooltip外观的缩略图来切换图片,并且图片显示时采用中心放大扩散的动画特效,效果还是不错。

jquery-tooltip-thumbnail-image

在线演示源码下载

CSS3带数字时钟的创意圆盘时钟动画

前几天我们刚刚为大家分享过一款基于SVG和CSS3的复古圆盘时钟,大家可以在这里查看演示和这里下载源码。今天又要给大家带来另外一款CSS3圆盘时钟,它的特点是圆盘对半分,一半显示数字时钟信息,另一半是半个圆盘时钟,样式设计上非常富有创意。

css3-circle-pretty-clock

在线演示源码下载

精美的jQuery视差效果图片轮播插件

今天让我们给大家分享一款基于jQuery的视差效果的图片轮播插件,它与一般的jQuery焦点图插件相比,并不是图片之间的切换,而是各种网页元素悬浮在一张大背景图上,切换时背景逐渐移动,另外背景上的元素也会跟着切换,与之类似的还有一款jQuery视差效果的焦点图插件

jquery-parallax-image-slider

在线演示源码下载

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

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

css3-image-gradient-hover

在线演示源码下载

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

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

pure-css3-face-switch

在线演示源码下载