整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
<button type="button|reset|submit">按鈕標簽一般很少使用，提供“普通|重置|提交”功能，不同的瀏覽器默認值不同。
1、div就是html —個普通標簽，進行區(qū)域劃分
2、特性：獨自占一行
3、獨自不能實現(xiàn)復雜效果
4、必 須結合CSS樣式進行渲染
5、div通常其是塊級元素
這里我用的是vue框架和element ui組件庫寫的。主要就是一個點擊事件和一個for循環(huán)。
HTML
<div id="app">
<!-- 導航欄 -->
<div id="nav">
<router-link
@click.native="dianji(index)"
:class="{ clk: index==dynamic }"
v-for="(item, index) in navArr"
:key="index"
:to="item.path">
{{ item.content }}
</router-link>
</div>
<router-view />
</div>
@click.native和@click差不多，但是router-link會阻止click事件，所有加一個native就可以了。
JS
<script>
export default {
name: "app",
data() {
return {
// 導航按鈕數(shù)組
navArr: [
{ path: "/one", content: "第一個按鈕" },
{ path: "/two", content: "第二個按鈕" },
{ path: "/three", content: "第三個按鈕" },
{ path: "/four", content: "第四個按鈕" },
],
dynamic:0, //默認第一個
};
},
methods: {
// 點擊切換導航欄背景色
dianji: function (index) {
this.dynamic=index;
},
},
};
</script>
css這里我就不寫了，就幾行代碼。
沒了，結束了，是不是很簡單吶，如有問題，歡迎留言。
如果此篇博文對您有幫助，還請動動小手點贊 收藏 ?留言 吶~，謝謝 ~ ~
文通過 CSS 和一個開源包來實現(xiàn)五彩紙屑按鈕效果。
使用 html:5 和 div.wrapper>button.btn-confetti 快速創(chuàng)建頁面容器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<button class="btn-confetti"></button>
</div>
</body>
</html>
增加對 body 元素的 grid 布局，同時給它設置了高度 100vh，使子元素水平垂直居中。給 button 按鈕增加了漸變背景色，并使用了 transition 動畫。注意樣式中使用了原生 CSS 嵌套語法。
body {
display: grid;
place-items: center;
height: 100vh;
}
.wrapper {
position: relative;
.btn-confetti {
font-size: 1.15rem;
font-weight: 700;
padding: 0.75em 1.5em;
border: 0;
border-radius: 100vmax;
background: linear-gradient(90deg, #a8ff78 50%, #78ffd6);
cursor: pointer;
transition: transform 150ms ease-in-out;
&:hover {
transform: scale(1.1);
}
}
}
五彩紙屑使用了一個開源的 NPM 包 canvas-confetti，你可以通過 npm i canvas-confetti 快速安裝使用，在本 demo 中直接使用的是 CDN 鏈接。
我們首先給按鈕綁定一個點擊事件，當按鈕被點擊時觸發(fā)五彩紙屑的噴發(fā)的效果。
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.0/dist/confetti.browser.min.js"></script>
<script>
const $confettiBtn=document.querySelector('.btn-confetti');
$confettiBtn.addEventListener('click', ()=> {
const $canvas=document.createElement('canvas');
const $wrapper=document.querySelector('.wrapper');
$canvas.width=600;
$canvas.height=600;
$wrapper.appendChild($canvas);
// 初始化 confetti
const confettiBtn=window.confetti.create($canvas);
// 噴發(fā)后
confettiBtn().then(()=> $canvas.remove());
});
</script>
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
