鄙人最近学习css，发现纯html5+css可以实现这般效果：
回复内容：
贴个自己做的：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一更官方网址：
>>>>>>>>>>>>>>>>>>>>>>2016.3.5三更限制你的可选项，会让你重新评估手头上已有的工具。 基于单个 Div 的 CSS 绘图 - 前端外刊评论 - 知乎专栏： 注：本文转载自实验楼课程【打造网页版「大白」】
还记得《超能陆战队》里的 “暖男” -「大白」 么？是不是很想拥有一个？我们就利用 HTML 和 CSS 来打造一个自己的「大白」吧！
最终的成果是这样滴，是不是萌萌哒……
PS：您最好对 HTML 和 CSS 有一定的了解，但如果你是小白也没关系，小白见「大白」也是可以的！
再PS：这个「大白」的教程步骤是基于实验楼环境制作的，你也可以上实验楼在线查看该课程
一、准备工作 进入到 /home/shiyanlou/ 目录下，新建空白文档：
命名为 Baymax.html （其它名字也可以，但后缀名必须是 .html）：
使用 gedit 打开，准备编辑代码：
二、编写 HTML 填写以下代码：
<code class="language-text">
<meta charset="utf-8">
<title>Baymax</title>
<div id="baymax">
<!-- 定义头部，包括两个眼睛、嘴 -->
<div id="head">
<div id="eye"></div>
<div id="eye2"></div>
<div id="mouth"></div>
</div>
<!-- 定义躯干，包括心脏 -->
<div id="torso">
<div id="heart"></div>
</div>
<!-- 定义肚子腹部，包括 cover（和躯干的连接处） -->
<div id="belly">
<div id="cover"></div>
</div>
<!-- 定义左臂，包括一大一小两个手指 -->
<div id="left-arm">
<div id="l-bigfinger"></div>
<div id="l-smallfinger"></div>
</div>
<!-- 定义右臂，同样包括一大一小两个手指 -->
<div id="right-arm">
<div id="r-bigfinger"></div>
<div id="r-smallfinger"></div>
</div>
<!-- 定义左腿 -->
<div id="left-leg"></div>
<!-- 定义右腿 -->
<div id="right-leg"></div>
</div>
</code> 登入後複製
> css文字遮罩效果 CSS3 Masking Text
> 用css画出各种图形：
https:// css-tricks.com/examples /ShapesOfCSS/ > 使用CSS3画出一个叮当猫
> 来自腾讯前端团队AlloyTeam，用css3画一个腾讯QQ的logo：CSS3 腾讯 Tencent QQ Logo
> 自行车：A bike
> 队长的盾： (CSS) Captain America's Shield
> 一个按钮 metal knob
> 行走的人： Andrew Hoyer
> 时钟： CSS时钟
> 各种鼠标： Apple Mice
^ 虽然题目要求之使用html5+css3，但还是要贴出下面这些链接
> 每个标签中均有作者制作的一个HTML5特效页面。堪称HTML5的宣传网站。 Form Follows Function
(js)
> 3d的地球 LAB! - CSS 3D Earth
(js)
以上效果我总会用ie打开看看，不是想说代码兼容不行，只是不想放过任何一个骂ie的机会~
不知道国内的能不能打开这个链接，反正我第一次看就被惊艳了
CodePen - Chill the lion
Tree.js 写的，如果打不开请留言告诉我，我挪个地方再展示
--------------------
我才注意到题目里要求只用html5 css
同一个作者其他作品：
Sneeze the dragon
Paranoid vs shy birds
Mighty fish
Saturn
画蒙娜丽莎之类的太无聊,没有技术含量,就如前面所说,只要有耐心,画一部电影都可以.
这个纯css的小图标,很实用,而且展示了高超的css技巧.
Demo: Pure CSS GUI icons (experimental)
icono | Pure CSS icons
会眨眼的辛普森一家：（代码：The Simpsons in CSS
）
会招手眨眼的小黄人，会歪嘴的小恶魔：（代码：Minions in pure CSS
）
纯div+css3代码绘制hellokitty猫
之前有人用div+css代码写了蓝胖子（机器猫）,本人更喜欢hello kitty于是动手也写了一个。现在主流浏览器对css3支持良好，您可以通过Chrome,Firfox,Safari,IE9+等浏览器完美预览。
在线demo地址：纯div+css3代码绘制HelloKitty kt猫
作者：lovebslq
其他主题推荐：
div+css纯代码绘制小女孩：纯div+css3代码绘制可爱小女孩 lovelygirl_全分享网_WEB前沿技术交流分享
