作者归档:sxwgf

CSS3和SVG实现的圆环菜单动画

网页菜单的样式真实多种多样,特别是HTML5和CSS3的流行,让网页菜单的外观更加丰富多彩了。今天我们要给大家分享一个基于CSS3和SVG的圆环形状的菜单,在圆环上一共有7个节点,表示菜单项,当鼠标滑过或者点击其中一个节点时,就会弹出文字菜单项,圆环形状和节点都是采用SVG绘制而成,动画效果也非常不错。

css3-svg-circle-menu

在线演示源码下载

超酷的CSS3复古风格和字体的3D按钮

我们分享过很多基于CSS3的3D按钮,很多都非常漂亮,例如这篇7款外观迷人的HTML5/CSS3 3D按钮特效文章中就收藏了不少。这次我们要带来一款也是基于CSS3的3D按钮,它有着复古的风格和字体。第一个按钮根据光标在悬停时的位置向左或向右倾斜,它的风格类似于老式游戏机按钮。 这些按钮配置了sm,md,lg大小类以及bootstrap-esque类,如primary,secondary,dangerous,warning,success和info。第二个按钮是一个加载程序按钮,按下它时会有自己的进度条。 它只会向中心推动,但随后向上打开,在它的正面显示一个进度条。 根据操作的成功与否,它将在完成时显示具体信息。

css3-3d-retro-button

在线演示源码下载

基于CSS3的iOS风格开关切换按钮

之前我们为大家分享过一些外观富有创意而且实用的CSS3开关切换按钮,比如这个纯CSS3表情切换样式的开关切换按钮多组超具创意的CSS3开关切换按钮。这次我们带来另外一款基于CSS3的iOS风格开关切换按钮,它的样式是iOS风格的,其中一个特点是你不能同时选中这3项。

css3-ios-switch-button

在线演示源码下载

Echarts数据管理图表界面 多种图表使用示例

早些时候,我们给大家分享过一款基于Echarts的HTML5 Canvas中国地图,非常实用。这次我们继续给大家带来一些基于Echarts的数据管理图表界面,这个界面包含很多基于Echarts的图表示例,有柱形图、饼图和地图等。

echarts-data-graphic

在线演示源码下载

CSS3根据渐变序列猜颜色游戏

今天给大家分享一个基于CSS3和JavaScript的颜色辨析游戏,已知3个一组的方块,前面2个方块涂有相近的两种颜色,你根据这两种颜色序列的递减情况,猜测第三个方块的颜色是什么,并从下面的方块中选择你认为最接近的颜色,一起来测试一下自己的辨色能力吧。

css3-guess-color

在线演示源码下载

HTML5 Canvas火焰跟随鼠标动画

今天给大家分享一个效果很棒的HTML5 Canvas动画,它是一个火焰动画,这与我们之前分享的HTML Canvas火焰画笔动画类似,也是在Canvas上通过鼠标绘制而成。这个火焰动画会不停地跟随鼠标移动,如果你有一个游戏方面的宣传网页,那么这个动画可以用在鼠标移动上,应该是比较酷的。

html5-canvas-fire-mouse

在线演示源码下载

CSS3自定义样式超链接按钮 鼠标滑过带动画特效

超链接和按钮在网页中是最为基本的元素了,我们可以通过设置CSS样式将链接外观做一些简单的调整,比如文本大小、颜色和下划线。今天我们分享的一个基于CSS3的自定义样式超链接按钮,并且鼠标滑过链接后带有各种各样的动画特效。

css3-hyperlink-animation

在线演示源码下载

WebGL和Canvas可视化3D飞机模型结构 可360度预览

今天给大家分享一个基于HTML5 Canavs和WebGL的3D模型结构,它是一个可360度预览的可视化3D飞机模型结构。我们可以通过鼠标拖拽自定义不同的角度对飞机模型进行观察,也可以点击按钮对飞机的具体部位进行详细观察。同时,我们也可以通过鼠标滚轮来缩放飞机的大小。

webgl-svg-3d-plain

在线演示源码下载

CSS3个性化自定义样式的Radiobox单选框

单选框Radiobox是网页表单中比较常用的元素,有时候为了统一网页风格,让页面变得更加协调,我们通常需要重写浏览器单选框的默认样式。今天我们要分享的是一款基于CSS3的个性化自定义样式Radiobox单选框,它不仅有着扁平化的样式外观,而且在选中项切换的时候伴随动画效果。

css3-personalise-radiobox

在线演示源码下载

纯CSS3超逼真的风车旋转动画

很早以前,我们给大家分享过一款基于HTML5和CSS3的风车动画,效果还是不错的。这次我们介绍的同样是一个基于CSS3的风车旋转动画,只不过这个风车的元素更丰富,更像是在一个美丽的村庄中,一个风车在日落的渲染下不停的旋转工作。

pure-css3-windmill

在线演示源码下载