码迷,mamicode.com
首页 > Web开发 > 详细

分享10款web前端基于css3和HTML5的源码预览下载

时间:2014-10-09 14:51:18      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:http   io   os   ar   strong   sp   2014   on   html   

1.纯CSS3模拟烧烤动画

今天要来分享一款非常有创意的CSS3动画,这款动画模拟了一个烧烤架,烧烤架上的食物也都是用纯CSS3绘制而成,没有用一张图片,效果相当逼真。另外一个有意思的是,这个CSS3烧烤架还会冒烟,模拟了烧烤时的情景。

bubuko.com,布布扣

在线演示

源码下载

2.纯CSS3实现人物跑步动画

还记得之前给大家分享的这款CSS3人物行走动画吗?动画效果确实棒极了。今天我们再分享一款基于CSS3的人物跑步动画,跑步动画非常简单,跑步的人物仅仅用一些线条勾勒出来,通过这些线条的弯曲和移动形成跑步的动画效果。

bubuko.com,布布扣

在线演示

源码下载

3.纯CSS3响应式分页插件

这次我们要来看一款纯CSS3实现的响应式分页插件,对于分页插件,之前我们也分享过一些,都是基于jQuery分页插件。这款CSS3分页插件可以完全自定义分页条的样式,包括鼠标滑过时的背景颜色、页码的数量以及前后翻页的按钮。

bubuko.com,布布扣

在线演示

源码下载

4.纯CSS3实现关闭按钮 6组自定义按钮样式

CSS3并不是只可以制作一些超酷的动画效果,如果你有创意,CSS3也可以帮助你实现简单而实用的Web应用。今天要分享一款纯CSS3实现的关闭按钮,看上去这些关闭按钮很单调,但是仔细一看你会发现,居然一共有6组不同的样式,如果你想在一个网页窗口中添加一个自定义关闭按钮,那么就可以参考这个CSS3应用。

bubuko.com,布布扣

在线演示

源码下载

5.CSS3带图标的消息提示框

之前我们分享过一款CSS3和jQuery带进度条的消息提示框,今天我们再来分享一款CSS3带图标的消息提示框,提示框的右侧有一个代表性的小图标,非常漂亮。CSS3技术的应用,可以让消息框的四个角都实现圆角效果。

bubuko.com,布布扣

在线演示

源码下载

6.CSS3垂直手风琴折叠菜单

之前我们已经分享过很多关于手风琴菜单了,有水平方向的,也有垂直方向的。今天要分享的这款CSS3垂直手风琴折叠菜单也非常不错,这款CSS3手风琴菜单的每一个菜单项都有小图标,而且只能有一项展开,更有意思的是,在菜单折叠和展开式右侧的箭头也会有不错的动画效果。

bubuko.com,布布扣

在线演示

源码下载

7.HTML5火球挡板碰撞动画游戏

还记得之前分享的HTML5 Canvas火焰闪烁动画吗,动画效果非常炫酷。今天我们要再来分享一款超酷的HTML5火球挡板碰撞动画游戏。屏幕上有一个火球在不停的运动,你可以移动鼠标滑动屏幕下方的挡板,火球碰撞到挡板后,即可反弹出去,这是个很有特色的HTML5游戏。

bubuko.com,布布扣

在线演示

源码下载

8.HTML5/CSS3圆盘秒表动画 秒表可暂停计时

关于HTML5和CSS3的时钟应用在之前我们已经分享过不少了,还有一些HTML5的日期选择应用。今天我们要分享一款基于HTML5和CSS3的圆盘秒表动画,秒表可以精确到0.001秒,并且可以在计时过程中暂停计时,同时秒表可以随时重置。

bubuko.com,布布扣

在线演示

源码下载

9.3D版HTML5模拟衣服撕扯动画

还记得很早以前向大家分享的这款HTML5 Canvas模拟衣服撕扯动画吗?这绝对是一款非常具有创意而且很好玩的HTML5动画。今天我们来分享一下它的3D版本,在原来的基础上,衣服布料呈3D环形显示,你同样可以用鼠标拖拽衣服,不过和之前不同的是,鼠标左键用来拖拽衣服,鼠标右键用来切割衣服,失去了之前鼠标用力程度和衣服破碎程度的关系,似乎功能上有所缺失,但是HTML5 3D功能还是不错的。

bubuko.com,布布扣

在线演示

源码下载

10.纯css3实现的环形导航菜单

之前为大家介绍了好几款导航菜单,今天要给大家带来一款纯css3实现的环形导航菜单。该导航比较新鲜,列表图标位于中间,单击列表图标的时候,各项分布于列表图表的四周。形成一个环形。

bubuko.com,布布扣

在线演示

源码下载

分享10款web前端基于css3和HTML5的源码预览下载

标签:http   io   os   ar   strong   sp   2014   on   html   

原文地址:http://www.cnblogs.com/i7758/p/4013262.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!