使用css和js給按鈕添加微交互的幾種方式
在現(xiàn)實(shí)世界中，當(dāng)我們輕彈或按下某些東西時(shí)，它們會(huì)發(fā)出咔嗒聲，例如電燈開(kāi)關(guān)。有些東西會(huì)亮起或發(fā)出蜂鳴聲，這些響應(yīng)都是“微交互”，讓我們知道我們何時(shí)成功完成了某件事。在本文中，我們將學(xué)習(xí)向網(wǎng)頁(yè)按鈕添加微交互的幾種簡(jiǎn)單方法。
什么是微交互
微交互是用戶界面上的小交互或動(dòng)畫(huà)。當(dāng)用戶執(zhí)行操作時(shí)，它們向用戶提供即時(shí)反饋。微交互可以保持用戶的參與度并可以改善他們的整體體驗(yàn)。
微交互的一些示例包括我們與某人在線聊天時(shí)的打字指示器、下載的進(jìn)度條以及刷新頁(yè)面時(shí)的加載指示器。
按鈕是網(wǎng)站上最常見(jiàn)的交互元素之一，它們可以執(zhí)行一系列任務(wù)，例如切換、提交、刪除、關(guān)閉、選擇（通過(guò)單選按鈕、選項(xiàng)按鈕或選擇菜單）等。
基本樣式
<style>
* {
margin: 0;
padding: 0
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
</style>
有彈性的微交互
我們可以使用 CSS的transform屬性創(chuàng)建一個(gè) 3D 按鈕，單擊它時(shí)該按鈕會(huì)彈起。
<button class="btn"><span class="text">提交</span></button>
對(duì)于此示例，我們?cè)?code><button>中嵌套了一個(gè)<span>. 通常，創(chuàng)建按鈕時(shí)不需要這樣做，但我們需要它來(lái)創(chuàng)建按鈕的最終 3D 外觀。
.btn {
position: relative;
background: #004958;
border-radius: 15px;
border: none;
cursor: pointer;
}
.text {
display: block;
padding: 15px 45px;
border-radius: 15px;
background: #00c2cb;
font-size: 1.5rem;
font-weight: 500;
color: #42455a;
transform: translateY(-6px);
transition: transform ease 0.1s;
}
.btn:active .text {
transform: translateY(-2px);
}
帶邊框動(dòng)畫(huà)的按鈕
有多種方法可以為按鈕的邊框設(shè)置動(dòng)畫(huà)，因此我們將展示幾個(gè)示例。
簡(jiǎn)單的邊框微交互
讓我們從簡(jiǎn)單的事情開(kāi)始。通常，如果我們想向任何元素添加邊框，我們會(huì)使用border 屬性。但是在CSS中，也有outline屬性，這倆非常相似。它在元素周圍添加輪廓。輪廓會(huì)覆蓋它們所應(yīng)用的元素，這意味著它們是圍繞邊框繪制的。
它們甚至以相同的方式聲明。以下是帶有輪廓和邊框的按鈕示例：
button {
border: 3px solid cyan;
outline: 3px solid red;
}
下面的屏幕截圖顯示了它的樣子:
輪廓不會(huì)影響主元素（在本例中為按鈕）的尺寸，并且它們可以重疊其他內(nèi)容或元素。我們還可以使用outline-offset屬性更改他們的位置。
正偏移值會(huì)將輪廓向外推，遠(yuǎn)離邊框。負(fù)值將起到相反的作用。因此，例如，如果我們想隱藏輪廓，我們需要為其指定邊框?qū)挾鹊呢?fù)值。這就是我們?yōu)榘粹o創(chuàng)建微交互的動(dòng)畫(huà)：
<button class="btn">提交</button>
button {
border: none;
position: relative;
padding: 15px 45px;
background: transparent;
border-radius: 10px;
border: 2px solid #00c2cb;
outline: 2px solid #00c2cb;
outline-offset: -2px;
font-size: 1.5rem;
color: #00c2cb;
font-weight: 500;
cursor: pointer;
transition: outline-offset 200ms ease;
}
button:hover {
outline-offset: 3px;
}
button:active{
transform: scale(0.95);
}
帶有偽元素的按鈕懸停效果
我們將使用::before和::after偽元素以及inset屬性來(lái)創(chuàng)建一些漂亮的邊框動(dòng)畫(huà)。
我們將逐步設(shè)置我們的樣式，先設(shè)置button樣式：
button {
position: relative;
background: transparent;
padding: 15px 45px;
border-radius: 15px;
border: none;
font-size: 1.5rem;
color: #e0ffff;
font-weight: 500;
cursor: pointer;
z-index: 1;
}
把insert添加到::before該按鈕的偽元素中。它的值為0px 50px，因此它僅適用于 y 軸（inset屬性將元素水平和垂直地推離其父元素）
button::before {
content: '';
position: absolute;
inset: 0px 50px;
background: #42455a;
transition: inset 350ms ease;
z-index: -1;
}
::after偽元素將覆蓋::before偽元素，留下一個(gè)inset大小的間隙，從而創(chuàng)建一個(gè)邊框。
button::after {
content: '';
position: absolute;
inset: 3px;
border-radius: 10px;
background: #22232e;
z-index: -1;
}
為了獲得最終的外觀，我們將添加<button>元素添加overflow: hidden。這將刪除方角并完成該按鈕的微交互。
整體代碼：
button {
position: relative;
overflow: hidden;
background: transparent;
padding: 15px 45px;
border-radius: 15px;
border: none;
font-size: 1.5rem;
color: #e0ffff;
font-weight: 500;
cursor: pointer;
z-index: 1;
}
button:active{
transform: scale(0.95);
}
button::before{
content: '';
position: absolute;
inset: -3px 50px;
background: #42455a;
transition: inset 350ms ease;
z-index: -2;
}
button:hover::before{
inset: -20px 0px;
background: #00c2cb;
}
button::after{
content: '';
position: absolute;
inset: 3px;
border-radius: 10px;
background: #22232e;
z-index: -1;
}
漣漪微交互
我們將在單擊按鈕時(shí)為其添加漣漪效果。它可以位于按鈕內(nèi)或按鈕周圍。
我們將使用一些 JavaScript 來(lái)創(chuàng)建這種微交互。設(shè)置按鈕樣式后的 JavaScript 代碼如下:
let btn = document.querySelectorAll("button");
btn.forEach((btn) => {
btn.onclick = function (e) {
let x = e.pageX - e.target.offsetLeft;
let y = e.pageY - e.target.offsetTop;
let ripples = document.createElement("span");
ripples.style.left = x + "px";
ripples.style.top = y + "px";
this.appendChild(ripples);
setTimeout(() => {
ripples.remove();
}, 2000);
};
});
click 函數(shù)跟蹤鼠標(biāo)單擊的 x 和 y 位置并創(chuàng)建一個(gè)新<span>元素。每個(gè)都<span>代表一個(gè)漣漪，之后使用setTimeout()方法在兩秒后將其刪除。
我們使用 CSS 動(dòng)畫(huà)來(lái)更改其大小和不透明度。這將產(chǎn)生連鎖反應(yīng)。
button{
position: relative;
padding: 15px 45px;
font-size: 1.5rem;
border-radius: 15px;
border: none;
background: #00c2cb;
color: #22232e;
overflow: hidden;
cursor: pointer;
}
button span {
position: absolute;
background: #004958;
transform: translate(-50%,-50%);
pointer-events: none;
border-radius: 50%;
animation: ripple 2s linear infinite;
transition: 0.5s;
}
@keyframes ripple {
0% {
width: 0;
height: 0;
opacity: 0.5;
}
100% {
width: 500px;
height: 500px;
opacity: 0;
}
}
發(fā)光
讓按鈕在懸停時(shí)發(fā)光。我們需要偽元素和box-shadow屬性的組合。
<button><span class="btn-text">Click me</span></button>
button {
display: flex;
justify-content: center;
align-items: center;
background: transparent;
position: relative;
background: #22232e;
border: none;
border-radius: 15px;
}
button .btn-text{
padding: 14px 45px;
font-size: 25px;
color: #e0ffff;
border: 2px solid rgba(255,255,255,0.1);
border-radius: 15px;
backdrop-filter: blur(15px);
background: rgba(0,73,88,0.05);
cursor: pointer;
z-index: 1;
transition: 0.2s;
}
此時(shí)，我們應(yīng)該有一個(gè)看起來(lái)很普通的按鈕。要在底部添加欄，我們將使用::before偽元素：
button::before {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -5px;
width: 25%;
height: 10px;
background: #00c2cb;
border-radius: 10px;
transition: .5s;
box-shadow: 0 0 10px rgba(0,194,203,0.5);
}
添加box-shadow了就有了發(fā)光效果。
為了完成這個(gè)微交互，我們將增加懸停時(shí)偽元素的大小
button:hover::before {
bottom: 0;
height: 40%;
width: 90%;
border-radius: 30px;
transition-delay: 0.5s;
}
整體代碼：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-621531.html
button {
display: flex;
justify-content: center;
align-items: center;
background: transparent;
position: relative;
background: #22232e;
border: none;
border-radius: 15px;
}
button .btn-text{
padding: 14px 45px;
font-size: 25px;
color: #e0ffff;
border: 2px solid rgba(255,255,255,0.1);
border-radius: 15px;
backdrop-filter: blur(15px);
background: rgba(0,73,88,0.05);
cursor: pointer;
z-index: 1;
transition: 0.2s;
}
button::before{
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -5px;
width: 25%;
height: 10px;
background: #00c2cb;
border-radius: 10px;
transition: .5s;
box-shadow: 0 0 10px rgba(0,194,203,0.5);
}
button:hover::before{
bottom: 0;
height: 40%;
width: 90%;
border-radius: 30px;
transition-delay: 0.5s;
}
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-621531.html
到了這里，關(guān)于使用css和js給按鈕添加微交互的幾種方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
