HTML5/CSS3悬浮菜单可自定义小图标

28,671 人浏览

2014-03-18 21:17:35

前些天我们分享过一款非常有特色的CSS3菜单HTML5/CSS3鬼脸表情下拉菜单，非常可爱。今天要分享的这款CSS3菜单是悬浮菜单，当鼠标滑过菜单项时，整一个菜单项即会悬浮上来。另外，菜单还允许你自定义漂亮的小图标，小图标也会悬浮上来，非常不错。

在线演示源码下载

HTML5 Canvas模拟翻滚动画 3D视觉效果

11,070 人浏览

2条回复

HTML5作为最先进的浏览器技术，可以创造出很多不同凡响的特效应用，尤其是3D动画更是轻而易举，大家可以在之前我们分享的HTML5动画栏目下欣赏到很多超酷的HTML5动画，也可以在HTML5 Canvas栏目下学习HTML5 Canvas应用的方法。今天要分享的这款HTML5 Canvas模拟翻滚动画特效给你呈现了不一样的3D视觉特效，一起来欣赏吧。

html5-canvas-roll

在线演示源码下载

CSS3波浪形菜单结合背景超级绚丽

15,435 人浏览

2条回复

我们分享过许多各种各样的CSS3菜单，应该说效果都比传统的CSS菜单强悍。这次要分享的这款CSS3菜单有点特别，菜单的整体形状类似波浪形，鼠标滑过菜单项时也会改变背景色表示该菜单项被激活。另外该CSS3菜单结合不错的背景图片效果更加震撼。

在线演示源码下载

HTML5播放器API集合轻松学会HTML5播放器开发

29,937 人浏览

1条回复

之前我们分享了两款不错的HTML5播放器，分别是HTML5视频播放器Video.Js和HTML5播放器神话卡带式古典播放器，效果都非常酷。今天我再分享一款最基本的HTML5视频播放器，这个播放器演示罗列了所有操作HTML5播放器的API，初学者可以更好的学习和使用HTML5播放器。

html5-video-api

HTML代码：

<video id="video" controls="" preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png">
      <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
       <p>Your user agent does not support the HTML5 Video element.</p>
 </video>
<div id="buttons">[......]

阅读全文>>

HTML5梦幻特效可给任意元素添加魔幻效果

42,217 人浏览

10条回复

我们之前介绍HTML5动画特效比较多的是HTML5 3D特效，今天我们来换一种风格，来分享一款看起来比较魔幻的HTML5特效。它可以给网页上任意元素（图片、文字等）添加这么一种效果，即鼠标滑过时，元素上就会出现非常魔幻的动画特效，什么特效呢？你可以点开demo链接查看。

html5-magic-effect

下面我们一起来看看实现这款魔幻动画的过程和源代码，代码主要由HTML、CSS和JavaScript组成。

HTML代码：

<h1>A little canvas script to <span>add magic</span> to DOM elements!</h1>

<button class="sparkley">Everything's better with sparkles!</button>
<button class="sparkley last">I eat rainbows and poop butterflies!!</button>

没什么特别，接下来就会在这些元素上增加魔[......]

阅读全文>>

10套精美而实用的CSS3按钮

13,674 人浏览

6条回复

2014-03-17 21:53:49

今天一起来分享10套精美而实用的CSS3按钮，希望能帮助到大家。

1、纯CSS3社会化分享按钮可固定网页顶部

之前我们已经分享过一款基于HTML5和CSS3技术的社会化分享CSS3发光社会分享按钮，发光效果挺酷的。这次我依然要分享一款还不错的纯CSS3社会化分享按钮组合，该按钮默认可以分享facebook、twitter、youtube等社交网站，也可以自己添加其他的按钮，非常方便。这款CSS3社会化分享按钮另一个特点是可以固定在网页顶部，让用户可以更方便的分享网页内容。

在线演示源码下载

2、CSS3发光社会分享按钮超酷CSS3按钮组合

之前我们分享过很多炫目的CSS3按钮，而且大部分按钮都有漂亮的CSS3动画。但是今天要介绍一款CSS3社会分享按钮，这款分享按钮在鼠标滑过时会产生投影和发光效果，这些特效是由CSS3技术实现的，代码非常简单。而且，按钮在按下的时候也呈现出3D立体的效果。希望这款CSS3发光社会分享按钮可以应用在你的网页分享功能上。

在线演示源码下载

3、CSS3带Tooltip的按钮按钮绿色[......]

阅读全文>>

CSS3带图标提示插件多主题颜色

10,263 人浏览

1条回复

在网页中，我们操作完耗时的操作，最好给用户一个提示，这个CSS3插件就实现这个提示功能。该CSS3提示功能有几种不同的颜色，并且每一个提示框都有一个指定的小图表。用户可以点击关闭按钮来关闭提示框，提示框出现淡出的CSS3效果。

css3-notification

在线演示源码下载

纯CSS3社会化分享按钮可固定网页顶部

14,866 人浏览

发表回复

在线演示源码下载

HTML5 Canvas画板画图工具可定义笔刷和画布

116,422 人浏览

2条回复

HTML5 Canvas还有一个比较实用的应用，那就是网络画板，这样我们就可以在网页上直接进行画图操作。今天要分享的这款HTML5 Canvas画图工具就可以简单实现网络画图的功能，我们可以自定义笔刷的类型、粗细、颜色，也可以定义画布的大小和背景颜色等。我们也可以对这款HTML5画图工具进行扩展，让它的画图功能更加完善。

html5-canvas-draw

下面我们来简单地分析一下实现这个HTML5网页画板的原理及代码，代码由HTML以及Javascript组成，主要还是Javascript代码。

HTML代码：

<div style="width:530px;margin:10px auto">
    <div id="canvasDiv"></div>
  </div>

HTML代码非常简单，仅仅是构造了一个canvas容器，我们的画板就在这个地方生成。

Javascript代码：

首先我们通过一组变量来定义画板的样式，以及一些数据的初始化：

var canvas;
var context;
var canvasWidth = 490[......]

阅读全文>>

CSS3发光社会分享按钮超酷CSS3按钮组合

9,623 人浏览

发表回复

在线演示源码下载

HTML代码：

1、纯CSS3社会化分享按钮 可固定网页顶部

2、CSS3发光社会分享按钮 超酷CSS3按钮组合

3、CSS3带Tooltip的按钮 按钮绿色[......]

HTML代码：

Javascript代码：

1、纯CSS3社会化分享按钮可固定网页顶部

2、CSS3发光社会分享按钮超酷CSS3按钮组合

3、CSS3带Tooltip的按钮按钮绿色[......]