純html5+css能寫出什麼驚人的效果？

01-14

鄙人最近學習css，發現純html5+css可以實現這般效果：
一棵跳舞的樹
純HTML5+CSS3實現一棵自己跳舞的樹

想請大家曬一下自己搜集到的各種華麗效果，謝謝啦。
（是只靠純html5+css，沒有js代碼）

貼個自己做的：Cats

用純CSS實現圖片的即不變形拉伸，同時又佔滿容器寬度的布局。

幾乎所有的網站在實現這樣的布局時都是使用JS計算實現，我在最早看到這種布局時也是覺得CSS沒辦法實現這樣的布局，直到我看了《CSS Secrets》這本書，開始思考能否用純CSS實現這種布局，沒有想到最終真的只用CSS做出來了。如果想了解具體如何實現可以閱讀我博客的文章：使用純 CSS 實現 Google Photos 照片列表布局 · Issue #4 · xieranmaya/blog · GitHub

剛在簡書上看到一篇文章【用 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

填寫以下代碼：

& & &&&Baymax&& &

& & &

三、添加 CSS 樣式

我們已經使用 HTML 定義好「大白」的各個元素，現在就需要利用到 CSS 來繪製它的樣式外表。

由於「大白」是白色的，為了更容易辨識，我們把背景設為深色。

然後首先是頭部：

body { background: #595959; }


#baymax{

    /*設置為 居中*/

    margin: 0 auto;
    /*高度*/

    height: 600px;
    /*隱藏溢出*/

    overflow: hidden;

}
#head{

    height: 64px;

    width: 100px;
    /*以百分比定義圓角的形狀*/

    border-radius: 50%;
    /*背景*/

    background: #fff;

    margin: 0 auto;

    margin-bottom: -20px;
    /*設置下邊框的樣式*/

    border-bottom: 5px solid #e0e0e0;
    /*屬性設置元素的堆疊順序；    擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面*/

    z-index: 100;

/*生成相對定位的元素*/ position: relative; }

效果預覽：

趕緊再來添加眼睛和嘴吧！

#eye, #eye2{ width: 11px; height: 13px; background: #282828; border-radius: 50%; position: relative; top: 30px; left: 27px;


    /*旋轉該元素*/

    transform: rotate(8deg);

}
#eye2{

    /*使其旋轉對稱*/

    transform: rotate(-8deg);

    left: 69px;    top: 17px;

}

#mouth{ width: 38px; height: 1.5px; background: #282828; position: relative; left: 34px; top: 10px; }

一個 mini 的「大白」，雛形初現：

接下來是軀幹和腹部：

#torso, #belly{ margin: 0 auto; height: 200px; width: 180px; background: #fff; border-radius: 47%;


    /*設置邊框*/

    border: 5px solid #e0e0e0;

    border-top: none;

    z-index: 1;

}
#belly{

    height: 300px;

    width: 245px;

    margin-top: -140px;

    z-index: 5;

}

#cover{ width: 190px; background: #fff; height: 150px; margin: 0 auto; position: relative; top: -20px; border-radius: 50%; }

賦予「大白」象徵生命的心臟：

#heart{ width:25px; height:25px; border-radius:50%; position:relative;


  /*向邊框四周添加陰影效果*/

  box-shadow:2px 5px 2px #ccc inset;

right:-115px; top:40px; z-index:111; border:1px solid #ccc; }

現在的「大白」是這個樣子的了：

還沒有手和腳，怪萌怪萌的...「大白」需要溫暖的手臂：

#left-arm, #right-arm{ height: 270px; width: 120px; border-radius: 50%; background: #fff; margin: 0 auto; position: relative; top: -350px; left: -100px; transform: rotate(20deg); z-index: -1; }

#right-arm{ transform: rotate(-20deg); left: 100px; top: -620px; }

還沒有手指頭呢：

#l-bigfinger, #r-bigfinger{ height: 50px; width: 20px; border-radius: 50%; background: #fff; position: relative; top: 250px; left: 50px; transform: rotate(-50deg); }


#r-bigfinger{

    left: 50px;

    transform: rotate(50deg);

}
#l-smallfinger,

#r-smallfinger{

    height: 35px;

    width: 15px;

    border-radius: 50%;

    background: #fff;

    position: relative;

    top: 195px;

    left: 66px;

    transform: rotate(-40deg);

}

#r-smallfinger{ background: #fff; transform: rotate(40deg); top: 195px; left: 37px; }

有點意思了：

迫不及待要給「大白」加上腿了吧：

#left-leg, #right-leg{ height: 170px; width: 90px; border-radius: 40% 30% 10px 45%; background: #fff; position: relative; top: -640px; left: -45px; transform: rotate(-1deg); z-index: -2; margin: 0 auto; }

#right-leg{ background: #fff; border-radius:30% 40% 45% 10px; margin: 0 auto; top: -810px; left: 50px; transform: rotate(1deg); }

duang~ duang~ duang~ 特技完成！

只用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方面能做很多事

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

如果只讓你用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添加動畫，能做成什麼樣還要看你的想像力了。再加上合適的主題，就能做出一件成功的作品。

如果你真的閑，做一個每個單元格1px*1px的表格鋪滿屏幕，配合 animation 你可以做一部電影出來。

就像是那些拿 Excel Word 來作畫的人一樣，說實話我並沒有覺得那些人有多厲害。

上面很多回答雖然很炫，但是幾乎沒有任何使用價值。

把技術用來做它適合做的事才是智慧。

算是抖機靈的回答么？

不知道國內的能不能打開這個鏈接，反正我第一次看就被驚艷了

CodePen - Chill the lion

Tree.js 寫的，如果打不開請留言告訴我，我挪個地方再展示

--------------------

我才注意到題目里要求只用html5 css

同一個作者其他作品：

Sneeze the dragon

Paranoid vs shy birds

Mighty fish

Saturn

html5？包含了html5新的js介面么？

html和css3可以做一個走馬燈的vr效果，lije 淘寶購物節，我自己在家就實現了這個小demo

&> 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的機會~

這種沒有什麼技術含量，只要有耐心，純css畫一部電影都可以。

先把電影分解成圖片，使用程序逐個像素獲取圖片的顏色，然後生成css的boxshadow，每秒24個圖，純css電影出來了。

這個純css的小圖標,不僅實用,而且展示了高超的css技巧.

Demo: Pure CSS GUI icons (experimental)

icono | Pure CSS icons

純html5+css3能寫出什麼驚人效果? 在搞清楚這個問題之前,我們得先弄清楚H5和css3有哪些驚人的特性

首先我們來看下H5的新特性,canvas標籤,多媒體標籤(audio/video) 離線存儲, 新的表單元素, 新的表單控制項地理定位等等,要說道驚人效果,其中canvas audio video 還有地理定位等就可以夠玩一年但題目中的一個純字,一下子就將這一群一棒子打死… 因為要玩出驚人效果,就不得不用到js…那麼,剩下的可用的就剩語義化標籤,表單控制項,新元素等等了.就語義化標籤來說,本身存在的意義僅僅在於」語義化」而已,在視覺上,基本上和普通元素沒什麼區別,所以也就無從談起什麼驚人效果.那麼就剩下表單元素和新增的表單元素類型…

就對於我們開發者而言,就表單元素新增的各種特性,還真算得上有些有用的效果,比如,新增表單類型中的date.要知道,在以前的版本中,這種東西除了用插件,就只能自己手寫,不光是各種事件處理,dom操作,還得編寫複雜的日曆dom結構布局.各種考慮兼容,一不小心,就在哪個版本掛掉了,可是即便用上了插件,也還得去各種查詢api,更主要的是,這些都會增加你的項目體積以及程序複雜程度.然而,當date類型出來之後,我要做的僅僅是只需要將input的type屬性變成date即可就像這樣:

然後你就會得到這樣的結果:

這在表單開發的過程中可以大大提高開發效率,同時還能有效減小項目體積以及項目的穩定定.然而,好景不長.很快我們發現這個新增的功能很難由我們自己去定義樣式,並且每個瀏覽器上的顯示風格都不一樣,這意味著如果項目需求對頁面的還原度要求很高的話,這個功能瞬間變成雞肋,也就談不上什麼驚人了,充其量算是個效果….

也就是說就html部分,能帶給我們的驚人效果實在是有限,這就只能看css了

首先,css本身就是用於處理樣式的,而」驚人效果」無外乎就是視覺體驗,這剛好就是css的拿手好戲.css3中新增的特性非常豐富:2D/3D轉換,過渡,動畫,圓角,陰影,漸變等等等等

其中2D/3D轉換就能很輕易的寫出3D場景

transform : rotateY(45deg); 即可實現如上效果

想要更高級? 沒問題,咱們來個動效

搞定,咱們來看看效果,還是挺不錯的吧.

實際上我們甚至可以通過過渡,加上偽類選擇器,來通過純css來實現輪播圖效果

至於漸變,我們可以通過設置顏色的位置值來實現分界線效果,然後通過巧妙的重複漸變,能夠畫出如下圖案:

我其實是想畫C羅的。。。可是就是畫不像，代碼其實可以更少些的。。Cristiano Ronaldo

GitHub - crli/html-css3-drawing-CR7: C羅卡通圖

自己寫的，不知道符合題主的標準否。

純CSS，圖片自己不斷呼吸式的放大縮小，可以自己植入幻燈片里。只支持Webkit(chrome/safari)，其他瀏覽器支持可以自己加標籤。

DOMO和代碼都在這：

https://www.isjeff.com/2016/04/15/web-image-auto-zoom-out-artistic-effect/

https://github.com/isjeffcom/Auto-Zoom-Out

還有一個，純CSS的WebAPP Tabbar。顯示內容可以由PHP控制。

代碼：

https://github.com/isjeffcom/TabBar-For-WebAPP

會眨眼的辛普森一家：（代碼：The Simpsons in CSS）

會招手眨眼的小黃人，會歪嘴的小惡魔：（代碼：Minions in pure CSS）

我覺得canvas還是比較有意思的，我也是一個前端小白，這個是我學習寫的一個時鐘。。

css畫的海賊王

http://liujuping.github.io/cssDraw/

開始是看到一張動圖，非常喜歡，想實現。好幾次覺得實現不了，但是不願意放棄。特別是火焰的效果，第一次真的是一點一點移出來的啊，後面機智了一下下，用sass寫了個函數，用js輔助(用於產生sass數據)，可以在頁面直接點擊，生成一個個小火焰，並且輸出函數的參數格式的數據。

慢慢畫，終於完成了。

手動畫的可能不是很逼真，但是火焰的效果挺好的。

之後用js實現的，和原圖一樣，可以對比下。

http://liujuping.github.io/cssDrawTool/demo.html

和之前看到的蒙娜麗莎一樣，用像素點和box-shadow實現的。

現在對前端，我只覺得，只要想做，就肯定有辦法實現。沒有做不到，只有想不到。

感覺沒提 SVG 有點對不起 HTML5 這個稱號，SVG 是 HTML5 一個很重要的分支~

SVG 更多可以參考：SVG 動畫精髓

TL;DR

本文主要是講解關於 SVG 的一些高級動畫特效，比如 SVG 動畫標籤，圖形漸變，路徑動畫，線條動畫，SVG 裁剪等。例如：路徑動畫

圖形漸變：

線條動畫：

以及，相關的動畫的矩陣知識，這個也是現在 CSS 動畫裡面最重要，同時也是最為欠缺的知識點：

文章會先從基本語法入手，然後，慢慢深入。介紹一些動畫基本原理和對應的數學原理知識點。並且文章後面，還附有相關語法的介紹，當你在遇到不熟悉語法的時候可以參考參考。前面一篇文章，主要介紹了一些 SVG 的基本概念和基本圖形。接下來我們需要了解一下，SVG 處理矢量這個特性之外，還有啥內容吸引我們，能讓 SVG 現在普及度這麼高？完整版可以關於我的公眾號：前端小吉米。