css 玩視覺特效

本頁最佳體驗,建議使用 firefox 系列瀏覽器。

動畫及變形效果

以下效果純粹由 CSS 製作,無附加任何圖片檔或 javascript 之類動態程式。更新日期:

使用技術: css3 transition, css3 gradient, css3 transform, css3 box-shadow, css3 text-shadow

(鼠標可移入測試)

頭條新聞
定風波 蘇東坡

莫聽穿林打葉聲,

何妨吟嘯且徐行。

竹杖芒鞋輕勝馬,誰怕?

一簑煙雨任平生。

料峭春風吹酒醒,微冷,

山頭斜照卻相迎。

回首向來蕭瑟處,歸去,

也無風雨也無晴。

動態上色及表格設計

以下效果純粹由 CSS 製作,無附加任何圖片檔或 javascript 之類動態程式。更新日期:

使用技術: css3 transition, css3 Tree-Structural pseudo-class, css3 box-shadow

(鼠標可移入測試)

氣溫觀測 單位:攝氏度
地名 一月 二月 三月 四月 五月 六月 七月 八月 九月 十月 十一月 十二月 平均 統計期間
淡水 15.2 15.6 17.4 21.1 24.5 26.9 28.8 28.6 26.7 23.7 20.6 16.9 22.2 1981-2010
鞍部 10.1 10.9 13.0 16.4 19.4 21.8 23.2 22.9 21.0 17.9 14.9 11.4 16.9 1981-2010
臺北 16.1 16.5 18.5 21.9 25.2 27.7 29.6 29.2 27.4 24.5 21.5 17.9 23 1981-2010
竹子湖 11.8 12.5 14.7 18.0 21.0 23.3 24.8 24.6 22.7 19.8 16.8 13.3 18.6 1981-2010
基隆 16.0 16.2 17.9 21.3 24.5 27.3 29.3 28.9 27.0 24.1 21.2 17.7 22.6 1981-2010
彭佳嶼 15.7 15.9 17.5 20.4 23.4 26.0 28.0 27.9 26.3 23.7 20.7 17.4 21.9 1981-2010
花蓮 18.0 18.4 20.2 22.7 25.1 27.1 28.5 28.2 26.8 24.8 22.2 19.3 23.4 1981-2010
蘇澳 16.4 16.9 18.8 21.6 24.4 26.9 28.6 28.2 26.6 23.8 20.9 17.7 22.6 1982-2010
宜蘭 16.3 16.9 18.9 21.7 24.4 26.8 28.6 28.3 26.5 23.6 20.6 17.5 22.5 1981-2010
東吉島 17.8 18.2 20.3 23.3 25.7 27.4 28.4 28.2 27.3 25.3 22.7 19.6 23.7 1981-2010
澎湖 16.9 17.1 19.5 23.0 25.7 27.6 28.7 28.6 27.8 25.4 22.4 18.9 23.5 1981-2010
臺南 17.6 18.6 21.2 24.5 27.2 28.5 29.2 28.8 28.1 26.1 22.8 19.1 24.3 1981-2010
高雄 19.3 20.3 22.6 25.4 27.5 28.5 29.2 28.7 28.1 26.7 24.0 20.6 25.1 1981-2010
嘉義 16.5 17.3 19.7 23.0 25.8 27.8 28.6 28.2 27.0 24.5 21.3 17.7 23.1 1981-2010
臺中 16.6 17.3 19.6 23.1 26.0 27.6 28.6 28.3 27.4 25.2 21.9 18.1 23.3 1981-2010
阿里山 6.2 7.2 9.3 11.4 12.9 14.2 14.6 14.4 13.7 12.3 10.3 7.3 11.2 1981-2010
大武 20.3 20.9 22.6 24.7 26.5 28.0 28.6 28.2 27.2 26.0 24.0 21.3 24.9 1981-2010
玉山 -1.1 -0.5 1.1 3.4 5.7 7.1 7.9 7.8 7.1 6.5 4.0 0.8 4.2 1981-2010
新竹 15.5 15.9 17.9 21.7 24.9 27.4 29.0 28.7 27.1 24.2 21.2 17.7 22.6 1992-2010
恆春 20.7 21.4 23.2 25.2 27.0 27.9 28.4 28.1 27.4 26.3 24.3 21.7 25.1 1981-2010
成功 18.9 19.4 21.0 23.2 25.3 27.1 28.1 27.9 26.8 25.2 22.7 20.0 23.8 1981-2010
蘭嶼 18.5 19.0 20.5 22.4 24.3 25.7 26.3 26.1 25.2 23.8 21.7 19.4 22.7 1981-2010
日月潭 14.2 15.1 16.9 19.2 21.0 22.2 23.0 22.7 22.1 20.7 18.3 15.2 19.2 1981-2010
臺東 19.5 20.0 21.8 24.1 26.2 27.8 28.9 28.7 27.5 25.7 23.3 20.5 24.5 1981-2010
梧棲 16.0 16.3 18.5 22.4 25.5 27.8 29.0 28.8 27.4 24.6 21.4 17.7 23.0 1981-2010

藝術框設計 (可縮放視窗檢視)

更新日期:

使用技術: css3 border-image, css3 gradient, css3 box-shadow

雨後的緬梔花。

濛濛細雨裡,走一小段路。發現,雨後的花樹,亭亭玉立,經過一夜洗滌,模樣乾淨許多,容或有那麼點梨花帶淚的楚楚可憐,卻也因此清麗了些。

只是,當令的緬梔花啊,竟是沒有這樣好的際遇。樹上依舊開著一簇簇美麗而清新的花朵,樹底下的小小荒涼可也不遑多讓。宛如細雪,稀稀疏疏,零零落落,未經安排的鋪灑,母樹的周圍,和樹與樹中間的水泥小徑。

或仰首,或含笑,或彎身,或斜睨,或捲曲,或舒張,或羞怯,或昂揚,或精神奕奕,或老態頹朽,或含苞,或怒放,或群聚,或孤伶伶,或漂零水漥,或寄居他鄉,或者就是直接趴倒地面上,告別的姿態萬千,有種冷冷的美。

地上的落花,清一色的五片花瓣,不管底是白還是粉紅。有些花瓣,看得出來剛離枝不久,還新鮮著;有些花瓣已經開始順著邊緣老去,或點或線彷如咖啡漬的滲染。奇妙的是,那中心芒果熟透般的金黃,依然美得讓人心動。那花瓣,是沒有含笑花來的溫潤飽滿,也少了點油桐的嬌嫩,或說是,它的質感正巧介於兩者之間吧。總之,摸起來是舒舒服服的,聞著,隱隱透出一股淡淡的香。

緬梔花的枝幹,嚴格說來一點柔媚的氣息都沒有。幾個月前,葉片落得乾淨,全身裸露,只見蒼勁,只見斑駁的歲月紋身,只見過路人的視而不見。那樣的身影,實在很難吸引人,如果不是我們知道,它只是在為日後的花開做準備,或許我們也會忘記等待。

美好的事物,總是需要時間醞釀。美好的本質,縱使在雨後,依然清晰可見。美好的相遇,是生活裡的糖,生活裡的鹽。

google 論壇

css animation art (groups.google.com/group/css-animation-art/)