<tt id="q85uj"><address id="q85uj"></address></tt>

  1. <tt id="q85uj"><span id="q85uj"></span></tt>
    <i id="q85uj"><address id="q85uj"></address></i>

    <u id="q85uj"></u>

  2. <b id="q85uj"><address id="q85uj"></address></b>
    <ruby id="q85uj"></ruby><acronym id="q85uj"></acronym>
      <tt id="q85uj"><address id="q85uj"></address></tt>
      Menu

      CSS,JS&SVG標志設計的10個不可思議的例子

      <返回列表

      最近有一個領域在嘗試使用CSS來全面設計或增強藝術品。例如,設計師們曾試圖重現流行音樂字符結果令人印象深刻

      類似地,我們也看到一些用CSS創建的非常有趣的徽標,以及大量的JS和SVG。它們一起提供了其他格式所沒有的靈活性。

      讓我們看看10個用CSS、JavaScript和SVG組合構建的logo示例。有的是原創,有的來自知名品牌:都值得欣賞。

      動畫煙花

      這個動畫.jslogo動畫使用CSS和(當然)JS的組合來創建一個彩色的動態的logo。不僅有一個很酷的介紹動畫,而且隨后的點擊標志釋放更多的煙花。有點上癮。

      輕松縮放

      使用CSS作為logo的一個有趣的優點是能夠縮放以匹配任何大小,這很像SVG文件。下面的Shop Talk的示例logo展示了CSS的像素完美縮放,旁邊是一個PNG,它跟不上。

      手寫的

      這個例子已經有一段時間了,但它仍然很漂亮。標志的腳本文本顯示出來,就像是在屏幕上手寫的一樣。這很簡單但很有效。

      打開和關閉

      雖然這個白色的標志在五顏六色的背景下看起來非常漂亮,但真正的寶石是內置的播放/反轉功能。點擊“play”將使logo通過一個流暢的動畫出現,而reverse(你猜到了)會將整個過程反向。這在某些情況下非常有用,例如,您想要表示一個元素的結束。

      純鉻

      這是Chrome徽標的忠實呈現,使用純CSS和單個HTML元素完成。它真實地展示了CSS在創建無縫外觀和復雜形狀方面所能完成的工作。旋轉懸停效果也很不錯。

      在聚光燈下

      將鼠標懸停在這支筆中的任一個徽標上,將在光標的直接區域產生“聚光燈”效果。它增加了一個酷的元素,并鼓勵互動。

      獨特的繪畫效果

      這個例子在兩個層次上都很出色。首先,從某種技術繪圖到成品的動畫是有趣的。其次,巧妙的動畫漸變背景為整個場景添加了完美的補充。

      很小,但很有趣

      好吧,最小的和有趣的通常不會一起被提及。但在這種情況下-它適合。這個簡單的logo在背景中有一道彩虹般的動畫積木,為原本很平淡的東西增添了個性。

      巧妙地講故事

      動畫是logo的一大時尚,但有時它可能有點太多。這個例子之所以如此偉大,是因為開篇的動畫是對品牌的一種贊美而不過分。

      logo可以做得更多

      多年來,我們一直把logo當作一種靜態資源。但是,當你結合CSS、JavaScript和SVG的強大功能時,一個logo就可以成為一個我們可以添加一些真正的交互性的地方。而與標志的互動,本質上就是與品牌的互動。因此,這不僅是一種為你的網站添加另一個酷功能的做法,也是一種提高品牌知名度的練習。


      最新網站設計資訊
      企業網站建設

      企業網站建設優化一條龍,多年品牌網站設計,營銷網站開發,手機網站制作,響應式網站設計

      聯系我們

      電話:18868949445QQ:1611387063 郵箱:[email protected]

      聯系云軒總監微信

      微信
      夫妻性生生活视频 - 视频 - 在线观看 - 电影影院 - 品赏网