仿Material UI框架的動畫特效

2022-01-17 09:52:10 字數 619 閱讀 8897

material ui 是一款功能非常強大,介面卻十分清新簡潔的css框架,material ui利用了google的material design 全新設計語言,並且讓每乙個ui元件都變得非常獨立,因此開發者使用material ui也會比較簡單。和bootstrap類似,material ui提供了很多常用的ui元件,除了最基本的選單、按鈕、滑動杆、進度條、單選框/核取方塊外,它還提供了乙個非常有趣的日曆元件,另外還提供了一些很有趣的圖示。

不過,這裡我並不打算介紹material ui的使用,而是介紹如果實現material ui內的動畫特效,比如點選按鈕會出現波浪擴散的動畫效果、表單獲取焦點動畫等等。

注意:要使用下面的動畫效果,必須引入jquery。

一、點選按鈕會出現波浪擴散的動畫效果

為了效果,我這裡特意將波浪的顏色加深。

先看效果:

點我 

二、表單獲取焦點的動畫

效果如下:

三、checkbox

下面用到了字型圖示fontawsome

參考:

封裝緩動框架

function animate obj,json,fn else var step target leader 10 step step 0?math.ceil step math.floor step leader leader step 我們要給傳遞過來的屬性賦值 if k opacity e...

仿Gin搭建自己的web框架 二

本文介紹gin的路由控制。複製 這條語句通過http.handlefunc函式註冊了對路徑 處理的函式handler。看一下它內部的實現 func handlefunc pattern string,handler func responsewriter,request 複製 可以看到是呼叫了 de...

Android動畫 仿MIUI8結束通話電話動畫

用過miui8的都大概留意到了這個動畫,看著很炫,於是花了一天時間做了個。先上效果圖 整個動畫可以分成2部分,第1部分是個類似於波紋的動畫,讓他反過來就可以了。這裡用到了cardview,cardview是5.0新增的控制項,繼承與framelayout。首先是新增引用 compile com.an...