家好,很高興又見面了,我是姜茶的編程筆記,我們一起學(xué)習(xí)前端相關(guān)領(lǐng)域技術(shù),共同進(jìn)步,也歡迎大家關(guān)注、點(diǎn)贊、收藏、轉(zhuǎn)發(fā),您的支持是我不斷創(chuàng)作的動(dòng)力
我們來聊聊箭頭函數(shù)(就是下面這個(gè)東西)!箭頭函數(shù)的語法比傳統(tǒng)的函數(shù)表達(dá)式更簡(jiǎn)潔,而且它們沒有自己的 this、arguments、super 或 new.target。它們非常適合用在需要匿名函數(shù)的地方,同時(shí)不能作為構(gòu)造函數(shù)使用。
// 當(dāng)只有一個(gè)參數(shù)時(shí),圓括號(hào)不是必須的
(singleParam) => { statements }
singleParam => { statements }
// 沒有參數(shù)的函數(shù)必須加圓括號(hào)
() => { statements }
箭頭函數(shù)有兩個(gè)主要優(yōu)點(diǎn):
1?? 語法更簡(jiǎn)潔
2?? 不會(huì)綁定 this
沒有自己的 this
箭頭函數(shù)不會(huì)創(chuàng)建自己的 this,它只會(huì)繼承外層作用域的 this。
function Person() {
this.age = 0;
setInterval(() => {
// this 正確地指向 p 實(shí)例
console.log(this === p); // true
this.age++;
}, 1000);
}
var p = new Person();
由于 this 是詞法綁定的,嚴(yán)格模式中與 this 相關(guān)的規(guī)則將被忽略。
var f = () => { 'use strict'; return this; };
f() === window; // 或 global
因?yàn)榧^函數(shù)沒有自己的 this,使用這些方法調(diào)用時(shí)只能傳遞參數(shù),它們的第一個(gè)參數(shù) this 會(huì)被忽略。
let adder = {
base: 1,
add: function (a) {
console.log(this === adder); // true
let f = (v) => v + this.base;
return f(a);
},
addThruCall: function (a) {
let f = (v) => {
console.log(this === adder); // true
console.log(`v 的值是 ${v},this.base 的值是 ${this.base}`); // 'v 的值是 1,this.base 的值是 1'
return v + this.base;
};
let b = { base: 3 };
// call() 方法不能綁定 this 為 b 對(duì)象,第一個(gè)參數(shù) b 被忽略了
return f.call(b, a);
}
};
console.log(adder.add(1)); // 輸出 2
console.log(adder.addThruCall(1)); // 輸出 2
箭頭函數(shù)沒有 this 綁定。
"use strict";
var obj = {
i: 10,
b: () => console.log(this.i, this), // undefined, Window{...}
c: function () {
console.log(this.i, this); // 10, Object {...}
}
};
obj.b();
obj.c();
箭頭函數(shù)不能用作構(gòu)造函數(shù),用 new 調(diào)用會(huì)拋出錯(cuò)誤。
var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor
ES6 的箭頭函數(shù)表達(dá)式是匿名函數(shù)的一種簡(jiǎn)寫方式:
// 匿名函數(shù)
let show = function () {
console.log("匿名函數(shù)")
};
show(); // "匿名函數(shù)"
let show1 = () => console.log("匿名函數(shù)");
show1(); // "匿名函數(shù)"
不過,箭頭函數(shù)和傳統(tǒng)匿名函數(shù)在實(shí)際操作中還是有一些區(qū)別的。
如果你有任何問題或建議,歡迎在評(píng)論區(qū)留言交流!祝你編程愉快!
載說明:原創(chuàng)不易,未經(jīng)授權(quán),謝絕任何形式的轉(zhuǎn)載
使用Tailwind CSS掌握動(dòng)畫技術(shù),為用戶帶來難忘的體驗(yàn)
動(dòng)畫已經(jīng)成為網(wǎng)頁設(shè)計(jì)的重要組成部分,使開發(fā)人員能夠創(chuàng)建引人入勝和互動(dòng)的用戶體驗(yàn)。
Tailwind CSS,一款流行的實(shí)用型CSS框架,提供了一套強(qiáng)大的工具,可以輕松地創(chuàng)建令人驚艷的動(dòng)畫效果。
在這篇博客文章中,我們將探索使用Tailwind CSS進(jìn)行高級(jí)動(dòng)畫的令人興奮的世界,并揭示一些令人驚嘆的技巧,將使您的網(wǎng)絡(luò)項(xiàng)目達(dá)到一個(gè)新的水平。
Tailwind CSS 提供了一系列利用 CSS 過渡和變換的實(shí)用類。這些屬性使您能夠輕松創(chuàng)建平滑的動(dòng)畫和令人驚嘆的變換效果,而無需花費(fèi)太多的精力。
除了 transitions 和 transforms 之外,Tailwind CSS還支持關(guān)鍵幀動(dòng)畫。關(guān)鍵幀允許您通過在不同時(shí)間點(diǎn)指定一系列樣式變化來定義自定義動(dòng)畫。
讓我們深入探討不同類型的動(dòng)畫。
為了給漸變文字添加動(dòng)畫效果,我們將包含 animate-pulse 類。這個(gè)類會(huì)給元素應(yīng)用一個(gè)脈動(dòng)動(dòng)畫,給它一個(gè)微妙但引人注目的效果。
<div class="ms-52 my-10 text-5xl font-extrabold">
<span class="animate-pulse bg-gradient-to-r from-pink-500 via-green-500 to-violet-500 bg-clip-text text-transparent"> Tailwind CSS Animation </span>
</div>
在這個(gè)例子中,我們有一個(gè)包含文本“漸變文本”的 <span> 元素。為了創(chuàng)建漸變效果,我們使用 text-transparent 類使文本透明。最后,我們使用 bg-gradient-to-r 類來指定從紫色到藍(lán)色的水平漸變。
用途:我們可以使用這個(gè)動(dòng)畫來突出或聚焦細(xì)節(jié)。
在這個(gè)例子中,我們將使用Tailwind CSS創(chuàng)建一個(gè)占位符內(nèi)容區(qū)域,用于在沒有網(wǎng)絡(luò)連接或正在加載數(shù)據(jù)時(shí)使用 :)
<div class="mx-auto mt-10 w-full max-w-sm rounded-md border border-gray-300 p-4">
<div class="animate-pulse space-x-4">
<div class="grid">
<div class="flex">
<div class="w-10 rounded-full bg-slate-200"></div>
<div class="ms-4 w-full space-y-6">
<div class="h-2 rounded bg-slate-200"></div>
<div class="space-y-3">
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2 h-2 rounded bg-slate-200"></div>
<div class="col-span-1 h-2 rounded bg-slate-200"></div>
</div>
<div class="h-2 rounded bg-slate-200"></div>
</div>
</div>
</div>
<div class="mt-5 space-y-6 py-1">
<div class="h-2 rounded bg-slate-200"></div>
<div class="space-y-3">
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2 h-2 rounded bg-slate-200"></div>
<div class="col-span-1 h-2 rounded bg-slate-200"></div>
</div>
<div class="h-2 rounded bg-slate-200"></div>
</div>
<div class="h-2 rounded bg-slate-200"></div>
</div>
</div>
</div>
</div>
在這個(gè)例子中,我們使用嵌套的 <div> 和 flex 類來使加載文本在水平和垂直方向上居中。 justify-center 和 items-center 類確保內(nèi)容在父容器中居中顯示。
通過應(yīng)用 animate-pulse 類,整個(gè)占位區(qū)域?qū)⒄故疽粋€(gè)脈動(dòng)動(dòng)畫,給用戶一種活動(dòng)的錯(cuò)覺,并提示內(nèi)容正在加載。
用途:我們可以使用這個(gè)動(dòng)畫來展示請(qǐng)求的數(shù)據(jù)正在加載。
這段動(dòng)畫代碼創(chuàng)建了一個(gè)帶有邊框和旋轉(zhuǎn)效果的圓形元素。在圓形元素內(nèi)部,有一個(gè)較小的圓形元素位于右上角。
<div class="my-40 flex">
<div class="relative mx-auto h-28 w-28 animate-spin rounded-full border-2 p-4">
<span class="absolute right-5 top-2 flex h-3 w-3">
<span class="bg-white-500 relative inline-flex h-3 w-3 rounded-full bg-gray-500"> </span>
</span>
</div>
</div>
上面的代碼片段中有一個(gè)帶有類 my-40 和 flex 的 div 元素。在這個(gè) div 內(nèi)部,我們可以使用 animate-spin 類創(chuàng)建一個(gè)具有無限旋轉(zhuǎn)動(dòng)畫效果的圓形元素。我們可以用它來顯示數(shù)據(jù)加載的處理過程或圖像或文件的上傳過程。
用途:使用此動(dòng)畫,我們可以展示數(shù)據(jù)加載、圖像加載或文件上傳的處理過程。
這段動(dòng)畫代碼創(chuàng)建了一個(gè)包含兩個(gè)圓的動(dòng)畫。其中一個(gè)是較大的圓形,會(huì)反彈,另一個(gè)是較小的圓形,在其下方旋轉(zhuǎn)。動(dòng)畫效果營(yíng)造出加載或活動(dòng)的錯(cuò)覺。
<div class="my-40 flex">
<div class="relative mx-auto h-10 w-10 animate-bounce">
<div class="mx-auto h-16 w-16 animate-pulse rounded-full bg-gray-400"></div>
<span class="absolute flex h-5 w-5 animate-spin">
<span class="h-4 w-4 rounded-full bg-gray-400"> </span>
</span>
</div>
</div>
在這個(gè)動(dòng)畫中,我們有一個(gè)具有相對(duì)定位、居中、大小調(diào)整和彈跳動(dòng)畫效果的 div 類。在第二個(gè) div 內(nèi),有另一個(gè)具有居中、大小調(diào)整、脈沖動(dòng)畫效果和灰色背景顏色的 div 元素。
我們?cè)诟冈?div 上應(yīng)用了 animate-bounce 類,因此所有內(nèi)部元素都具有默認(rèn)的彈性效果。我們還在一個(gè)更大的圓圈上應(yīng)用了 animat-pulse 效果,以實(shí)現(xiàn)脈沖效果。
用途:我們可以使用這個(gè)動(dòng)畫來展示用戶的活動(dòng)或數(shù)據(jù)加載效果。
這個(gè)動(dòng)畫代碼由一個(gè)旋轉(zhuǎn)的圓角矩形形狀組成,表示某種活動(dòng)或加載。該矩形框具有虛線的灰色輪廓,以增加視覺效果。
<div class="my-40 flex">
<div class="mx-auto h-20 w-20 animate-spin rounded-3xl p-6 outline-dotted outline-2 outline-gray-500"></div>
</div>
上面的代碼片段有一個(gè)應(yīng)用旋轉(zhuǎn)動(dòng)畫效果到內(nèi)部 animate-spin 的類。 rounded-3xl 類將內(nèi)部 div 的角落變圓,創(chuàng)造出更圓潤(rùn)的形狀。 outline-dotted , outline-2 和 outline-gray-500 類將內(nèi)部 div 應(yīng)用了一個(gè)寬度為2個(gè)單位的虛線灰色輪廓。
用途:我們可以在多個(gè)地方使用這個(gè)動(dòng)畫,比如突出顯示幀、加載數(shù)據(jù)、文件或圖像處理等。
這段動(dòng)畫代碼將創(chuàng)建一個(gè)帶有兩個(gè)彈跳元素的加載動(dòng)畫效果。最外層的元素將彈跳,而在其中,將有一個(gè)嵌套的元素也會(huì)彈跳。
此外,還有一個(gè)小點(diǎn)狀元素會(huì)隨著其他元素一起移動(dòng)和彈跳。
<div class="my-40 flex">
<div class="relative mx-auto h-10 w-10">
<div class="relative mx-auto ms-5 h-24 w-24 animate-bounce rounded-full border-2">
<div class="absolute bottom-0 right-10">
<div class="relative h-40 animate-bounce">
<div class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-black"></div>
</div>
</div>
</div>
</div>
</div>
最外層的 div 具有類 animate-bounce 將創(chuàng)建一個(gè)彈跳動(dòng)畫效果。
在那個(gè) div 里面,有一個(gè)嵌套的 div ,它的類是 animate-bounce ,也會(huì)產(chǎn)生一個(gè)彈跳效果。在第二個(gè)嵌套的 div 里面,有一個(gè)黑色的背景顏色( bg-black )和一個(gè)小尺寸的 h-2 和 w-2 。這樣就創(chuàng)建了一個(gè)小的黑點(diǎn)或指示器,它也會(huì)參與彈跳動(dòng)畫。
用途:我們可以使用這個(gè)動(dòng)畫來展示文件或圖像的處理和加載。
這段動(dòng)畫代碼將在SVG元素上創(chuàng)建一個(gè)移動(dòng)動(dòng)畫效果。SVG代表一個(gè)綠色箭頭,動(dòng)畫將通過改變箭頭的X位置來使其水平來回移動(dòng)。
<div class="my-40 flex">
<div class="relative mx-auto mt-5 animate-[propel_5s_infinite]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" class="h-16 w-16">
<path d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" />
</svg>
</div>
</div>
現(xiàn)在,在你的tailwind.config.js文件中添加關(guān)鍵幀以實(shí)現(xiàn)對(duì)象的動(dòng)畫效果。根據(jù)你的需求進(jìn)行修改。
module.exports = {
content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
keyframes: {
propel: {
'0%': { transform: 'translateX(0)' },
'20%': { transform: 'translateX(25%)' },
'40%': { transform: 'translateX(-25%)' },
'60%': { transform: 'translateX(25%)' },
'100%': { transform: 'translateX(-25%)' },
},
},
},
},
plugins: [],
}
最外層的 div 具有 my-40 和 flex 類,提供垂直間距并啟用彈性盒布局。在第二個(gè) div 內(nèi),有一個(gè)帶有XML命名空間、視口框和類屬性的 svg 元素。 h-16 和 w-16 類設(shè)置SVG的高度和寬度, fill="green" 屬性將SVG的填充顏色設(shè)置為綠色。
用途:我們可以使用這個(gè)動(dòng)畫來引導(dǎo)、聚焦和突出顯示區(qū)域。
這段動(dòng)畫代碼將創(chuàng)建一個(gè)容器,并對(duì)其應(yīng)用旋轉(zhuǎn)動(dòng)畫效果,使其不斷地來回位移或旋轉(zhuǎn)。
容器內(nèi)部有一個(gè)較小的元素,它也應(yīng)用了翻轉(zhuǎn)動(dòng)畫效果,使其垂直來回連續(xù)旋轉(zhuǎn)。
<div class="my-40 flex">
<div class="relative mx-auto h-28 w-28 animate-[displace_5s_infinite] border border-red-200">
<div class="h-14 animate-[flip_5s_infinite] bg-red-100"></div>
</div>
</div>
現(xiàn)在,在你的tailwind.config.js文件中添加關(guān)鍵幀以動(dòng)畫化對(duì)象。
module.exports = {
content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
keyframes: {
displace: {
'0%': { transform: 'rotate(0deg)' },
'20%': { transform: 'rotate(-90deg)' },
'40%': { transform: 'rotate(0deg)' },
'60%': { transform: 'rotate(0deg)' },
'80%': { transform: 'rotate(90deg)' },
'100%': { transform: 'rotate(0deg)' },
},
},
},
},
plugins: [],
}
animate-[displace_5s_infinite] 類將“displace”動(dòng)畫效果應(yīng)用于該元素,使其不斷來回旋轉(zhuǎn)。
在內(nèi)部的 div 中, h-14 、 animate-[flip_5s_infinite] 和 bg-red-100 類代表容器內(nèi)的內(nèi)容具有14個(gè)單位的高度,紅色背景色,并應(yīng)用了“翻轉(zhuǎn)”動(dòng)畫效果,使其垂直來回連續(xù)旋轉(zhuǎn)。
用途:我們可以將此動(dòng)畫用于加載數(shù)據(jù)、文件或圖像處理或上傳。
Tailwind CSS的動(dòng)畫功能可以與框架提供的其他功能無縫集成。例如,您可以將動(dòng)畫與響應(yīng)式設(shè)計(jì)類結(jié)合使用,以在各種設(shè)備上創(chuàng)建適應(yīng)性和引人入勝的用戶體驗(yàn)。
您還可以利用Tailwind CSS的暗模式功能,根據(jù)用戶的首選顏色方案應(yīng)用不同的動(dòng)畫效果。通過使用動(dòng)態(tài)類和實(shí)用程序變體,您可以創(chuàng)建復(fù)雜而交互式的動(dòng)畫,以增強(qiáng)您的網(wǎng)頁設(shè)計(jì)。
上述設(shè)計(jì)的動(dòng)畫展示了使用CSS和Tailwind CSS框架可以實(shí)現(xiàn)的多樣性和創(chuàng)造力。這些示例展示了各種動(dòng)畫效果,如旋轉(zhuǎn)、彈跳、脈動(dòng)、翻轉(zhuǎn)和擺動(dòng)。
通過利用CSS關(guān)鍵幀和Tailwind CSS實(shí)用類的力量,這些動(dòng)畫為博客或網(wǎng)站帶來了動(dòng)態(tài)和引人入勝的元素。無論是旋轉(zhuǎn)圖標(biāo)、彈跳形狀還是擺動(dòng)文本,這些動(dòng)畫都可以吸引用戶的注意力,增強(qiáng)視覺體驗(yàn)。
此外,Tailwind CSS 配置文件中的自定義和定義關(guān)鍵幀的能力使得動(dòng)畫能力得以精細(xì)調(diào)整和擴(kuò)展。這種靈活性賦予開發(fā)者創(chuàng)造獨(dú)特且引人注目的效果,以滿足其特定設(shè)計(jì)需求的能力。
總的來說,將動(dòng)畫效果融入博客中可以幫助創(chuàng)造令人難忘和愉悅的用戶體驗(yàn),給訪問者留下深刻的印象。然而,重要的是要謹(jǐn)慎使用動(dòng)畫效果,并考慮它們對(duì)性能和可訪問性的影響,以確保所有用戶都能享受無縫和包容的瀏覽體驗(yàn)。
由于文章內(nèi)容篇幅有限,今天的內(nèi)容就分享到這里,文章結(jié)尾,我想提醒您,文章的創(chuàng)作不易,如果您喜歡我的分享,請(qǐng)別忘了點(diǎn)贊和轉(zhuǎn)發(fā),讓更多有需要的人看到。同時(shí),如果您想獲取更多前端技術(shù)的知識(shí),歡迎關(guān)注我,您的支持將是我分享最大的動(dòng)力。我會(huì)持續(xù)輸出更多內(nèi)容,敬請(qǐng)期待。
心箭頭
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>實(shí)心箭頭</title>
<style>
.con{
width: 300px;
height: 300px;
border: 1px solid #ccc;
margin: 50px auto;
background-color:#ccc;
}
.arrow-top{
border-bottom: 10px solid #fff;
border-right: 10px solid #fff;
border-left: 10px solid #fff;
border-top: 10px solid #ccc;
width: 0px;
height: 0px;
position: relative;
top:-40px;
left:100px;
}
.arrow-bottom{
border-bottom: 10px solid #fff;
border-right: 10px solid #fff;
border-left: 10px solid #fff;
border-top: 10px solid #ccc;
width: 0px;
height: 0px;
position: relative;
top:-40px;
left:100px;
}
</style>
</head>
<body>
<div class="con">
<div class="arrow-top"> </div>
</div>
</body>
</html>
非實(shí)心箭頭
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。