如何为html网站按钮添加安卓Material Design涟漪动效
本文最后更新于 78 天前,其中的信息可能已经有所发展或是发生改变。

1. 引入 Material Design 库

首先,确保在项目中引入了 Material Design 的 CSS 和 JavaScript 库。

<!-- Material Design Lite CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

<!-- Material Design Lite JavaScript -->
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

2. 创建按钮

使用 Material Design 的类来创建按钮。

<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
  按钮实例
</button>

3. 添加 Ripple 效果

mdl-js-ripple-effect 类会自动为按钮添加点击时的涟漪效果。

4. 自定义动效

如果需要更复杂的动效,可以使用 CSS 或 JavaScript 自定义。

使用 CSS 自定义动效

例如,添加一个缩放效果:

.mdl-button {
  transition: transform 0.3s ease;
}

.mdl-button:active {
  transform: scale(0.95);
}

使用 JavaScript 自定义动效

例如,点击时改变背景颜色:

document.querySelector('.mdl-button').addEventListener('click', function() {
  this.style.backgroundColor = '#ff4081';
});

5. 使用 Material Components Web

如果需要更丰富的组件和动效,可以使用 Material Components Web。

<!-- Material Components Web CSS -->
<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">

<!-- Material Components Web JavaScript -->
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

然后使用 mdc-button 类:

<button class="mdc-button mdc-button--raised">
  <span class="mdc-button__label">按钮实例</span>
</button>

6. 使用动画库

如果需要更复杂的动效,可以结合动画库如 Animate.cssGSAP

<!-- Animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

然后为按钮添加动画类:

<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect animate__animated animate__bounce">
  点击我
</button>

7.总结

通过引入 Material Design 库并使用其提供的类,可以轻松为按钮添加动效。如果需要更复杂的动效,可以结合 CSS、JavaScript 或动画库来实现

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇