css 3 動態視覺範例二組：
- 說明： css level 3 (css 3) 引領視覺設計進入了動畫層次，讓我們可以很容易製作出以往必須倚靠動畫程式才能完成的效果。特別僅運用 CSS 技術，設計出一連串令人意想不到的動態效果，期望能激發更多的設計想像空間。
- 適合：想模仿範例自行製作者，須熟悉 html 及 css 語法。
- 難度：
- 更新：
- 支援：依據個別範例内標註。
- 參考資源
-
- css animations - w3c 官方文件 (英文) 。
- css transitions - w3c 官方文件 (英文) 。
- css Image Values - w3c 官方文件 (英文) 。
散佈、展示請參閱 Creative Commons 授權條文，禁止重混，引述請增加原文連結。
文章標籤
全站熱搜
CSS selectors語法(CSS教學) (2)
滑入圖片有暗角的效果很棒，想要試著做看看，但遇到了問題， 請問在多背景的狀況下要怎麼設定transition-duration呢? 我現在滑過去就直接出現暗角了，不會也漸變的效果.. 還是我搞錯方向了呢? 謝謝你
你是指第一組範例裏的第一套互動變換效果嘛？ 範例的方式不是使用多背景，而且 css 動畫變換也只能支援可計算的值。 範例是利用 css ::after 擬元素指定 gradient 背景，變成加一層半透明黑蓋在圖片上，形成假的暗角效果，然後再讓這個擬元素 opacity transition 為 0 ，照片就完整出現了。當然，反之亦然。 雖然範例裏已經有說，還是再強調下，只有一張原始照片，沒有用到二張圖片，沒有用繪圖軟體處理，試試嘍
試成功了，太感謝你了! 可以再請問一下如果是漸層背景 有可能做到漸變嗎? 例如，藍色漸層慢慢變成黃色漸層這樣. 網站很棒，謝謝你分享:D
有 W3C 有列表 支援動畫的 css 值 http://www.w3.org/TR/css3-transitions/#animatable-types 支援動畫的 css 屬性 http://www.w3.org/TR/css3-transitions/#animatable-css (不過，還是要看瀏覽器的支援狀況)
請問這個語法要怎麼使用?? 如果說我在Dreamweaver裡想要把一個圖片弄成上述的動態要怎麼使用??
您需要自己打 CSS 就可以了。 Dreamweaver 版本更新很快，我早懶得花時間去搞清它到底有沒有可用的功能，直接打 CSS 快多了！ XD
不好意思 還是不太懂耶... 要打在哪裡?? 那請問CSS語法在哪?? 我只看得到效果
呃…？ -.- 請利用瀏覽器，在該元素上「檢查 (檢測)元素」 (or F12) 就可以看到 code 了。
回給 風焰瘖 : 寫在這裡 <head><style>CSS語法</style></head> ， 其他的可以自己找找基礎教學。