transtion:過渡動畫

来源:http://www.cnblogs.com/candylily/archive/2017/01/06/6257222.html
-Advertisement-
Play Games

動畫分為: 1.css3動畫:(動畫性能遠高於js) 1).過渡動畫(transition) 2).關鍵幀動畫(@keyframes,animation) 2.js動畫: 過渡動畫(transition) 語法: (所有時長單位都是秒) 1.變化屬性(transition-property(屬性名) ...


動畫分為:

1.css3動畫:(動畫性能遠高於js)

  1).過渡動畫(transition)

  2).關鍵幀動畫(@keyframes,animation)

2.js動畫:

 

過渡動畫(transition)

 

語法:  (所有時長單位都是秒

1.變化屬性(transition-property(屬性名))

2.持續時長(transition-duration(持續時長))*該屬性必須有(預設時間為"0")

3.變化曲線(transition-timing-function)

4.延遲時長(transition-delay)

  *當失去觸發時機的時候,還會動畫返回原來的狀態

 

transition-timing-function:變化速率

1.ease(預設值):先快再快再慢

2.ease-in:淡入(動畫剛開始的時候變化慢)

3,ease-out:淡出(動畫快結束的時候變化慢)

4.ease-in-out:淡入淡出

5.linear:勻速變化

6.cubic-bezier:貝塞爾曲線,所有的變化都可以用貝塞 爾曲線來代替 cubic-bezier(x1,y1,x2,y2),x1,y1,x2,y2值的範圍都是0~1

貝塞爾曲線圖:下麵的例子會提到,具體不做詳解)

 

過渡動畫沒有自己的觸發時機,只有以下幾種,可以觸發過渡動畫:

1.:hover(最常用)

2.:focus

3.:checked(多選輸入框被勾選的狀態)

4.媒體查詢(@media screen and(條件){樣式})

5.js

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8" />
  5         <title>過渡動畫</title>
  6         <style type="text/css">
  7             .div1{
  8                 width: 200px;
  9                 height: 200px;
 10                 background: green;
 11                 /*變化屬性:
 12                      預設值為all指代所有的屬性(不寫,預設該元素身上所有屬性的值的更改,
 13                        都支持動畫效果)
 14                  */
 15                 transition-property:all;
 16                 /*多組值之間用","隔開*/
 17                 transition-property: width,background;
 18                 /*持續時長,預設值為"0",就是沒有動畫(設置過渡動畫一定不能省略)*/
 19                 transition-duration: 2s;
 20                 /*變化速率
 21                      四個值:1.ease(預設值):先快再快再慢
 22                             2.ease-in:淡入(動畫剛開始的時候變化慢)
 23                             3,ease-out:淡出(動畫快結束的時候變化慢)
 24                             4.ease-in-out:淡入淡出
 25                             5.linear:勻速變化
 26                             6.cubic-bezier:貝塞爾曲線,所有的變化都可以用貝塞
 27                               爾曲線來代替
 28                               cubic-bezier(x1,y1,x2,y2),x1,y1,x2,y2值的範圍
 29                                  都是0~1
 30                  */
 31                 transition-timing-function: cubic-bezier(0.4,0.2,0.5,0.7);
 32                 /*延遲時長:延遲多久開始*/
 34                 transition-delay: 2s;
 35                 /*transition: all width,background 2s cubic-bezier(0.4,0.2,0.5,0.7) 2s;*/
 36             }
 37             /*再觸發時機中,更改你想要看屬性動畫的那個屬性的值*/
 38             .div1:hover{
 39                 width: 500px;
 40                 background: pink;
 41                 height: 500px;
 42             }
 43             .div2{
 44                 width: 200px;
 45                 height: 200px;
 46                 background: pink;
 47                 /*過渡動畫*/
 48                 transition: all 2s linear ;  
 49             }
 50             .div2:hover{
 51                 /*所有的屬性都支持形變的*/
 52                 /*transform:多組形變用空格
 53                  background:多組之間用","號
 54                 */
 55                 /*形變中平移其實真正的位置沒有改變,移動就是個假象*/
 56                 /*transform: translate(300px,100px) ;*/
 57                 opacity: 0.5;
 58                 /*margin-left:是真實改變*/
 59                 margin-left: 300px;
 60             }
 61             .text{
 62                 transition: 2s;
 63                 height: 100px;
 64             }
 65             /*過渡動畫的focus時機*/
 66             .text:focus{
 67                 height: 300px;
 68             }
 69             .check{
 70                 margin-top: 50px;
 71                 transition: 2s;
 72             }
 73             .check:checked{
 74                 margin-top: 200px;
 75             }
 76             
 77             
 78             .div3{
 79                 width: 200px;
 80                 height: 200px;
 81                 background: yellow;
 82                 transition: 2s;
 83             }
 84             @media only screen and (min-width:800px ) {
 85                 .div3{
 86                     width: 500px;
 87                 }
 88             }
 89         </style>
 90     </head>
 91     <body>
 92         <p>eg1:</p>
 93         <div class="div1"></div>
 94         <hr />
 95         
 96         <p>eg2:</p>
 97         <div class="div2"></div>
 98         <hr />
 99         
100         <p>eg3:</p>
101         <form action="###">
102             <!--
103                 input:我們沒有設置寬高,就可以看到它(特殊性),對於它設置寬高
104                 動畫的時候,避免相容性問題,一般要設置初始寬高
105                 *所有屬性設置過渡動畫的時候,一般給該屬性設置初始值
106             -->
107             <input type="text" class="text" value="" />
108             <br />
109             <input type="checkbox" class="check" />
110         </form>    
111         <hr /
112         
113         <p>eg4:</p>
114         <!--媒體查詢時機的例子-->
115         <div class="div3"></div>
116     </body>
117 </html>

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

-Advertisement-
Play Games
更多相關文章
  • 1.什麼是ajax? Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的縮寫。 2.ajax需要什麼基礎? HTML 用於建立 Web 表單並確定應用程式其他部分使用的欄位。 JavaScript 代碼是運行 Ajax 應用程式的核心代碼,幫助改進 ...
  • 寫在前面:以下是個人總結的關於js常見的入門級的問題一些總結。 js是有 ECMAScript Dom Bom 三部分組成。 1,undefined,NaN,Null,infinity 1) undefined 是undefined 類型 var a; //聲明變數後不賦值 typeof 類型判斷方 ...
  • #HTML 什麼是HTML,和他ML... 網頁可以比作一個裝修好了的,可以娶媳婦的房子. 房子分為:毛坯房,精裝修 毛坯房的修建: 磚,瓦,水泥,石頭,石子.... 精裝修的房子:在毛坯房的基礎上進行粉刷,覆蓋,雕琢,修飾等操作.... HTML標簽 相當於蓋毛坯房用的石子,磚瓦....:房子成功 ...
  • 為了減少概念混淆,應該把 =稱作(得到或者賦值),==稱作(相等), 稱作(嚴格相等) 相同點: 它們兩個運算符都允許任意類型的的操作數,如果操作數相等,返回true,否則返回false 不同: ==:運算符稱作相等,用來檢測兩個操作數是否相等,這裡的相等定義的非常寬鬆,可以允許進行類型轉換 :用來 ...
  • 寫在前面 都知道,當我們讀取一個對象的屬性或方法的時候,會優先在這個對象上面找,如果在這個對象上找不到就會遍歷他的原型,還沒找到? >原型的原型,又沒找到?-->繼續往上。。。 這便是原型鏈的功用。下麵,我探討了一下原型鏈的使用與擴展,依靠原型鏈實現繼承。 至於什麼是繼承? 我的理解是,一個對象可以 ...
  • <iframe src="http://caiyanli.top/" height="500" width="500" frameborder="0" marginheight="2" marginwidth="0" scrolling="yes"></iframe> 註:iframe h5 新增標 ...
  • 超鏈接返回上一頁代碼: <a href=”#” onClick=”javascript :history.back(-1);”>返回上一頁</a> <a href=”#” onClick=”javascript :history.go(-1);”>返回上一頁</a> 用按鈕代碼:<input typ ...
  • 這是在fcc上的中級演算法中的第一題,拉出來的原因並不是因為有什麼好說的,而是我剛看時以為是求兩個數字的和, 很顯然錯了。我感覺自己的文字理解能力被嚴重鄙視了- -。故拉出來折騰折騰。 要求: 給你一個包含兩個數字的數組。返回這兩個數字和它們之間所有數字的和。 最小的數字並非總在最前面。 思路:在正確 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...