行業(yè)動(dòng)態(tài)
行業(yè)動(dòng)態(tài)CSS3的新特性讓微交互更輕松更便捷和兼具景深效果
發(fā)布：2020-11-22 12:28:23 瀏覽：2700
CSS3的新特性讓微交互更輕松更便捷和兼具景深效果。頁(yè)面結(jié)構(gòu)即頁(yè)面布局，是針對(duì)單個(gè)頁(yè)面不同控件和元素的布局關(guān)系展示。網(wǎng)頁(yè)上的微交互，就是控件和元素響應(yīng)熱點(diǎn)事件之后的變化，以前基本就是背景顏色或者圖片的變化，這種變化常常來(lái)自替換和運(yùn)動(dòng)等帶來(lái)的視覺(jué)特效演繹。而CSS3 最強(qiáng)能實(shí)現(xiàn)3D交互效果，卻是利用了translateZ 屬性，它是transform的子屬性，它決定了元素沿著自身Z軸移動(dòng)。
如果只有這么一個(gè)屬性，是看不出來(lái)任何效果的，因?yàn)闉g覽器沒(méi)有辦法計(jì)算應(yīng)該產(chǎn)生什么樣的變化，所以我們需要給父元素添加一條 perspective屬性，此時(shí)，表示父元素距離屏幕多遠(yuǎn)。perspective：__px決定元素距離屏幕的像素值，也就是平常說(shuō)的景深效果再比如說(shuō)超鏈接（包括菜單的超鏈接），CSS3自定義無(wú)窮變幻的樣式超鏈接按鈕，讓鼠標(biāo)滑過(guò)帶動(dòng)畫(huà)特效。超鏈接和按鈕在網(wǎng)頁(yè)中是最為基本的元素了，我們可以通過(guò)設(shè)置CSS3樣式將鏈接外觀做一些簡(jiǎn)單的調(diào)整，比如文本大小、顏色和下劃線。也可以利用上文提到過(guò)的屬性，做更多的動(dòng)畫(huà)演繹。
現(xiàn)在我們?yōu)g覽國(guó)外很多優(yōu)秀的個(gè)人網(wǎng)站，在實(shí)現(xiàn)菜單跳轉(zhuǎn)和頁(yè)面切換的時(shí)候，基本都是使用了CSS3的技術(shù)，既使得畫(huà)面舒適，又切換流暢。特別是我們傳統(tǒng)認(rèn)為的那種鼠標(biāo)滑入、點(diǎn)擊、滑過(guò)之后的效果變換，基本都是CSS3的技術(shù)應(yīng)用，減少了很多加載環(huán)節(jié)和圖片制作的繁瑣，使得微交互更輕松更便捷[5]。比如圖3，扁平化圖標(biāo)在hover（鼠標(biāo)指針選擇器類(lèi)型）事件前后的變化，鼠標(biāo)滑入之前效果為上排圖片狀態(tài)，鼠標(biāo)滑入之后，產(chǎn)生背景顏色變化和前景元素的動(dòng)畫(huà)（前景元素由對(duì)角線四個(gè)方向的碎片元素飛入拼合成完整前景元素）。
>>> 查看《行業(yè)動(dòng)態(tài)CSS3的新特性讓微交互更輕松更便捷和兼具景深效果》更多相關(guān)資訊 <<<
本文地址：http://www.modelkey.org/news/html/21852.html
上一個(gè)：行業(yè)動(dòng)態(tài)布局方案
下一個(gè)：行業(yè)動(dòng)態(tài)文字語(yǔ)言
