HTML5资源教程 | 分享HTML5开发资源和开发教程 | 第37页

CSS3/SVG绘制的悉尼歌剧院

5,033 人浏览

2017-10-11 15:24:42

这是一款基于纯CSS和SVG实现的歌剧院建筑，CSS3的强大和SVG的灵活打造了这个用不同线条勾勒的悉尼歌剧院，另外还有海面和天空中的太阳和白云也描绘的活灵活现，在网页绘制方面，除了炫酷的Canvas外，SVG也是不错的选择。

在线演示源码下载

jQuery/CSS3带阴影的3D进度条插件

6,479 人浏览

2017-10-06 11:05:50

这是一款非常炫酷的jQuery/CSS3进度条插件，这款进度条插件的特点是带有阴影，外观看起来有着3D立体的视觉效果。另外进度条实体部分可以利用CSS3相关特性绘制任意效果的填充物，可以是渐变颜色，也可以是网格形状，同时我们可以动态设置进度条的当前值。

在线演示源码下载

HTML5 SVG实现会跳舞的花朵 4种跳舞心情

12,298 人浏览

2017-10-02 19:38:04

这又是一款很有趣的HTML5 SVG动画，它是一朵会跳舞的花。首先，花朵和花盆均采用SVG进行绘制，虽然是简单的线条以及单纯的颜色，但是绘制出的效果还是相当逼真的。接下来是给花朵进行跳舞动画的渲染，结合CSS3的动画属性以及JavaScript的动态渲染，让这朵花赋予了4种不同心情下的跳舞动画，点击按钮即可切换当前心情下的跳舞动画，真的是非常可爱。

在线演示源码下载

CSS3粘性概念菜单Gooey Menu

4,954 人浏览

今天我们要给大家分享一款基于CSS3的粘性概念菜单，也可以叫做Gooey Menu，这种菜单按钮在目前的手机应用中使用非常广泛，外观样式也有很多种类型。今天的这款样式比较新颖，点击展开按钮即可展开所有菜单项，菜单项的形状呈波浪形，鼠标滑过菜单项时也会有高亮显示的效果。

在线演示源码下载

jQuery/CSS3超炫酷动画登录表单

7,032 人浏览

很早以前，我们为大家分享过不少外观和功能都非常不错的jQuery登录表单，有些登录表单应用了CSS3特性添加了更绚丽的动画特效，比如这款精美的CSS3登录注册切换表单就相当华丽。今天要分享的这款动画登录表单也非常不错，输入框中带有小图标，可随着焦点的获取和失去是现实和隐藏，点击登录时会有一段自定义的登录动画，并最后提示登录成功。

在线演示源码下载

纯CSS3模拟iPhone X背景切换动画

5,984 人浏览

尽管iPhone已经没有像以前那么火了，但是苹果的UI设计还是可以肯定的。今天我们要给大家分享一款基于纯CSS3的iPhone X背景切换动画，整体的切换动画以淡入淡出为主，iPhone X屏幕的背景和页面的背景交相呼应，显得非常自然和谐。

在线演示源码下载

CSS3侧边栏单页切换小图标菜单

7,242 人浏览

2017-10-01 21:59:44

这是一款基于CSS3的单页切换菜单插件，单页网站现在非常流行，即整个网站点击任何按钮和链接都不需要整体刷新，可以平滑地切换每一个页面。这次分享的这款应用就是在侧边栏悬停一列带小图标的菜单，点击每一个菜单项即可切换页面，在切换过程中还会产生不同的页面过渡动画效果。

在线演示源码下载

纯CSS3蓝色蝴蝶动画

6,850 人浏览

之前我们分享过几个漂亮的HTML5蝴蝶飞舞动画，比如超炫酷HTML5 Canvas蝴蝶飞舞动画和HTML5 SVG 3D蝴蝶飞舞动画都非常炫酷。今天要分享的这款蝴蝶动画是基于纯CSS3的，虽然没有前面蝴蝶动画那么绚丽，但是蓝色的蝴蝶翅膀扇动起来也是别有一番风味的。

在线演示源码下载

jQuery SVG高端圆形菜单导航

8,109 人浏览

这是一款非常富有创意的jQuery菜单导航插件，菜单项的小图标是使用SVG路径绘制而成，简单实用。同时每一个菜单项排列成一个圆圈，菜单项切换时，中间的圆圈也会随着移动，而且中间的大圆圈中会显示对应菜单项的描述和链接按钮。

在线演示源码下载

纯CSS3 3D自行车动画

4,901 人浏览

2017-09-30 20:29:31

今天我们要给大家分享一款纯CSS3实现的3D自行车动画，和之前分享的纯CSS3实现自行车动画特效和纯CSS3实现自行车动画不同的是，这款是3D立体的自行车，而且可以360度旋转，自行车的每个面都可以观察清楚，效果非常不错。

在线演示源码下载