CSS知識總結（九）

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

CSS常用樣式之自定義動畫（關鍵幀、動畫名稱、動畫時間、動畫過渡速度、動畫延遲時間、動畫執行次數、動畫的順序、動畫的狀態、動畫時間之外的狀態） ...


CSS常用樣式

 

10.自定義動畫

　　1）關鍵幀（keyframes）

　　　　被稱為關鍵幀，其類似於Flash中的關鍵幀。

　　　　在CSS3中其主要以“@keyframes”開頭，後面緊跟著是動畫名稱加上一對花括弧“{…}”，括弧中就是一些不同時間段樣式規則。

　　　　語法：@keyframes animationname {keyframes-selector {css-styles;}}

　　　　animationname：定義動畫的名稱。

　　　　keyframes-selector：以百分比來規定改變發生的時間，或者通過關鍵詞 "from" 和 "to"，等價於 0% 和 100%。建議定義百分比選擇器。

　　　　css-styles：通過 @keyframes 規則，您能夠創建動畫，就是將一套 CSS 樣式逐漸變化為另一套樣式，並且能夠多次改變這套 CSS 樣式。

　　　　相容性：目前瀏覽器都不支持@keyframes規則，需要加上首碼"-moz-","-o-","-webkit-"。

　　　　例子：

@-webkit-keyframes FromLeftToRight{   /* Safari 和 Chrome */
    0% {left:0;}
    100% {left:800px;} 
}
@-moz-keyframes FromLeftToRight{    /* Firefox */
    0% {left:0;}
    100% {left:800px;} 
}
@-o-keyframes FromLeftToRight{      /* Opera */
    0% {left:0;}
    100% {left:800px;} 
}
@keyframes FromLeftToRight{ 
    0% {left:0;}
    100% {left:800px;} 
}

 

 

　　2）動畫名稱（animation-name）

　　　　元素所應用的動畫名稱，必須與規則@keyframes配合使用，因為動畫名稱由@keyframes定義。

　　　　animation-name ：none | <identifier>

　　　　<identifier>：定義一個或多個動畫名稱，如果是多個，用逗號分隔。

　　　　例子：

div{
    -webkit-animation-name:FromLeftToRight;
    -moz-animation-name:FromLeftToRight;
    -o-animation-name:FromLeftToRight;
    animation-name:FromLeftToRight;
}
@-webkit-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:800px;} 
}
@-moz-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:800px;} 
}
@-o-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:800px;} 
}
@keyframes FromLeftToRight{ 
    0% {left:0;}
    100% {left:800px;} 
}

 

 

　　3）動畫時間（animation-duration）

　　　　指定對象動畫的持續時間

　　　　animation-duration：<time>

　　例子 源代碼：

/* CSS代碼 */
.duration{
    width:100px;
    height:100px;
    background:#000;
    position:relative;
    -webkit-animation-name:FromLeftToRight;
    -webkit-animation-duration:3s;
    -moz-animation-name:FromLeftToRight;
    -moz-animation-duration:3s;
    animation-name:FromLeftToRight;
    animation-duration:3s;
}
@-webkit-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;} 
}
@-moz-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;} 
}
@keyframes FromLeftToRight{ 
    0% {left:0;}
    100% {left:500px;} 
}
<!-- HTML代碼 -->
<body>
    <p>請按F5刷新動畫（矩形用3秒向右移動500px）</p>
    <div class="duration"></div>
</body>

　　效果：

請按F5刷新動畫（矩形用3秒向右移動500px）

 

 

 　　4）動畫的過渡速度（animation-timing-function）

　　　　animation-timing-function : ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)

　　　　①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代碼 */
.function{
    width:100px;
    height:100px;
    background:#ccc;
    position:relative;
    margin:5px;
    -webkit-animation-name:FromLeftToRight;
    -webkit-animation-duration:3s;
    -moz-animation-name:FromLeftToRight;
    -moz-animation-duration:3s;
    animation-name:FromLeftToRight;
    animation-duration:3s;
}
.ease-in{
    -webkit-animation-timing-function:ease-in;
    -moz-animation-timing-function:ease-in;
    animation-timing-function:ease-in;
}
.ease-out{
    -webkit-animation-timing-function:ease-out;
    -moz-animation-timing-function:ease-out;
    animation-timing-function:ease-out;
}
@-webkit-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;} 
}
@-moz-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;} 
}
@keyframes FromLeftToRight{ 
    0% {left:0;}
    100% {left:500px;} 
}
<!-- HTML代碼 -->
<body>
    <p>請按F5刷新動畫（兩個矩形同樣在3秒用不同的速率向右移動500px）</p>
    <div class="function ease-in">ease-in</div>
    <div class="function ease-out">ease-out</div>
</body>

　　效果：

請按F5刷新動畫（兩個矩形同樣在3秒用不同的速率向右移動500px）

ease-in ease-out

 

　　5）動畫延遲時間（animation-delay）

 　　　　指定對象動畫延遲的時間

 　　　　animation-delay：<time>

 　　例子 源代碼：

/* CSS代碼 */
.delay{
    width:100px;
    height:100px;
    background:#000;
    position:relative;
    -webkit-animation-name:FromLeftToRight;
    -webkit-animation-duration:3s;
    -webkit-animation-delay:2s;
    -moz-animation-name:FromLeftToRight;
    -moz-animation-duration:3s;
    -moz-animation-delay:2s;
    animation-name:FromLeftToRight;
    animation-duration:3s;
    animation-delay:2s;
}
@-webkit-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;} 
}
@-moz-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;} 
}
@keyframes FromLeftToRight{ 
    0% {left:0;}
    100% {left:500px;} 
}
<!-- HTML代碼 -->
<body>
    <p>請按F5刷新動畫（刷新後請等待2秒啟動動畫）</p>
    <div class="delay"></div>
</body>

　　效果：

請按F5刷新動畫（刷新後請等待2秒啟動動畫）

 

 

 　　6）動畫執行次數（animation-iteration-count）

　　　　animation-iteration-count：infinite | <number>

　　　　infinite表示無限次數，number指定迴圈次數。

　　例子 源代碼：

/* CSS代碼 */
.infinite{
    width:100px;
    height:100px;
    background:#000;
    position:relative;
    -webkit-animation-name:FromLeftToRight;
    -webkit-animation-duration:3s;
    -webkit-animation-iteration-count:infinite; 
    -moz-animation-name:FromLeftToRight;
    -moz-animation-duration:3s;
    -moz-animation-iteration-count:infinite; 
    animation-name:FromLeftToRight;
    animation-duration:3s;
    animation-iteration-count:infinite;
}
@-webkit-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;} 
}
@-moz-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;} 
}
@keyframes FromLeftToRight{ 
    0% {left:0;}
    100% {left:500px;} 
}
<!-- HTML代碼 -->
<body>
    <p>動畫全自動無限迴圈播放</p>
    <div class="infinite"></div>
</body>

　　效果：

動畫全自動無限迴圈播放

 

 

 

 　　7）動畫的順序（animation-direction）

 　　　　設置對象動畫在迴圈中是否反向運動

　　　　animation-direction : normal | reverse | alternate | alternate-reverse

　　　　normal：正常方向

　　　　reverse：反方向運行

　　　　alternate：動畫先正常運行再反方向運行，並持續交替運行

　　　　alternate-reverse：動畫先反運行再正方向運行，並持續交替運行

 　　例子 源代碼：

/* CSS代碼 */
.box{
    width:100px;
    height:50px;
    background:#ccc;
    margin:5px;
    position:relative;
    -webkit-animation-name:FormLeftToRight;
    -moz-animation-name:FormLeftToRight;
    animation-name:FormLeftToRight;
    -webkit-animation-duration:5s;
    -moz-animation-duration:5s;
    animation-duration:5s;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
    animation-iteration-count:infinite;
}
.reverse{
    -webkit-animation-direction:reverse;
    -moz-animation-direction:reverse;
    animation-direction:reverse;
}
.alternate{
    -webkit-animation-direction:alternate;
    -moz-animation-direction:alternate;
    animation-direction:alternate;
}
.alternate-reverse{
    -webkit-animation-direction:alternate-reverse;
    -moz-animation-direction:alternate-reverse;
    animation-direction:alternate-reverse;
}
@-webkit-keyframes FormLeftToRight{
    0%{left:0;}
    100%{left:500px;}
}
@-moz-keyframes FormLeftToRight{
    0%{left:0;}
    100%{left:500px;}
}
@keyframes FormLeftToRight{
    0%{left:0;}
    100%{left:500px;}
}

 

 <!-- HTML代碼 -->
<body>
    <p>四種不同的順序</p>
    <div class="box">normal</div>
    <div class="box reverse">reverse</div>
    <div class="box alternate">alternate</div>
    <div class="box alternate-reverse">alternate-reverse</div>
</body>

　　效果：

四種不同的順序

normal reverse alternate alternate-reverse

 

 

 　　8）動畫的狀態（animation-play-state）

　　　　設置對象動畫的狀態

　　　　animation-play-state：running | paused

　　　　running：運動

　　　　paused：暫停

 

 　　例子 源代碼：

/* CSS代碼 */
.state{
    width:100px;
    height:100px;
    background:#000;
    position:relative;
    -webkit-animation-name:FromLeftToRight;
    -webkit-animation-duration:3s;
    -webkit-animation-iteration-count:infinite; 
    -moz-animation-name:FromLeftToRight;
    -moz-animation-duration:3s;
    -moz-animation-iteration-count:infinite; 
    animation-name:FromLeftToRight;
    animation-duration:3s;
    animation-iteration-count:infinite;
}
.state:hover{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    animation-play-state:paused;
}
@-webkit-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;} 
}
@-moz-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;} 
}
@keyframes FromLeftToRight{ 
    0% {left:0;}
    100% {left:500px;} 
}
<!-- HTML代碼 -->
<body>
    <p>滑鼠移動到矩形上可以暫停動畫</p>
    <div class="state"></div>
</body>

　　效果：

滑鼠移動到矩形上可以暫停動畫

 

 

 

 

 　　9）動畫時間之外的狀態（animation-fill-mode）

　　　　設置對象動畫時間之外的狀態

　　　　animation-fill-mode ： none | forwards | backwards | both

　　　　none：預設值。不設置對象動畫之外的狀態

　　　　forwards：設置對象狀態為動畫結束時的狀態

　　　　backwards：設置對象狀態為動畫開始時的狀態

　　　　both：設置對象狀態為動畫結束或開始的狀態

 　　例子 源代碼：

/* CSS代碼 */
.mode{
    width:100px;
    height:100px;
    background:#000;
    position:relative;
    -webkit-animation-name:FromLeftToRight;
    -webkit-animation-duration:3s;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-name:FromLeftToRight;
    -moz-animation-duration:3s;
    -moz-animation-fill-mode:forwards;
    animation-name:FromLeftToRight;
    animation-duration:3s;
    animation-fill-mode:forwards;
}
@-webkit-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;} 
}
@-moz-keyframes FromLeftToRight{
    0% {left:0;}
    100% {left:500px;} 
}
@keyframes FromLeftToRight{ 
    0% {left:0;}
    100% {left:500px;} 
}
<!-- HTML代碼 -->
<body>
    <p>請按F5刷新動畫（動畫結束後停在結束位置）</p>
    <div class="mode"></div>
</body>

　　效果：

請按F5刷新動畫（動畫結束後停在結束位置）

 

 

 　　10）動畫複合屬性（animation）

 　　　　通過 animation ，我們能夠創建自定義動畫，這可以在許多網頁中取代動畫圖片gif、Flash 動畫以及 JavaScript。

　　　　animation：<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-fill-mode> || <animation-play-state> [ ,*]

 　　　　

　　利用學過的動畫樣式，製作一個下滑菜單欄

　　源代碼：

/* CSS代碼 */
.dropmenu{
    width:100px;
    height:30px;
    line-height:30px;
    text-align:center;
    background:green;
    border-radius:10px;
    overflow:hidden;
}
.dropmenu a{
    font-family:"微軟雅黑";
    font-size:18px;
    color:#fff;
    text-decoration:none;
}
.dropmenu ul{
    list-style-type:none;
    padding:0;
    margin:0;
}
.dropmenu ul li{
    background:#808080;
}
.dropmenu:hover{
    -webkit-animation-name:SlideDown;
    -moz-animation-name:SlideDown;
    animation-name:SlideDown;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
}
@-webkit-keyframes SlideDown{
    0% {height:30px;}
    100% {height:155px;}
}
@-moz-keyframes SlideDown{
    0% {height:30px;}
    100% {height:155px;}
}
@keyframes SlideDown{
    0% {height:30px;}
    100% {height:155px;}
}
<!-- HTML代碼 -->
<body>
    <div class="dropmenu">
        <a href="###">菜單欄</a>
        <ul>
            <li><a href="###">AAA</a></li>
            <li><a href="###">AAA</a></li>
            <li><a href="###">AAA</a></li>
            <li><a href="###">AAA</a></li>
        </ul>
    </div>
</body>

 　　效果：

菜單欄

 

　　

 

 

 

　　　　


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

-Advertisement-
Play Games
更多相關文章
  • Javascript的重要數據類型-對象
    這次的分享，主要還是想跟大家聊聊Javascript語言中很重要的概念之一，對象。為什麼說之一呢？因為Javascript其他重要概念還包括：作用域 作用域鏈 繼承 閉包 函數 繼承 數組 ...... 有機會會跟大家分享這些概念的。以下的介紹會分為如下：1：前言2：概述 2.1：對象創建 2.2： ...
  • JavaScript實戰（原生range和自定義特效）
    今天我又碼了兩個特效：一個是用原生input[type=range]的，另一個完全自定義的；下麵是完整代碼和演示： <!DOCTYPE html tip{ position: absolute; top: 30px; left: 0; right: 0; width: 200px; height: ...
  • DOM技術實現競賽題頁面
    DOM技術實現競賽題頁面 這一段時間學習了DOM操作和JS開發，我就自己開發一個競賽題的頁面。 一、業務需求 1、目標：做一個一百道選擇題的頁面 2、功能： 顯示題目和選項。 下一題上一題的按鈕，到第一題和第一百題時停止。 答對了顯示笑臉和笑話，答錯了顯示苦臉和正確答案。 二、開發思路 採用自頂向下 ...
  • js簡介及運行原理（第一天）
    雖然我們的js將來會被很多的礦街（jQuery）取代，但js，我們現在依然不得不學，因為用途很廣泛 ...
  • 多文件非同步上傳帶進度條
    使用： 圖片： ...
  • Canvas的API整理
    canvas元素 可被用來通過腳本（通常是JavaScript）繪製圖形。比如,它可以被用來繪製圖形,製作圖片集合,甚至用來實現動畫效果。你可以(也應該)在元素標簽內寫入可提供替代的的代碼內容，這些內…容將會在在舊的、不支持canvas元素的瀏覽器或是禁用了JavaScript的瀏覽器內渲染並展現。 ...
  • 純CSS3單頁切換導航菜單界面設計
    這是一款使用純CSS3製作的單頁切換導航菜單界面設計效果。該頁面效果中，在頁面的左側垂直排放一組導航按鈕，當點擊導航按鈕時，相應的頁面會從屏幕右側滑動出來，效果非常炫酷。 線上預覽 源碼下載 使用方法 該單頁切換導航菜單界面的HTML結構如下： 1 2 3 4 5 6 7 8 9 10 11 12 ...
  • RSA加密演算法的簡單案例
    RSA加密演算法是目前最有影響力的公鑰加密演算法，它能夠抵抗到目前為止已知的絕大多數密碼攻擊。 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類