在的网页中应用了越来越多的3D应用，特别是基于HTML5 Canvas的动画特效，让用户有一种非常震撼的视觉体验。本文收集了8个非常炫酷的3D视觉效果的HTML5动画，都有源代码分享，你可以学习你感兴趣的HTML5动画，一起来看看。

1、CSS3飘带状3D菜单

菜单带小图标这次我们要来分享一款很特别的CSS3菜单，菜单的外观是飘带状的，并且每一个菜单项有一个精美的小图标，鼠标滑过菜单项时，菜单项就会向上凸起，像是飘带飘动一样，形成非常酷的3D视觉效果。这款CSS3飘带状3D菜单非常适合作一些活动页面的菜单导航。

2、HTML5/CSS3 3D纸片折叠动画

今天我们再来分享一款非常华丽的HTML5/CSS3 3D动画特效，尽管它目前很少能在项目中应用，但从源码中我们可以学到很多HTML5 3D动画的制作知识。这是一款纸片折叠动画特效，利用HTML5和CSS3的相关特性，我们可以将一张张纸片折叠起来，形成很酷的3D动画效果。

3、HTML5 webkit 3D立方体图片旋转滑块应用

今天再来分享一款HTML5 3D立方体动画，这个只是一个3D效果模型，你可以用图片替换演示中的立方体4个面，这样就可以将这款HTML5立方体旋转动画改造成HTML5 3D焦点图了，由于是基于webkit的，所以有浏览器限制，Google Chrome最佳。

4、HTML5颜色渐变3D文字特效

之前我们已经分享过不少HTML5文字特效，效果都还不错，尤其是这款HTML5摆动的文字特效类似柳枝摆动，更是有非常酷的文字动画效果。今天我们要分享一款HTML5 3D文字特效，文字的颜色是渐变的，同时有文字阴影，更加凸显了3D立体的效果。

5、HTML5 3D图片阴影翻转动画

今天我们要分享一款很酷的HTML5 3D动画特效，这款3D特效可以为你的图片增加阴影的效果，而且可以让图片在鼠标滑过的时候出现3D翻转的动画效果。这和之前分享的HTML5 3D动画HTML5 3D正方体旋转动画有着类似的效果，大家也可以看看。

6、纯CSS3 3D按钮按钮酷似牛奶般剔透

CSS3按钮一般都可以设计的非常漂亮，利用投影、渐变等CSS3属性特效可以把按钮渲染的十分动感。今天分享的这款CSS3按钮外观非常特别，它看上去酷似晶莹剔透的牛奶，而且在点击按钮时出现3D效果的动画，按钮按下时，按钮会轻轻的弹动一下，非常逼真。

7、CSS3 3D发光切换按钮

刚刚我们发布过一款CSS3开关切换滑动按钮，应该说出了有点3D立体的效果外，其他都很普通。现在我们要来分享一款更酷的CSS3开关切换按钮，它不仅具有3D的效果，而且可以发光，当开关处于打开状态时，旁边的小灯就会亮起来，然后灯光投射到开关上，效果挺逼真的。

8、CSS3 3D弹性按钮

今天要分享的这款CSS3按钮和这款按钮差不错，也同样拥有3D的效果，按钮在按下时带有弹性质感。

微信搜索“IT之家”关注抢6s大礼！下载IT之家客户端（戳这里）也可参与评论抽楼层大奖！

图网专注于各种pc、手机、h5、小程序切图，经常会遇到一些问题，做个笔记供后来者参考。

列表的折叠效果用处很多，经常都会有遇到，特别是html5手机版，pc版的切图的时候，小程序切图也不例外，不过小程序的写法和html的略有不同，和vue的逻辑更为相似，下面附关键代码片段，亲测有用。

wxml文件

<view class="fold__panel">
<block wx:for="{{dataList}}" wx:key="LMF_ID" wx:for-item="dataInfo" wx:for-index="dataIndex">
<view class="fold__items" data-index="{{dataIndex}}" catchtap="listDataClick">
<!-- 标题 -->
<view class="fold__item--head">
<view class="fold__head--l">
<text class="fold__head--tag">一对一</text>
<text class="fold__head--title ellipsis">TOEFL 一对一规划</text>
</view>
<view class="fold__head--r {{showIndex==dataIndex?'on':''}}">
<i-icon type="arrow-down" size="24" color="#EBEBEB" />
</view>
</view>
<!-- 展开内容 -->
<view wx:if="{{showIndex==dataIndex}}" class="fold__item--content">
展开展开展开展开展开展开展开展开展开展开展开展开展开
</view>
</view>
</block>
</view>

js文件

页编程之折叠标签。

HTML<details>标签，同学们好，这里是免费少儿编程知识分享，每天一行代码谁都能学会！今天分享的知识是创建一个可以折叠的元素，也就是说可以通过点击来切换显示和隐藏，通常用于词语解释或者对某些内容进行注解。

折叠的好处是在最开始的时候可以不用去占用网页上的空间，不用的时候也可以像这样收起来，不影响其他内容的显示。用到了HTML5新增的details标签和summary标签。

先来看看今天实例的运行效果，网页上有一个大大的H1标签，这只是为了排版效果，下方才是重点。可以看到有简介，浏览器支持说明123，这些文字的前方无一例外的都有一个三角箭头，点击之后就可以展开和收起相应的内容。展开之后箭头会变成向下的状态，收起之后就会指向右方，随便点击看一看都是这样的没有问题。

效果各位同学都已经看到了，来看看实现的代码吧。首先要说明一下，details 和 summary 标签是必须要一起出现的，单独出现是没有任何效果的。summary 标签必须是在details标签内部，FPail向浏览器声明了将在此插入一个可以折叠的元素。

而 TRair标签告诉了浏览器，这个折叠元素的标题是什么，也就是刚才点击的内容部分是什么。在details标签中，但是没有在summary标签中的内容，就是可以被折叠的内容本身。每一个 details 标签和 fully 标签必须一一对应。

说人话就是一个details标签，里面只能出现一个 iTunes，samml，samml，samml，这个屁标签是可有可无的。如果说没有，它内容就会和标题贴在一起。

为了美观还是加上一个比较好

而有了这个标签之后也确实能减少很多重复的工作。

目前国内大多数浏览器都支持极速模式，即采用Stot内核，因此一般情况下它都能正常显示。具体情况还需视个人情况而定。

今天的分享就到这里，希望各位同学能够认真练习三遍，即使不看视频也能独立完成。所有案例和相关文档都可向我索取。下期再见，想学习编程，记得关注哦。