HTML5 Canvas和SVG实现的五彩万花筒动画

Canvas的优势在于允许你在画板上任意绘制图形,SVG的优势在于可以很方便的在网页上绘制各种形状的路径。今天分享给大家的就是一款基于HTML5 Canvas和SVG的五彩万花筒动画,五彩斑斓的彩色路径将会不停的变换形状和颜色,效果非常炫酷。

html5-svg-color-cylinder

在线演示源码下载

纯CSS3实现的六边形加载动画

之前我们分享过很多样式各异的CSS3 Loading动画,例如这个纯CSS3五彩Loading加载动画CSS3液体形态的Loading动画。这次给大家带来另外一个基于纯CSS3的六边形加载动画,这个Loading动画的特点是有许多个小的六边形组合成一个大六边形,在等待加载的时候小六边形和大六边形之间不停的组合切换。

pure-css3-hexagon-loading

在线演示源码下载

JavaScript和CSS3实现跟随鼠标发光的按钮

在深色背景的网页中,我们经常会采用一些高亮效果的按钮来使整个页面更加协调。这次我们要分享一个用JavaScript和CSS3实现的发光按钮,当鼠标在按钮上或者按钮周围时,发光的效果就会跟随鼠标移动,在深色背景页面中,这种发光动画的按钮还是很漂亮的。

javascript-css3-shine-button

在线演示源码下载

可自动切换的 jQuery 图片播放器插件

今天给大家带来一个简单实用的jQuery图片播放器,它有以下特点:1.图片播放器侧边带有Tab切换按钮,鼠标滑过按钮即可切换图片;2.图片上悬浮半透明的图层,图层上可以添加图片的标题和描述;3.可自动播放。jQuery技术让这个插件的使用变得十分方便,兼容性也不错。

jquery-image-auto-player

在线演示源码下载

带播放列表的jQuery音乐播放器

我们经常可以在一些个人博客中看到各种各样的音乐播放器,它可以让你在阅读文章的同时欣赏唯美的音乐。HTML5标准的出现,使得在网页中嵌入音乐播放器变得十分简单,你可以直接在HTML页面中使用<audio>标签即可。这次我们分享的这款音乐播放器使用了jQuery技术,使得网页中的音乐播放器具备播放列表的功能,点击列表即可切换至相应的歌曲。

jquery-music-player-with-list

在线演示源码下载

SVG和CSS3实现的爱心Like按钮

在现代网页中,我们经常可以在一些文章、视频和图片页面上找到”Like”按钮,并且通过点击该按钮来表示自己对该内容的喜欢或者不喜欢。大部分”Like”按钮是纯文本按钮或者图片按钮,如果你想让它们具有特别的动画特效,那么我们就需要用到CSS3或者JavaScript了。本文给大家带来一个带有爱心散列动画的Like按钮,主要采用了SVG和CSS3这两个技术。当你点亮Like按钮时,按钮的四周将会散发出多个五彩绚丽的爱心。

svg-css3-heart-like-button

在线演示源码下载

基于 AngularJS 的日期和时间选择组件

AngularJS是一款目前非常火的JavaScript脚本库,应用范围十分广阔。今天给大家分享一款基于AngularJS的日期时间选择组件,和之前介绍的日期选择插件一样,它同样支持年月日的快速定位。另外这款AngularJS日期选择组件还支持时间的选择,精确到秒。另外再推荐一款之前介绍的日历控件,支持老皇历功能,也是很不错的。

angularjs-datetime-picker

在线演示源码下载

基于 ApexCharts 的 HTML5 曲线图表 可选取数据范围

ApexCharts是一款基于JavaScript和HTML5的现代化图表库,功能十分强大。今天要分享的这款曲线图表便是基于ApexCharts实现的,图表最终以SVG的形式展示在浏览器上。这款图表的另一个特点是可以自定义选取数据的范围,范围确定后,图表中同时显示该范围中的曲线图形和柱状图形。类似的还有这款HTML5 Canvas图表应用Chart.js

html5-apexcharts

在线演示源码下载

jQuery圆形旋转切换菜单 带菜单项描述

jQuery有着无数的插件,菜单插件是jQuery插件中最多的,尤其是CSS3和HTML5的配合,让jQuery菜单变得更加丰富多彩。今天我们要给大家分享一款基于jQuery的创意菜单,它是圆形旋转的菜单项,菜单项会自动切换,并在切换时在圆形中间显示当前菜单的菜单项描述信息。

jquery-circle-rotate-menu

在线演示源码下载

超酷的HTML5/CSS3 3D气泡悬浮菜单

之前我们分享过各式各样的网页菜单,有基于jQuery的,也有基于HTML5和CSS3的,很多都比较炫酷和实用,比如这款jQuery 3D 垂直多级菜单就非常实用,还有这款CSS3 3D立方体菜单导航就非常炫酷和富有创意。今天我们要给大家带来另外一款超酷的HTML5 3D菜单,每一个菜单项是一个个3D样式的悬浮气泡,点击菜单项后就可以激活当前菜单。

html5-3d-bubble-menu

在线演示源码下载