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

1.纯CSS3模拟烧烤动画

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

在线演示

源码下载

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

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

在线演示

源码下载

3.纯CSS3响应式分页插件

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

在线演示

源码下载

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

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

在线演示

源码下载

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

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

在线演示

源码下载

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

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

在线演示

源码下载

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

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

在线演示

源码下载

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

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

在线演示

源码下载

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

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

在线演示

源码下载

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

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

在线演示

源码下载

未经允许不得转载：爱前端网 » 10款web前端基于css3和HTML5的源码预览下载