纯html5+css能写出什么惊人的效果？
鄙人最近学习css，发现纯html5+css可以实现这般效果：
一棵跳舞的树
纯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超级玛丽体验:
HTML5³¬¼¶ÂêÀö
>>>>>>>>>>>>>>>>>>>>>>2016.3.5三更
我们知道js在web方面能做很多事
有一句话说：限制你的可选项，会让你重新评估手头上已有的工具。
如果只让你用css，能完成某项任务吗？而这个任务中，只用一个div，全靠css属性来实现效果，可以吗？
可以看看翻译的一篇
基于单个 Div 的 CSS 绘图 - 前端外刊评论 - 知乎专栏：
“为了得到更大的挑战，探索 CSS 的潜力，我给自己定了这个限制，只是用一个 Div。不能直接买一只绿色的笔（添加更多的 Div），我要做的就是尽其所能地结合 CSS 属性来实现我的目的。”
以下这些都是基于一个div所做的：
A Single Div
css可以用来做图像，做完图像还可以用css添加动画，能做成什么样还要看你的想象力了。再加上合适的主题，就能做出一件成功的作品。 刚在简书上看到一篇文章【用 HTML 和 CSS 来打造一个自己的「大白(●—●)」】，然后去实验楼看了原来的课程内容，很赞啊：
Web - 打造网页版「大白」
而且实验楼上也有很多比较好玩的前端项目：
Web - JavaScript实现玫瑰花
Web - SCSS（SASS）画小黄人
Web - 一起来抽奖吧
Web - 网页版扫雷
Web - Ajax歌词同步播放器
……
……
我把内容也转载过来了，给作者说过，可以看看：
文／小柑（简书作者）
原文链接：用 HTML 和 CSS 来打造一个自己的「大白(●
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。
注：本文转载自实验楼课程【打造网页版「大白」】，转载请注明出处~
还记得《超能陆战队》里的 “暖男” -「大白」 么？是不是很想拥有一个？我们就利用 HTML 和 CSS 来打造一个自己的「大白」吧！
最终的成果是这样滴，是不是萌萌哒……
PS：您最好对 HTML 和 CSS 有一定的了解，但如果你是小白也没关系，小白见「大白」也是可以的！
再PS：这个「大白」的教程步骤是基于实验楼环境制作的，你也可以上实验楼在线查看该课程~
一、准备工作
进入到 /home/shiyanlou/ 目录下，新建空白文档：
命名为 Baymax.html （其它名字也可以，但后缀名必须是 .html）：
使用 gedit 打开，准备编辑代码：
二、编写 HTML
填写以下代码：
<!doctype html>
<html>
<head><meta charset="utf-8"><title>Baymax</title></head>
<body>
<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>
</body>
<html>
> 用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前沿技术交流分享
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7742
15
1643
14
1397
52
1291
25
1233
29
Vue에서 부트 스트랩을 사용하는 방법
Apr 07, 2025 pm 11:33 PM
vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.
HTML, CSS 및 JavaScript의 역할 : 핵심 책임
Apr 08, 2025 pm 07:05 PM
HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.
HTML에서 React의 역할 : 사용자 경험 향상
Apr 09, 2025 am 12:11 AM
React는 JSX와 HTML을 결합하여 사용자 경험을 향상시킵니다. 1) JSX는 개발을보다 직관적으로 만들기 위해 HTML을 포함시킨다. 2) 가상 DOM 메커니즘은 성능을 최적화하고 DOM 운영을 줄입니다. 3) 유지 보수성을 향상시키기위한 구성 요소 기반 관리 UI. 4) 상태 관리 및 이벤트 처리는 상호 작용을 향상시킵니다.
HTML, CSS 및 JavaScript 이해 : 초보자 안내서
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.
부트 스트랩에 분할 라인을 작성하는 방법
Apr 07, 2025 pm 03:12 PM
부트 스트랩 분할 라인을 만드는 두 가지 방법이 있습니다 : 태그를 사용하여 수평 분할 라인이 생성됩니다. CSS 테두리 속성을 사용하여 사용자 정의 스타일 분할 라인을 만듭니다.
부트 스트랩을위한 프레임 워크를 설정하는 방법
Apr 07, 2025 pm 03:27 PM
부트 스트랩 프레임 워크를 설정하려면 다음 단계를 따라야합니다. 1. CDN을 통해 부트 스트랩 파일 참조; 2. 자신의 서버에서 파일을 다운로드하여 호스팅하십시오. 3. HTML에 부트 스트랩 파일을 포함; 4. 필요에 따라 Sass/Less를 컴파일하십시오. 5. 사용자 정의 파일을 가져옵니다 (선택 사항). 설정이 완료되면 Bootstrap의 그리드 시스템, 구성 요소 및 스타일을 사용하여 반응 형 웹 사이트 및 응용 프로그램을 만들 수 있습니다.
부트 스트랩에 사진을 삽입하는 방법
Apr 07, 2025 pm 03:30 PM
Bootstrap에 이미지를 삽입하는 방법에는 여러 가지가 있습니다. HTML IMG 태그를 사용하여 이미지를 직접 삽입하십시오. 부트 스트랩 이미지 구성 요소를 사용하면 반응 형 이미지와 더 많은 스타일을 제공 할 수 있습니다. 이미지 크기를 설정하고 IMG-Fluid 클래스를 사용하여 이미지를 적응할 수 있도록하십시오. IMG 통과 클래스를 사용하여 테두리를 설정하십시오. 둥근 모서리를 설정하고 IMG 라운드 클래스를 사용하십시오. 그림자를 설정하고 그림자 클래스를 사용하십시오. CSS 스타일을 사용하여 이미지를 조정하고 배치하십시오. 배경 이미지를 사용하여 배경 이미지 CSS 속성을 사용하십시오.
부트 스트랩 버튼을 사용하는 방법
Apr 07, 2025 pm 03:09 PM
부트 스트랩 버튼을 사용하는 방법? 부트 스트랩 CSS를 소개하여 버튼 요소를 만들고 부트 스트랩 버튼 클래스를 추가하여 버튼 텍스트를 추가하십시오.
