只用 CSS 能玩出什麼花樣？

單純用 CSS + HTML 可以做出多少有趣酷炫的效果來？在未來這項技術還會被不斷發展完善嗎？

---

&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>2016.2.11一更&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<

先不說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演示

&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>2016.3.5二更&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<

我們知道js在web方面能做很多事

有一句話說：限制你的可選項，會讓你重新評估手頭上已有的工具。

如果只讓你用css，能完成某項任務嗎？而這個任務中，只用一個div，全靠css屬性來實現效果，可以嗎？

可以看看翻譯的一篇

基於單個 Div 的 CSS 繪圖 - 前端外刊評論 - 知乎專欄：

「為了得到更大的挑戰，探索 CSS 的潛力，我給自己定了這個限制，只是用一個 Div。不能直接買一隻綠色的筆（添加更多的 Div），我要做的就是盡其所能地結合 CSS 屬性來實現我的目的。」

以下這些都是基於一個div所做的：

A Single Div

&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>&>2016.7.12四更&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<&<

做一個動態的旋轉木馬給妹紙，立馬少女心泛濫有木有(星星眼)：

Horse ride carousel flat design by Lina for Zajno (3D animated with CSS3)

css可以用來做圖像，做完圖像還可以用css添加動畫，能做成什麼樣還要看你的想像力了。再加上合適的主題，就能做出一件成功的作品。

還有動態的車子：

Bike Season

上面兩個例子來自can you code this ui

https://stories.uplabs.com/can-you-code-this-ui-4530315290a1#.65da2m9rscss可以用來做圖像，做完圖像還可以用css添加動畫，能做成什麼樣還要看你的想像力了。再加上合適的主題，就能做出一件成功的作品。

---

貼兩個不算炫酷，只是 HTML 和 CSS 基礎知識做的小東西。題目就是，其實只用CSS就可以實現這些：

- css trick for tabs without javascript demo

- css trick for foldable menu without javascript demo

---

可以用預編譯語言sass寫css，封裝sass api，設計sass框架 sdk，挺好玩的

---

我整理了一個列表,包括大家提到的很多效果以及我知道的一些純CSS庫,歡迎大家補充

GitHub - Zhangjd/awesome-pure-css-no-javascript: A curated list of awesome pure CSS resources.

---

這是阿姆斯特丹設計師 Bryan James 用htnl5和css3實現的 瀕危動物展覽。(為了呼籲大家保護動物，用了半年時間)

所有動物都是用純css實現，效果很震撼！

---

-

https://codepen.io/ziga-miklic/pen/Fagmh

一個純CSS的Tic-Tac-Toe遊戲

---

確實會發展的，但就依次作為個人就業的籌碼 就顯得單薄了不少，所謂三個點才能成面，你至少也要熟悉JS啊。

---

發揮想像， 試著去做， 會有意想不到的收穫哦

---

html+css3組合是圖靈完備了 理論c／c++ java javascript python能幹什麼它就能幹什麼 不過有時會啰嗦 但確實嘛都能幹

---

推薦閱讀：