HTML5 & CSS3 实战
关注
分享
扫一扫
文章平均质量分 92
展示一些使用HTML5 CSS3实现的很炫案例~
鸿洋_
关注领域：JavaEE,Android,Javascript,HTML5,MySQL,Hadoop,Linux
展开
-
HTML5 CSS3专题 纯CSS打造相册效果
今天偶然发现电脑里面还有这样的一个例子，感觉效果还不错，不记得啥时候下载的了，也好久没上w3cfuns了，怀念学习前台的日子，给大家分享下。效果图：效果是不是还是很不错的，最主要的是没有使用一行js，这才是亮点。先看html文件： 纯CSS3相册效果原创 2014-06-15 16:15:50 · 27448 阅读 · 3 评论 -
HTML5 CSS3 精美案例 ： 实现VCD包装盒个性幻灯片
哈，首先感谢下w3cfuns的老师，嗯~好了，这次给发夹分享一个CSS3+Javascript VCD包装盒个性幻灯片的一个案例。效果图：图片切换是不是很个性，效果也很不错，大家可以将其使用到自己的网站上。先看下html：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt原创 2014-06-15 19:00:23 · 8613 阅读 · 1 评论 -
HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量） （一）
上传基本是项目中经常出现的，一般采用：1、form提交 2、flash3、html5form提交会刷新页面，很难做到异步上传；flash可能是用得比较多了，因为可以兼顾到几乎所有的浏览器，我之前一直会用jquery的uploadify作为项目中的上传工具，uploadify也有基于html5好像是收费的，大家可以去官网看看；当然了，现在html5提供了API以及File，FileR原创 2014-06-16 23:17:33 · 18530 阅读 · 1 评论 -
HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量） （二）
上一篇已经实现了这个项目的整体的HTML和CSS：HTML5 CSS3 经典案例：无插件拖拽上传图片 （支持预览与批量） （一）这篇博客直接在上篇的基础上完成，最终效果：效果图1：效果图2：好了，请允许我把图片贴了两遍，方便大家看效果了~可以看出我们的图片的li的html其实还是挺复杂的，于是我把html文档做了一些修改：原创 2014-06-16 23:35:18 · 28745 阅读 · 15 评论 -
HTML5 CSS3 诱人的实例 ：模仿优酷视频截图功能
一般的视频网站对于用户上传的视频，在用户上传完成后，可以对播放的视频进行截图，然后作为视频的展示图。项目中也可以引入这样的功能给用户一种不错的体验，而不是让用户额外上传一张展示图。效果图：看起来还是很不错，下面我给大家分析下，极其核心代码很简单：_canvas = document.createElement("canvas");_ctx = _canvas.getConte原创 2014-06-18 00:29:56 · 22131 阅读 · 7 评论 -
HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果
首先感谢w3cfuns的老师~今天给大家带来一个CSS3制作的翻牌效果，就是鼠标移到元素上，感觉可以看到元素背后的信息。大家如果制作考验记忆力的连连看、扑克类的游戏神马的，甚至给女朋友写一些话语，放在使用该实例制作的相册之后都可以尝试下，哈~效果图：实例用到的一些CSS3的新属性： a、-webkit-perspective: 800px; perspective原创 2014-06-19 20:30:19 · 11517 阅读 · 5 评论 -
HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册
首先说明一下创意的出处：http://www.zhangxinxu.com/study/201209/pictures-3d-slide-view.html（张鑫旭的博客 ），对前台感兴趣的可以没事去看看他的博客，很给力~这篇博客的目的是因为上篇HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没讲到，就是perspective原创 2014-06-21 21:08:32 · 37015 阅读 · 6 评论 -
HTML5 CSS3 专题 ：诱人的实例 3D展示商品信息
强化下perspective和transform:translateZ的用法。传统的商品展示或许并不能很好的吸引用户的注意力，但是如果在展示中添加适当的3D元素，~说不定效果不错哈~效果图：说明一下：这个创意不是我想的，哈~模仿别人的，创意应该是w3cplus上的。当然了，重点是教大家如何做，就当高仿了~首先，先教大家利用CSS3制作一个正方体：在木有CSS原创 2014-06-21 22:07:11 · 18639 阅读 · 1 评论 -
HTML5 CSS3 诱人的实例 ：canvas 模拟实现电子彩票刮刮乐
今天给大家带来一个刮刮乐的小例子~基于HTML5 canvas的，有兴趣的可以改成android版本的，或者其他的~效果图：贴一张我中500w的照片，咋办啊，怎么花呢~好了，下面开始原理：1、刮奖区域两个Canvas，一个是front ， 一个back ，front遮盖住下面的canvas。2、canvas默认填充了一个矩形，将下面canvas效果图遮盖，然后监原创 2014-06-24 12:08:24 · 44119 阅读 · 7 评论 -
HTML5 CSS3 诱人的实例： 3D立方体旋转动画
创意来自：http://www.html5tricks.com/demo/html5-3d-cube/index.html ， 同学给我发的例子原创 2014-06-24 18:28:32 · 45720 阅读 · 6 评论 -
HTML5 CSS3 诱人的实例 ： 网页加载进度条的实现，下载进度条等
今天给大家带来一个比较炫的进度条，进度条在一耗时操作上给用户一个比较好的体验，不会让用户觉得在盲目等待，对于没有进度条的长时间等待，用户会任务死机了，毫不犹豫的关掉应用；一般用于下载任务，删除大量任务，网页加载等；如果有使用html5为手机布局的，也可以用于手机中~效果图：1、html结构：原创 2014-06-26 12:06:39 · 56236 阅读 · 6 评论