表單按鈕標簽的使用

：按鈕標簽：button

<button type="button|reset|submit">按鈕標簽一般很少使用，提供“普通|重置|提交”功能，不同的瀏覽器默認值不同。

二：DIV

1、div就是html —個普通標簽，進行區域劃分
2、特性：獨自占一行
3、獨自不能實現復雜效果
4、必須結合CSS樣式進行渲染
5、div通常其是塊級元素

決點擊導航欄點擊哪個，哪個就高亮變色，其他恢復原狀。

這里我用的是vue框架和element ui組件庫寫的。主要就是一個點擊事件和一個for循環。

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就可以了。

<script>
export default {
  name: "app",
  data() {
    return {
      // 導航按鈕數組
      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 和一個開源包來實現五彩紙屑按鈕效果。

1.創建頁面框架

使用 html:5 和 div.wrapper>button.btn-confetti 快速創建頁面容器。

<!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>

2.增加基礎樣式

增加對 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);
    }
  }
}

3.實現五彩紙屑

五彩紙屑使用了一個開源的 NPM 包 canvas-confetti，你可以通過 npm i canvas-confetti 快速安裝使用，在本 demo 中直接使用的是 CDN 鏈接。

我們首先給按鈕綁定一個點擊事件，當按鈕被點擊時觸發五彩紙屑的噴發的效果。

<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);

  // 噴發后
  confettiBtn().then(()=> $canvas.remove());
});
</script>

4.效果預覽

在線咨詢

上一篇：Antv G6 拖拽生成節點
下一篇：成為HTML5大神必備的利器

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商