纯CSS3花瓣样式的Loading加载动画

之前我们分享过很多基于纯CSS3的Loading加载动画,有的是Loading动画小图标,有的是进度条动画,这些在延迟加载的页面和复杂耗时操作上非常实用。这次我们要分享另外一款富有创意的纯CSS3花瓣样式的Loading加载动画,它的外观是一个花瓣形状的小图标,页面加载时花瓣小图标会不停旋转,并且在花瓣下方显示一个进度条。

css3-flower-loading

在线演示源码下载

HTML5骏马奔跑动画

今天给大家分享一个非常新颖的HTML5动画,它是一匹骏马,在疾风中飞驰。马的外观是在Canvas上绘制而成,同时骏马在奔跑的时候从地面上飞溅上来很多泥土,这让骏马奔跑的效果更加逼真,这个动画可以改进的地方是可以利用CSS3将骏马的面部、身体等部位描述的更加具体一点,比如添加眼睛、马鞍之类的元素。

html5-horse-animation

在线演示源码下载

HTML5 CSS3颜色选取并复制十六进制值

之前我们分享过很多基于jQuery和HTML5的颜色拾取器,都可以在调色板上选取不同的颜色,比如这个jQuery实现的一个颜色选择器功能就比较强大,可以拾取任意颜色。这次我们分享的这款颜色选取应用是基于HTML5和CSS3的,它的特点是可以选择某一色系中的几种常用颜色,并且可以将对应颜色的十六进制值复制出来。

html5-css3-color-copy

在线演示源码下载

HTML5 Canvas烟花绽放庆祝活动场景

前段时间,我们分享过几个基于HTML5 Canvas的烟花动画,例如这个2D平面的烟花动画,也是基于HTML5 Canvas的;同样的另外一个基于3D带音效的烟花燃放动画效果也非常炫酷。这次我们分享的另外一款基于HTML5 Canvas的烟花绽放动画的特点是,除了可以播放烟花动画,而且还可以用粒子动画的方式显示文本,例如公司名字,这样更是渲染了庆祝的氛围。

html5-canvas-fireworks-celebrate

在线演示源码下载

VueJS表头固定的数据表格 可按每列排序

在网页中,表格(table)大部分用于数据的展示和处理,在jQuery的时代,用于表格的插件非常多。今天我们介绍一个基于VueJS的表格应用,它的特点是表格表头固定,也就是说当表格数据行很多时,页面下拉时表头可以固定,方便查看每一列的数据。另外还有特点是我们可以对每一个列进行排序。同时,这款JS表格的外观也不错,可以很好用到你的项目中。VueJS还是挺灵活的。

js-sticky-sort-table

在线演示源码下载

基于Three.js和HTML5 Canvas的3D水晶球体

今天给大家分享一个很酷的HTML5 Canvas 3D动画,它同样是一个基于Three.js制作的动画特效。在Canvas上有一个用许多长度各异的水晶柱形组成的球体,我们还可以用鼠标拖拽球体来从不同角度观察球面,还可以用鼠标滚轮来缩放球面。还有一个特性就是,双击球面可以改变水晶面的颜色,同时水晶面上会随着旋转的角度出现亮光,更加凸显出其3D立体的视觉效果。

threejs-canvas-3d-crystals

在线演示源码下载

HTML5 Emoji自定义表情编辑器

Emoji表情在网页中使用十分广泛,它由一些简单的字符组成许多表情,例如笑脸、蛋糕等。今天我们要介绍一个基于HTML5和CSS3的Emoji自定义表情编辑器,初始默认是一个人脸,你可以在编辑器中为该人脸表情添加和改变各种面部表情,例如带上帽子,噘嘴等,甚至可以将其他任意Emoji表情添加上去,用起来非常不错。但是如果可以将编辑好的表情导出就更加完美了。

html5-emoji-editor

在线演示源码下载

HTML5和CSS3实现的自定义3D滑杆控件

之前我们分享过一些比较有意思的滑杆控件,比如这款基于VueJS的滑块组件就非常不错。滑杆这种控件一般用在范围选取上面,比如结合图表生成一定范围的数据。今天我们分享的这个滑杆控件自定义程度非常高,特别是使用了CSS3的3D特性,让整一个滑杆控件效果更加炫酷。

html5-css3-3d-slider

在线演示源码下载

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

在线演示源码下载