本文主要包含css,html等相关知识,匿名希望在学习及工作中可以帮助到您
鄙人最近学习css，发现纯html5+css可以实现这般效果：
一棵跳舞的树
纯HTML5+CSS3实现一棵自己跳舞的树
想请大家晒一下自己搜集到的各种华丽效果，谢谢啦。
（是只靠纯html5+css，没有js代码）
用纯CSS实现图片的即不变形拉伸，同时又占满容器宽度的布局。
几乎所有的网站在实现这样的布局时都是使用JS计算实现，我在最早看到这种布局时也是觉得CSS没办法实现这样的布局，直到我看了《CSS Secrets》这本书，开始思考能否用纯CSS实现这种布局，没有想到最终真的只用CSS做出来了。如果想了解具体如何实现可以阅读我博客的文章：使用纯 CSS 实现 Google Photos 照片列表布局 · Issue #4 · xieranmaya/blog · GitHub 如果你真的闲，做一个每个单元格1px*1px的表格铺满屏幕，配合 animation 你可以做一部电影出来。
就像是那些拿 Excel Word 来作画的人一样，说实话我并没有觉得那些人有多厉害。
上面很多回答虽然很炫，但是几乎没有任何使用价值。
把技术用来做它适合做的事才是智慧。
算是抖机灵的回答么？ 只用css能玩出什么花样？ - 逝者如斯的回答
>>>>>>>>>>>>>>>>>>>>>>2016.2.11一更<<<<<<<<<<<<<<<<<<<<<<<<<<<
可以看看这个回答，30种濒危动物那个就做的挺好的
先不说3d效果，就论一个平面上的话，
只用一行div，无js，就可以画一幅世界名画蒙娜丽莎，CSS博大精深→ _→
Mona Lisa with pure CSS
虽然作者不是手写的，但至少另一个角度说明css可以做到这样的效果，画画不只有canvas，svg等。。。
下面有小伙伴提到了刚出来时很火的“纯CSS技术画出30个濒危动物图片”，这里一并列出并给出网址，
“30个物种，30中碎片拼图。”点开这场展览的网站主页，空灵的背景音乐引入了颜色饱满的多边形图案，配合着30种濒危动物的文字介绍。而之所以叫“30片三角”，是因为James起初在摆弄编程的时候，第一幅成型的作品“夏威夷乌鸦”，刚刚好是30片三角形拼接而成。
但这次展览拼的不是技术或着艺术。伴随30只生命样貌的切换，一幅幅几何状组合的破碎，设计师试图展现过去10年来栖息地遭受破坏是如何把动物推向灭绝的边缘——曾是 2014 年巴西世界杯吉祥物的三带犰狳（ Three-Banded Armadillo of Brazil）数量减少了 30%，新几内亚岛上的原针鼹鼠（ Long-Beaked Echidna ）因人类的狩猎而在过去 35-40 年间减少近 80%。
官方网址：
30个CSS碎片拼图，30种濒临灭绝动物(官网需要fanqiang查看)
无论是背景音的选用，还是动物样貌之间的切换，抑或是细节处的动效展现，再加上主题的升华，有技术有内涵，这是一部成功的作品。
可以闲来无事画画小动物：
打打灰机：
Airplane (Pure CSS)
CSS Faces
这些都是静止的，想想再加上各种动画，也可以做出很多效果出来的。
CSS3D苹果笔记本动画：
这又是一款超酷的CSS3 3D动画效果，它是一款带有3D视觉效果，并且可以360度旋转的macbook air。这款CSS3 3D动画的笔记本底部有一个逼真的投影，可以跟随图片一起转动，从而凸显其3D效果，是一款很不错的CSS3 3D动画特效
CSS3 3D 苹果笔记本动画DEMO演示
还有
CSS3扇形动画菜单DEMO演示
HTML5超级玛丽体验:
HTML53????êà?
>>>>>>>>>>>>>>>>>>>>>>2016.3.5三更<<<<<<<<<<<<<<<<<<<<<<<<<<<
我们知道js在web方面能做很多事
有一句
一棵跳舞的树
纯HTML5+CSS3实现一棵自己跳舞的树
想请大家晒一下自己搜集到的各种华丽效果，谢谢啦。
（是只靠纯html5+css，没有js代码）
回复内容：
贴个自己做的：Cats
用纯CSS实现图片的即不变形拉伸，同时又占满容器宽度的布局。
几乎所有的网站在实现这样的布局时都是使用JS计算实现，我在最早看到这种布局时也是觉得CSS没办法实现这样的布局，直到我看了《CSS Secrets》这本书，开始思考能否用纯CSS实现这种布局，没有想到最终真的只用CSS做出来了。如果想了解具体如何实现可以阅读我博客的文章：使用纯 CSS 实现 Google Photos 照片列表布局 · Issue #4 · xieranmaya/blog · GitHub 如果你真的闲，做一个每个单元格1px*1px的表格铺满屏幕，配合 animation 你可以做一部电影出来。
就像是那些拿 Excel Word 来作画的人一样，说实话我并没有觉得那些人有多厉害。
上面很多回答虽然很炫，但是几乎没有任何使用价值。
把技术用来做它适合做的事才是智慧。
算是抖机灵的回答么？ 只用css能玩出什么花样？ - 逝者如斯的回答
>>>>>>>>>>>>>>>>>>>>>>2016.2.11一更<<<<<<<<<<<<<<<<<<<<<<<<<<<
可以看看这个回答，30种濒危动物那个就做的挺好的
先不说3d效果，就论一个平面上的话，
只用一行div，无js，就可以画一幅世界名画蒙娜丽莎，CSS博大精深→ _→
Mona Lisa with pure CSS
虽然作者不是手写的，但至少另一个角度说明css可以做到这样的效果，画画不只有canvas，svg等。。。
下面有小伙伴提到了刚出来时很火的“纯CSS技术画出30个濒危动物图片”，这里一并列出并给出网址，
“30个物种，30中碎片拼图。”点开这场展览的网站主页，空灵的背景音乐引入了颜色饱满的多边形图案，配合着30种濒危动物的文字介绍。而之所以叫“30片三角”，是因为James起初在摆弄编程的时候，第一幅成型的作品“夏威夷乌鸦”，刚刚好是30片三角形拼接而成。
但这次展览拼的不是技术或着艺术。伴随30只生命样貌的切换，一幅幅几何状组合的破碎，设计师试图展现过去10年来栖息地遭受破坏是如何把动物推向灭绝的边缘——曾是 2014 年巴西世界杯吉祥物的三带犰狳（ Three-Banded Armadillo of Brazil）数量减少了 30%，新几内亚岛上的原针鼹鼠（ Long-Beaked Echidna ）因人类的狩猎而在过去 35-40 年间减少近 80%。
官方网址：
30个CSS碎片拼图，30种濒临灭绝动物(官网需要fanqiang查看)
无论是背景音的选用，还是动物样貌之间的切换，抑或是细节处的动效展现，再加上主题的升华，有技术有内涵，这是一部成功的作品。
可以闲来无事画画小动物：
打打灰机：
Airplane (Pure CSS)
CSS Faces
这些都是静止的，想想再加上各种动画，也可以做出很多效果出来的。
CSS3D苹果笔记本动画：
这又是一款超酷的CSS3 3D动画效果，它是一款带有3D视觉效果，并且可以360度旋转的macbook air。这款CSS3 3D动画的笔记本底部有一个逼真的投影，可以跟随图片一起转动，从而凸显其3D效果，是一款很不错的CSS3 3D动画特效
CSS3 3D 苹果笔记本动画DEMO演示
还有CSS3扇形动画菜单DEMO演示
HTML5超级玛丽体验:
HTML53????êà?
>>>>>>>>>>>>>>>>>>>>>>2016.3.5三更<<<<<<<<<<<<<<<<<<<<<<<<<<<
我们知道js在web方面能做很多事
有一句