看不到效果?
如果您看不到正確的呈現?(強烈建議以下)
  1. 請安裝新式瀏覽器並更新至最新版本。
  2. 如果您是使用新版 ie 仍舊看不到應有的呈現:
    • [功能表列] > [工具] > [相容性檢視設定],取消勾選 [ … Microsoft …更新 … 清單] 。這將會影響您瀏覽其它不當編排的網站,如果您不想這樣,只是想這次暫時看到,請使用下一項方式。
    • [功能表列] > [工具] > [F12 開發者工具] (或直接按 F12) ,在開啟的下方視窗 [瀏覽器模式或使用者代理程式] 選 [Internet Explorer 新版編號或預設值] , [文件模式] 選 [Internet Explorer 標準或預設值] ;再按 F12 就可以關掉下方視窗。這個方式可能每次進站都需要再麻煩指定一次。
    • 如果您使用的是 Windows XPInternet Explorer ,很抱歉本站大部分的内容不適合您。

css 3 動態視覺範例二組:

  • 說明: css level 3 (css 3) 引領視覺設計進入了動畫層次,讓我們可以很容易製作出以往必須倚靠動畫程式才能完成的效果。特別僅運用 CSS 技術,設計出一連串令人意想不到的動態效果,期望能激發更多的設計想像空間。
  • 適合:想模仿範例自行製作者,須熟悉 htmlcss 語法。
  • 難度:等級1
  • 更新:
  • 支援:依據個別範例内標註。

(一) CSS 動畫設計特效發想

CSS 動態視覺狂想曲 (範例來源連結)

(二) css 動態視覺發想

css 玩視覺特效 (範例來源連結)

參考資源
散佈、展示請參閱 Creative Commons 授權條文,禁止重混,引述請增加原文連結。
文章標籤
創作者介紹

網頁藝術思考 - CSS 網頁設計藝術, 友善的無障礙網頁

不惑仔 發表在 痞客邦 PIXNET 留言(5) 人氣()


留言列表 (5)

發表留言
  • HS
  • 滑入圖片有暗角的效果很棒,想要試著做看看,但遇到了問題,
    請問在多背景的狀況下要怎麼設定transition-duration呢?
    我現在滑過去就直接出現暗角了,不會也漸變的效果..
    還是我搞錯方向了呢?

    謝謝你
  • 你是指第一組範例裏的第一套互動變換效果嘛?
    範例的方式不是使用多背景,而且 css 動畫變換也只能支援可計算的值。
    範例是利用 css ::after 擬元素指定 gradient 背景,變成加一層半透明黑蓋在圖片上,形成假的暗角效果,然後再讓這個擬元素 opacity transition 為 0 ,照片就完整出現了。當然,反之亦然。
    雖然範例裏已經有說,還是再強調下,只有一張原始照片,沒有用到二張圖片,沒有用繪圖軟體處理,試試嘍

    不惑仔 於 2013/06/28 11:36 回覆

  • 風焰瘖
  • 請問這個語法要怎麼使用??
    如果說我在Dreamweaver裡想要把一個圖片弄成上述的動態要怎麼使用??
  • 您需要自己打 CSS 就可以了。
    Dreamweaver 版本更新很快,我早懶得花時間去搞清它到底有沒有可用的功能,直接打 CSS 快多了! XD

    不惑仔 於 2016/02/24 21:24 回覆

  • 風焰瘖
  • 不好意思 還是不太懂耶...

    要打在哪裡?? 那請問CSS語法在哪??
    我只看得到效果
  • 呃…? -.- 請利用瀏覽器,在該元素上「檢查 (檢測)元素」 (or F12) 就可以看到 code 了。

    不惑仔 於 2016/02/26 09:57 回覆

  • 劍木拓也
  • 回給 風焰瘖 :
    寫在這裡 <head><style>CSS語法</style></head> ,
    其他的可以自己找找基礎教學。
找更多相關文章與討論