JavaEE——css字型樣式效果

來源:互聯網
上載者:User

標籤:應用   for   tom   過程   背景   導圖   ott   images   樣式   

聲明:本欄目所使用的素材都是凱哥學堂VIP學員所寫,學員有權匿名,對文章有最終解釋權;凱哥學堂旨在促進VIP學員互相學習的基礎上公開筆記。

樣式效果:2D轉換:

transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
其中rotate屬性是用來定義2D旋轉的,屬性參數裡面填寫的是旋轉的角度。
圖片旋轉程式碼範例:

運行結果:

scale(x,y) 設定2D縮放,scale(x) 則僅通過設定x軸的值來定義縮放轉換,程式碼範例:

運行結果:

skew(x-angle,y-angle) 定義沿著X和Y軸的2D傾斜轉換,單位是角度deg,程式碼範例:

運行結果:

思維導圖:

其他的屬性使用方式參考:

過渡屬性:
transition 屬性是一個用於設定過渡效果的屬性,可以設定2D轉換的過渡、寬高變化的過渡、背景或字型顏色的過渡。

這個屬性要配合hover使用,當滑鼠移動到改該定義的元素時就會出現過渡效果,2D縮放過渡效果程式碼範例:

運行結果:

寬度和背景顏色過渡,程式碼範例:

其實邏輯很簡單,就是先在標籤樣式裡先定義好初始的樣式效果和要過渡的屬性和時間,然後在標籤的hover狀態樣式裡定義滑鼠移動上去後的樣式效果,過渡其實就是把這個改變樣式效果的過程變緩慢了。

運行結果:

2D旋轉過渡程式碼範例:

運行結果:

以上只是介紹到transition屬性規定完成過渡效果需要多少秒或毫秒的操作,剩下還有幾個效果可以參考以下文法,或訪問w3cshool網站查詢更多的用法。

網址:http://www.w3school.com.cn/cssref/pr_transition.asp

div層的製作:

先介紹幾個屬性:
position屬性,用於規定元素的定位類型。

position屬性的absolute值用於產生絕對位置的元素,相對於 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
其實簡單來說就是通過絕對位置,元素可以放置到頁面上的任意位置,例如div,我給div設定了絕對位置就可以任意的通過"left", "top", "right" 以及 "bottom" 屬性設定它在網頁中的位置。
程式碼範例:

運行結果:

z-index屬性,定義div層的序號,例如:z-index屬性值為2的層,那麼這個層就在z-index屬性值為1的層上面。
程式碼範例:

運行結果:

結合以上介紹的知識點,我們可以做一個簡單的例題,例如:當我們有時候登入某個網站的賬戶時,會發現當登入的輸入框彈出來的時候除了登入的輸入框之外就不能點擊網頁的其他地方了,這其實就是使用了div層的效果,把網頁都給蓋住了。而且有些登入的輸入框當我們把滑鼠移動上去後還會有旋轉放大之類的效果,這是使用到了過渡樣式。現在我們做一個類似於這樣子的網頁。
程式碼範例:

運行結果:

JavaEE——css字型樣式效果

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.