北京Web培訓
達內北京萬壽路中心

010-62126400

熱門課程

北京Web培訓 > web知識 >18個用CSS制作出來的東西,你可能會不信!

18個用CSS制作出來的東西,你可能會不信!

  • 時間:2020-03-12 14:33
  • 發布:北京Web培訓
  • 來源:web知識

與流行的看法相反,CSS不僅僅是用來提供一個WEB頁面的基本風格,以使它看起來更有吸引力。還有很多其他的事情,CSS也可以做的很好。由于它創建動畫和交互的能力,CSS集合HTML以及JavaScript給WEB開發者提供了嘗試不同方法的機會。

瀏覽器就像一個空的畫布,WEB開發者可以在這里盡情的發揮。下面是18個人們用CSS創建的又酷又有創造性的東西的例子,從原始字符到有趣的動畫,有很多激勵你自己將時間花費在CSS上。下面和北京web培訓機構一起來看看!

1、The Simpsons

Chris Pattle使用純CSS創建了Simpsons家族。他把每個角色的臉部拆分成很小的形狀,然后又拼接回去。他甚至給角色的眼睛添加了動畫來賦予它們生命力。

2、Minions With Pure CSS

如果你看過電影《Despicable Me(神偷奶爸)》,那你一定對其中的Minion(小黃人)印象深刻。Amr Zakaria用純CSS實現了其中的幾個Minion,它們會用閃爍的眼睛和友好的手勢給你打招呼。

3、Broken neon sign

這是用CSS的 text-shadow 實現破碎的霓虹燈效果的例子。把鼠標放到單詞上,注意字母“c”、“n”和“i”的變化。

4、Mmm… Cheese

這是一塊奶酪還是?Hugo Giraduel用CSS制作了這個3D的奶酪。我不知道你怎么認為,但是它看起來就像某種家居用品。

5、Single Element CSS character

Hugo Giraudel的另一個作品,這次,他只用一個元素實現了8位字符。

6、Viking Shield

這個一個由 LukyVj 創建的Viking盾牌。它做的太好了,以至于你很難看出它是用CSS而不是由圖形編輯器做出來的。

7、Fluid menu with transparent icon

這是一個獨特的透明顏色滑塊菜單,當鼠標滑過的時候會有一個菜單圖標。

8、CSS Creatures

CSS Creatures是由@bennettfeely制作的可以微笑、哭或者你想表達的其他表情。你可以選擇牙齒、胡須、顏色、眼睛以及嘴巴來創建你自己。

9、Long Cat

調整您的瀏覽器窗口,貓的身體會根據瀏覽器窗口的寬度來拉伸或壓縮。你覺得這個CSS-kitty拉伸或者壓縮的的程度是多大呢?

10、Rolling coke Can

這是另一個非常有趣的。當你向右滑動滾動條的時候,看起來就像是可樂罐在滾動一樣。一個純CSS實現的很棒的效果。

11、Calculator

這個計算器的設計簡單干凈,但是如果結合JavaScript,它會給你帶來更多的樂趣。

12、Grid Animation Effect

應用任何動畫效果是很困難的,更不用說是通過純CSS。但是這個網格動畫效果實現的很漂亮。

13、Smooth iOS 7 toogle

這個由Dan Eden制作的切換按鈕靈感來源于iOS 7。如果你嘗試一下,你會看到它和原來的iOS7切換按鈕是多么相似。

14、Animated checkmark button

Sascha Michael Trinkaus制作了這個由漸變顏色包圍的復選框按鈕。請特別注意當你點擊它的時候的效果。

15、Minion

這是另一個由CSS實現的可愛風格的Minion 。

16、Menu toogle SVG animation

看動畫的演示,您將看到菜單形狀的平穩過渡到另一個形狀。

17、Shape masking

CSSMuse用CSS實現圓、五角形、六角形。

18、Loaders Kit

這些是用純CSS實現的加載樣式。如果你想減小帶寬的使用,基于CSS的加載樣式將會非常的好用。

上一篇:北京web培訓:前端小白免踩坑指南!
下一篇:北京web培訓:有關前端的一些“坑”,別踩!

馬上預約七天免費體驗課

姓名:

電話:

北京web培訓班:有關前端的一些“坑”,別踩!

北京web培訓:30 歲轉行web前端做開發,晚嗎?

CSS的設計模式難?一篇文章即可掌握重點!

前端新手怎么才能做好性能優化?

選擇城市和中心
江西省

貴州省

廣西省

海南省

女人和女人做人爱视频