作者归档:sxwgf

CSS3粘性概念菜单Gooey Menu

今天我们要给大家分享一款基于CSS3的粘性概念菜单,也可以叫做Gooey Menu,这种菜单按钮在目前的手机应用中使用非常广泛,外观样式也有很多种类型。今天的这款样式比较新颖,点击展开按钮即可展开所有菜单项,菜单项的形状呈波浪形,鼠标滑过菜单项时也会有高亮显示的效果。

css3-gooey-menu

在线演示源码下载

jQuery/CSS3超炫酷动画登录表单

很早以前,我们为大家分享过不少外观和功能都非常不错的jQuery登录表单,有些登录表单应用了CSS3特性添加了更绚丽的动画特效,比如这款精美的CSS3登录注册切换表单就相当华丽。今天要分享的这款动画登录表单也非常不错,输入框中带有小图标,可随着焦点的获取和失去是现实和隐藏,点击登录时会有一段自定义的登录动画,并最后提示登录成功。

jquery-css3-animated-login

在线演示源码下载

纯CSS3模拟iPhone X背景切换动画

尽管iPhone已经没有像以前那么火了,但是苹果的UI设计还是可以肯定的。今天我们要给大家分享一款基于纯CSS3的iPhone X背景切换动画,整体的切换动画以淡入淡出为主,iPhone X屏幕的背景和页面的背景交相呼应,显得非常自然和谐。

css3-iphone-x-background

在线演示源码下载

CSS3侧边栏单页切换小图标菜单

这是一款基于CSS3的单页切换菜单插件,单页网站现在非常流行,即整个网站点击任何按钮和链接都不需要整体刷新,可以平滑地切换每一个页面。这次分享的这款应用就是在侧边栏悬停一列带小图标的菜单,点击每一个菜单项即可切换页面,在切换过程中还会产生不同的页面过渡动画效果。

css3-side-menu-single-page

在线演示源码下载

纯CSS3蓝色蝴蝶动画

之前我们分享过几个漂亮的HTML5蝴蝶飞舞动画,比如超炫酷HTML5 Canvas蝴蝶飞舞动画HTML5 SVG 3D蝴蝶飞舞动画都非常炫酷。今天要分享的这款蝴蝶动画是基于纯CSS3的,虽然没有前面蝴蝶动画那么绚丽,但是蓝色的蝴蝶翅膀扇动起来也是别有一番风味的。

pure-css3-blue-butterfly

在线演示源码下载

jQuery SVG高端圆形菜单导航

这是一款非常富有创意的jQuery菜单导航插件,菜单项的小图标是使用SVG路径绘制而成,简单实用。同时每一个菜单项排列成一个圆圈,菜单项切换时,中间的圆圈也会随着移动,而且中间的大圆圈中会显示对应菜单项的描述和链接按钮。

jquery-svg-circle-menu

在线演示源码下载

纯CSS3 3D自行车动画

今天我们要给大家分享一款纯CSS3实现的3D自行车动画,和之前分享的纯CSS3实现自行车动画特效纯CSS3实现自行车动画不同的是,这款是3D立体的自行车,而且可以360度旋转,自行车的每个面都可以观察清楚,效果非常不错。

pure-css3-3d-bike

在线演示源码下载

SVG边框可连续变化的鼠标滑过动画按钮

今天我们要给大家分享一款基于SVG的鼠标滑过动画按钮,这款按钮的鼠标滑过动画呈现的是按钮边框线条可连续变化,非常绚丽。像这样的鼠标滑过按钮在之前我们也分享过很多,大家可以回顾一下纯CSS3鼠标滑过按钮动画 多种动画风格jQuery/CSS3多种鼠标滑过动画按钮集合,也许其中有些按钮效果可以用得上。

svg-border-animate-button

在线演示源码下载

纯CSS3带图标的3D旋转立方体链接

之前我们为大家分享过很多基于HTML5和CSS3的3D立方体动画,比如这款HTML5 3D立方体旋转动画HTML5/CSS3 3D立方体扭曲动画。今天要分享一款比较实用的CSS3带图标的3D旋转立方体链接,我们一般的网页链接就是一个字符串加上链接地址,今天这个不仅带有小图标,而且鼠标滑过链接时还会以立方体的动画形式翻转,非常炫酷。

pure-css3-3d-cube-link

在线演示源码下载

纯CSS3 3D立体圆盘时钟动画

我们已经分享过很多漂亮的圆盘时钟动画了,有基于jQuery的,也有基于HTML5和CSS3的,这其中也不乏SVG绘制的时钟动画。今天我们要继续给大家分享另外一款基于纯CSS3的3D立体圆盘时钟,它和其他圆盘时钟不一样,并不可以读取本地时间,并且实时更新。另外一个特点是它的外观呈现出3D立体的视觉效果,看起来非常酷。

css3-3d-circle-clock

在线演示源码下载