首页 > 代码库 > 分享10款web前端基于css3和HTML5的源码预览下载
分享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的源码预览下载