行業動態CSS3的新特性讓微交互更輕松更便捷和兼具景深效果

       CSS3的新特性讓微交互更輕松更便捷和兼具景深效果。頁面結構即頁面布局,是針對單個頁面不同控件和元素的布局關系展示。網頁上的微交互,就是控件和元素響應熱點事件之后的變化,以前基本就是背景顏色或者圖片的變化,這種變化常常來自替換和運動等帶來的視覺特效演繹。而CSS3 最強能實現3D交互效果,卻是利用了translateZ 屬性,它是transform的子屬性,它決定了元素沿著自身Z軸移動。

       如果只有這么一個屬性,是看不出來任何效果的,因為瀏覽器沒有辦法計算應該產生什么樣的變化,所以我們需要給父元素添加一條 perspective屬性,此時,表示父元素距離屏幕多遠。perspective:__px決定元素距離屏幕的像素值,也就是平常說的景深效果再比如說超鏈接(包括菜單的超鏈接),CSS3自定義無窮變幻的樣式超鏈接按鈕,讓鼠標滑過帶動畫特效。超鏈接和按鈕在網頁中是最為基本的元素了,我們可以通過設置CSS3樣式將鏈接外觀做一些簡單的調整,比如文本大小、顏色和下劃線。也可以利用上文提到過的屬性,做更多的動畫演繹。

       現在我們瀏覽國外很多優秀的個人網站,在實現菜單跳轉和頁面切換的時候,基本都是使用了CSS3的技術,既使得畫面舒適,又切換流暢。特別是我們傳統認為的那種鼠標滑入、點擊、滑過之后的效果變換,基本都是CSS3的技術應用,減少了很多加載環節和圖片制作的繁瑣,使得微交互更輕松更便捷[5]。比如圖3,扁平化圖標在hover(鼠標指針選擇器類型)事件前后的變化,鼠標滑入之前效果為上排圖片狀態,鼠標滑入之后,產生背景顏色變化和前景元素的動畫(前景元素由對角線四個方向的碎片元素飛入拼合成完整前景元素)。

本文地址:http://www.truerl.com/article/21852.html
相關文章:
最新文章:
欧美日韩国产高清综合二区_亚洲日韩天堂在线中文字幕_日韩精品一在线观看视频