这是一款使用html5 svg.css3和js制作的炫酷文字爆炸特效.该文字特效用SVG path属性将文字路径切割为很多小块,然后使用css3和js在鼠标滑过文字时制作文字爆炸分裂的炫酷效果. 在线预览   源码下载 这是一款使用html5 svg.css3和js制作的炫酷文字爆炸特效.不论是HTML还是CSS都没有能力将文字分割成小块,但是SVG可以实现这个效果. 制作SVG文字 可以使用矢量图制作工具,如Adobe Illustrator等,将文字变成轮廓,然后使用“ Knife ”工具在…

基于html5顶部导航3D翻转展开特效是一款基于jQuery+HTML5实现的3D翻转网站导航菜单代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <header class="cd-header"> <a href="#0" class="cd-logo"><img src="img/cd-logo.svg" alt="Logo"></a&…

1.华丽的HTML5图表 可展示实时数据 HTML5在图表应用中也十分广泛,比起以前的网页图表,HTML5图表制作更便捷,功能更强大.这款HTML5图表插件外观十分华丽和专业,在数据展示方面也很有优势,图表不仅支持多维数据展示,而且支持区域选择数据功能,利用该HTML5图表可以更加方便地管理你的数据. 在线演示 源码下载 2.HTML5折线图表Aristochart 图表配置简单 利用这些HTML5图表可以很方便的展示各种数据,而且非常直观.今天要向大家分享一款HTML5折线图表插件Aristo…

基于HTML5手机上下滑动翻页特效.这是一款手机移动端触屏滑动翻页代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section class="u-alert"> <img style="display:none;" src="images/loading_large.gif"> <div class="alert-loading z-move"> <d…

分享一款基于html5海贼王单页视差滚动特效是一款流行滑落网页特效代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="top"> <div class="top_main center"> <ul id="scene" class="scene"> <li class="layer" data-depth="0.10"…

今天为给大家介绍一款基于jquery超炫的图片切换特效.由百叶窗飞入显示图片.图片消息的时候也是百叶窗渐行渐远.用于图片展示,效果还是非常好,我们一起看下效果图: 在线预览   源码下载 来看下实现的代码.注意了,这里有引用jquery和underscore插件. html代码: <div class="wrap"> <div class="box active" style="background-image: url(img/1.jp…

今天给大家分享一款效果非常炫酷的HTML5 SVG和CSS3蹦床式图片切换特效插件.该图片切换插件在进行图片切换时,整个屏幕就像一张大蹦床一样,将图片弹射出去,切换到另一张图片,效果非常有创意.效果图如下: 在线预览   源码下载 HTML结构 该图片切换特效的HTML结构中,第一个元素是SVG图形,当切换图片时,它将从一个规则的矩形变为一个被压缩的矩形. <div class="stack"> <ul id="elasticstack" clas…

之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的文字动画,相当酷的动画效果. 在线预览   源码下载 实现的代码. html代码: <canvas class="canvas"></canvas> <div class="help"> ?</div> <div c…

前言 文字是网页中最基本的元素,一般我们在网页上都是展示的静态文字,但是就效果来说,还是比较枯燥的.文字淡入淡出的动画效果在项目中非常实用,如果有某些关键的文字,可以通过这种动态的效果来提醒用户阅读. 动态效果图 这个 Demo 是不断重复地设置文字的大小和透明度,这些英文字母也是我自己利用 HT 的矢量绘制的,总的来说效果还是不错的. 代码实现 代码总共一百来行,比较简单,前面说过我的英文字母是用矢量绘制的,用矢量绘制图形的好处非常多,比如图片缩放不会失真,这样在不同的 Retina 显示屏上…

今天给大家分享4个物理和重力实验,用来展示 html canvas 的强大.几年前,所有这些实验都必须使用 Java 或 Flash 才能做.在下面这些惊人的例子中,就个人而言,我比较喜欢仿真布料的那个,我简直不敢相信它是使用html canvas 做出来的.效果图如下: 在线预览   源码下载 主页面代码: <iframe scrolling="no" frameborder="0" width="800px;" height="…