CSS知識總結（八）

来源:http://www.cnblogs.com/mossbaoo/archive/2016/08/16/5774912.html
-Advertisement-
Play Games

CSS常用樣式之變形樣式（2D平移、2D旋轉、2D縮放、斜切扭曲），過渡動畫（過渡屬性、過渡時間、過渡函數、過渡延遲時間） ...


CSS常用樣式

 

8.變形樣式

　改變元素的大小，透明，旋轉角度，扭曲度等。

　transform : none | <transform-function>

　<transform-function>表示一個或多個變換函數，以空格分開，也就是說我們可以同時對一個元素進行transform的多種屬性操作。

　溫馨提示：以往我們疊加效果都是用逗號隔開，但transform中使用多個屬性時是用空格隔開。

　　1）translate()

　　　　指定對象的2D translation（2D平移）。第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則預設值為0。　　　

 　　例子 源代碼：

/* CSS代碼 */
.box1{
    width:200px;
    height:50px;
    border:1px solid #000;
}
.box1 p{
    padding:0;
    margin:0;
    width:200px;
    height:50px;
    background:#ccc;
    transform:translate(20px,20px);
}
<!-- HTML代碼 -->
<body>
    <div class="box1">
        <p>translate(20px,20px)</p>
    </div>
</body>

　　效果：

translate(20px,20px)

 

 

　　2）translateX()

　　　　指定對象X軸（水平方向）的平移。

　　例子 源代碼：

/* CSS代碼 */
.box2{
    width:200px;
    height:50px;
    border:1px solid #000;
}
.box2 p{
    padding:0;
    margin:0;
    width:200px;
    height:50px;
    background:#ccc;
    transform:translateX(20px);
}
<!-- HTML代碼 -->
<body>
    <div class="box2">
        <p>translateX(20px)</p>
    </div>
</body>

　　效果：

translateX(20px)

 

 　　3）translateY()

　　　　指定對象Y軸（垂直方向）的平移。

 　　例子 源代碼：

/* CSS代碼 */
.box3{
    width:200px;
    height:50px;
    border:1px solid #000;
}
.box3 p{
    padding:0;
    margin:0;
    width:200px;
    height:50px;
    background:#ccc;
    transform:translateY(20px);
}
<!-- HTML代碼 -->
<body>
    <div class="box3">
        <p>translateY(20px)</p>
    </div>
</body>

　　效果：

translateY(20px)

 

 

　　4）rotate()

　　　　指定對象的2D rotation（2D旋轉）。

　　例子 源代碼：

/* CSS代碼 */
.box4{
    width:100px;
    height:100px;
    border:1px solid #000;
}
.box4 p{
    padding:0;
    margin:0;
    width:100px;
    height:100px;
    background:#ccc;
    transform:rotate(45deg);
}
<!-- HTML代碼 -->
<body>
    <div class="box4">
        <p>rotate(45deg)</p>
    </div>
</body>

　　效果：

rotate(45deg)

 

 

　　5）transform-origin

　　　　指定元素的中心點。

　　　　任何一個元素都有一個中心點，預設情況之下，其中心點是居於元素X軸和Y軸的50%處。

 　　例子 源代碼：

/* CSS代碼 */
.box5{
    width:100px;
    height:100px;
    border:1px solid #000;
}
.box5 p{
    padding:0;
    margin:0;
    width:100px;
    height:100px;
    background:#ccc;
    transform-origin:0 0;
    transform:rotate(15deg);
}
<!-- HTML代碼 -->
<body>
    <div class="box5">
        <p>rotate(15deg)</p>
    </div>
</body>

　　效果：

rotate(15deg)

 

　　6）scale()

　　　　指定對象的2D scale（2D縮放）。

　　　　第一個參數表示水平方向縮放的倍數，第二個參數表示垂直方向的縮放倍數。如果第二個參數未提供，則預設取第一個參數的值。

　　例子 源代碼：

/* CSS代碼 */
.box6{
    width:100px;
    height:100px;
    border:1px solid #000;
}
.box6 p{
    padding:0;
    margin:0;
    width:100px;
    height:100px;
    background:#ccc;
    transform:scale(0.8,0.8);
}
<!-- HTML代碼 -->
<body>
    <div class="box6">
        <p>scale(0.8,0.8)</p>
    </div>
</body>

 　　效果：

scale(0.8,0.8)

 

 　　7）skew()

　　　　指定對象skew transformation（斜切扭曲）。

　　　　第一個參數是水平方向扭曲角度，第二個參數是垂直方向扭曲角度。如果第二個參數未設置，則預設值為0。

　　例子 源代碼：

/* CSS代碼 */
.box7{
    width:100px;
    height:100px;
    border:1px solid #000;
}
.box7 p{
    padding:0;
    margin:0;
    width:100px;
    height:100px;
    background:#ccc;
    transform:skew(30deg,10deg);
}
<!-- HTML代碼 -->
<body>
    <div class="box7">
        <p>skew(30deg,10deg)</p>
    </div>
</body>

　　效果：

skew(30deg,10deg)

 

　　如果設置"transform:skewX(30deg);"：

skewX(30deg)

 　　如果設置"transform:skewY(30deg);"：

skewY(30deg)

 

 

 9.過渡動畫

　　1）過渡屬性 （transition-property）

　　　　設置對象中的參與過渡的屬性。

　　　　預設值為：all，預設為所有可以進行過渡的css屬性。如果提供多個屬性值，以逗號進行分隔。

　　　有過渡效果的屬性：

       

　　例子 源代碼：

/* CSS代碼 */
.property{
    width:200px;
    height:100px;
    border:1px solid #000;
    background:#fff;
    color:#000;
    transition-property:background-color,color;
}
.property:hover{
    background:#000;
    color:#fff;
}
<!-- HTML代碼 -->
<body>
    <p>請將滑鼠移動到下麵的矩形上：</p>
    <div class="property">
        設置過渡的屬性：
        background-color , color
    </div>
</body>

　　效果：

請將滑鼠移動到下麵的矩形上：

設置過渡的屬性： background-color , color

 

 　　2）過渡所需時間（transition-duration）

 　　　　設置對象過渡的持續時間，就是從舊屬性過渡到新屬性所花的時間。

 　　　　如果提供多個屬性值，以逗號進行分隔。

 　　例子 源代碼：

/* CSS代碼 */
.duration{
    width:200px;
    height:100px;
    border:1px solid #000;
    background:#fff;
    color:#000;
    transition-property:background-color,color;
    transition-duration:2s;
}
.duration:hover{
    background:#000;
    color:#fff;
}
<!-- HTML代碼 -->
<body>
    <p>請將滑鼠移動到下麵的矩形上：</p>
    <div class="duration">
        過渡的時間是：2s
    </div>
</body>

　　效果：

請將滑鼠移動到下麵的矩形上：

過渡的時間是：2s

 

　　3）過渡函數（transition-timing-function）

　　　　指過渡的“緩動函數”。主要用來指定瀏覽器的過渡速度，以及過渡期間的操作進展情況。

　　　　其中要包括以下幾種函數：

　　　　①ease : 預設值，逐漸變慢(等於 cubic-bezier(0.25,0.1,0.25,1))

　　　　②linear : 勻速過渡效果(等於 cubic-bezier(0,0,1,1))

　　　　③ease-in : 加速的過渡效果(等於 cubic-bezier(0.42,0,1,1))

　　　　④ease-out : 減速的過渡效果(等於 cubic-bezier(0,0,0.58,1))

　　　　⑤ease-in-out : 加速然後減速(等於cubic-bezier (0.42, 0, 0.58, 1))

　　　　⑥cubic-bezier(n,n,n,n)：在 cubic-bezier 函數中定義自己的值，可能的值是 0 至 1 之間的數值。

　　例子 源代碼：

/* CSS代碼 */
.ease{
    width:100px;
    height:100px;
    border:1px solid #000;
}
.ease-in{    
    margin-left:0px;
    transition-property:all;
    transition-duration:2s;
    transition-timing-function:ease-in;
}
.ease-out{    
    margin-left:0px;
    transition-property:all;
    transition-duration:2s;
    transition-timing-function:ease-out;
}
.ease:hover{
    margin-left:200px;
}
<!-- HTML代碼 -->
<body>
    <p>請將滑鼠移動到下麵的矩形上，並跟著矩形移動：</p>
    <div class="ease ease-in">
        加速 ease-in
    </div>
    <div class="ease ease-out">
        減速 ease-out
    </div>
</body>

　　效果：

請將滑鼠移動到下麵的矩形上，並跟著矩形移動：

加速 ease-in 減速 ease-out

 

　　4）過渡延遲時間（transition-delay）

　　　　指定一個動畫開始執行的時間，也就是說當改變元素屬性值後多長時間開始執行。

　　例子 源代碼：

/* CSS代碼 */
.delay{
    width:200px;
    height:100px;
    border:1px solid #000;
    background:#fff;
    color:#000;
    transition-property:background-color,color;
    transition-duration:2s;
    transition-delay:1s;
}
.delay:hover{
    background:#000;
    color:#fff;
}
<!-- HTML代碼 -->
<body>
    <p>請將滑鼠移動到下麵的矩形上：</p>
    <div class="delay">
        過渡延遲的時間是：1s
    </div>
</body>

　　效果：

請將滑鼠移動到下麵的矩形上：

過渡延遲的時間是：1s

 

 　　5）過渡動畫縮寫（transition）

　　　　transition : <transition-property> < transition-duration > <transition-timing-function> < transition-delay> , ……

 　　例子 源代碼：

/* CSS代碼 */
.all{
    width:208px;
    height:100px;
    border:1px solid #000;
    background:#fff;
    color:#000;
    transition:all 2s ease-in 1s;
}
.all:hover{
    background:#000;
    color:#fff;
}
<!-- HTML代碼 -->
<body>
    <p>請將滑鼠移動到下麵的矩形上：</p>
    <div class="all">
        transition:all 2s ease-in 1s;
        所有屬性 過渡2s 加速 延遲1s
    </div>
</body>

 　　效果：

請將滑鼠移動到下麵的矩形上：

transition:all 2s ease-in 1s; 所有屬性 過渡2s 加速 延遲1s

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 純CSS3單頁切換導航菜單界面設計
    這是一款使用純CSS3製作的單頁切換導航菜單界面設計效果。該頁面效果中，在頁面的左側垂直排放一組導航按鈕，當點擊導航按鈕時，相應的頁面會從屏幕右側滑動出來，效果非常炫酷。 線上預覽 源碼下載 使用方法 該單頁切換導航菜單界面的HTML結構如下： 1 2 3 4 5 6 7 8 9 10 11 12 ...
  • RSA加密演算法的簡單案例
    RSA加密演算法是目前最有影響力的公鑰加密演算法，它能夠抵抗到目前為止已知的絕大多數密碼攻擊。 ...
  • CSS知識總結（九）
    CSS常用樣式之自定義動畫（關鍵幀、動畫名稱、動畫時間、動畫過渡速度、動畫延遲時間、動畫執行次數、動畫的順序、動畫的狀態、動畫時間之外的狀態） ...
  • canvas之萬花筒
    canvas也有css3里transform的變換功能，transform的底層運算的方式是運用了線性代數里矩陣， 而矩陣是在我們的生活實踐中會經常被使用，它可以把複雜的空間問題呈現出來，它還有很多實踐的 地方，然後不懂它的人會覺得很難，如果要鑽研，這方面知識是不能少的。 canvas里封裝好的變換 ...
  • 關於Ajax技術中servlet末尾的輸出流
    Ajax的伺服器端用PrintWriter out=resp.getWriter()來響應數據的時候，out.print(0)、out.print(1)來表示成功或失敗，而不用out.write是有原因的，首先來看一下print和write兩者的異同點。 共同點是：兩者都不刷新頁面，只在原來的頁面寫 ...
  • js ==與===區別詳解（轉）
    1、對於string,number等基礎類型，==和 是有區別的 1）不同類型間比較，==之比較“轉化成同一類型後的值”看“值”是否相等， 如果類型不同，其結果就是不等 2）同類型比較，直接進行“值”比較，兩者結果一樣 2、對於Array,Object等高級類型，==和 是沒有區別的 進行“指針地址 ...
  • jQuery Devrama Slider 幻燈片
    Devrama Slider 是個圖像滑塊，帶有許多非常有趣的特性。 它不僅支持圖像還支持 HTML 內容。 響應式 方便 CSS3 轉換 轉換效果 進度條 高級的預載入和延遲載入 CSS 自定義 用戶可以定義導航或者控制器 線上實例 實例演示 使用方法 複製 複製 下載 ...
  • jQuery3.0的buildFragment
    在 jQuery3.0中，buildFragment 是一個私有函數，用來構建一個包含子節點 fragment 對象。這個 fragment 在 DOM1 中就已經有了，所有瀏覽器都支持。當頻繁操作(添加、插入) DOM 時使用該方法可以提高性能，John resig 做過一個測試及一篇博客。 jQ ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類