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

我们之前介绍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按钮

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

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

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

css3-social-button-in-top

在线演示        源码下载

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

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

css3-html5-share-button

在线演示        源码下载

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

阅读全文>>

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

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

css3-notification

在线演示源码下载

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

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

css3-social-button-in-top

在线演示源码下载

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

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 canvasWid[......]

阅读全文>>

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

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

css3-html5-share-button

在线演示源码下载

CSS3 Lava Lamp动画下拉菜单 菜单很简洁

之前我们分享过一些漂亮的CSS3菜单,来回顾一下:CSS3灰色按钮菜单CSS3 飘带菜单等,大家可以前往CSS3菜单类目下查看演示和下载源码。今天我们分享的这款CSS3菜单也是下拉菜单,鼠标滑动到相应菜单项时,菜单项下方会滑过一条漂亮的线条。

css3-lava-lamp-menu

在线演示源码下载

分享8款最新HTML5/CSS3功能插件及源码下载

上周我向大家分享了许多新鲜有趣的HTML5/CSS3应用,其中也有利用jQuery的,新的一周即将来临,小编继续向大家分享8款最新HTML5/CSS3功能插件及源码下载,一起来看看吧。

1、HTML5/CSS3鬼脸表情下拉菜单 超级可爱

之前我们分享过很多CSS3菜单了,但是看了下面这款CSS3菜单,你会觉得这款菜单超级可爱,超级有意思。这款HTML5/CSS3鬼脸表情下拉菜单真的很特别,虽然菜单的实现并没有利用复杂的HTML5/CSS3技术,但是创意的确不错。

html5-css3-face-menu

在线演示        源码下载

2、CSS3带Tooltip的按钮 按钮绿色清新

之前我们介绍过很多漂亮的CSS3按钮,大家可以在CSS3按钮目录下查看演示和下载源码。今天我再向大家分享一款有特色的CSS3按钮,该按钮带有Tooltip功能,鼠标滑过按钮时即可显示Tooltip,另外按钮还有一个漂亮的图标。这款CSS3按钮整体是绿色清新风格,非常不错。

css3-button-with-tooptip

在线演示        源码下载

3、HTML5/CSS3制作Safari Logo 指针动画很炫

上次我们分享过一款利用HTML5/[......]

阅读全文>>

HTML5/CSS3卡片抽出动画 HTML5超炫动画

HTML5动画真的很酷,今天我们又要分享一款很不错的HTML5动画特效,它是一款卡片抽入抽出动画,点击信封,即会有一张卡片从信封中飞出来,由于利用了CSS3技术,在卡片飞入飞出的时候都有淡入淡出的特效。

html5-css3-card-animation

在线演示源码下载

纯CSS3实现动态Loading加载 仅6个span标签

之前我们介绍过几款具有各种动画效果的CSS3进度条,我们可以在CSS3进度条栏目中查看演示和下载源码。今天我们再介绍一款实现超级简单的CSS3进度条动画,该进度条是条形进度条,仅用了6个span标签和相应的CSS3代码实现了该CSS3条形进度条。

css3-loading-bar-with-6-span

在线演示源码下载