现代CSS：使用 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.效果预览

ss实现常用的开关按钮功能，常用在一些网站的设置页面中，一般用在手机端的页面比较多，实现的做法有很多，可以利用图片完成，也可以用css和js完成！具体效果如下：

实现代码：

html结构：

css样式：

js:

文中我们对CSS超炫加载动画设计、实现与实例进行了讲解与说明，通过学习可知使用CSS提供的animation属性及伪元素等可以实现精美的CSS动画效果的设计与开发。本文我们将继续介绍CSS在Web页面元素设计中的应用。

纯CSS实现开关元素设计

按钮开关设计要求及效果

本例我们使用CSS完成开关的设计，主要要求是在点击开关时开关标识颜色需要改变，另外需要体现出元素点击前与点击后的动态变化与立体效果。本例最终设计呈现效果描述如下图所示：

开关按钮实现效果展示

设计思路与语法说明

要实现如上图所示的开关按钮效果，需要针对元素改变鼠标点击前后的CSS样式，因为只使用CSS实现，我们选择本身具有点击属性的INPUT元素。因此还需要考虑对INPUT元素外观进行设置，其设置也主要是依托于CSS选择器及相关属性的设置。

CSS选择器及属性设置

另一方面本例中出现的开关标志，主要使用第三方字体库提供的图标实现，因此需要对font相关属性及CSS外部link方法有所学习掌握。本例所使用字体如下所示：

字体图标

在明确基本思路之后，我们可以使用submine进行代码编写，主要编写步骤如下：

1、链接字体样式

本例使用如上图所示提供的on图标，即Font Awesome图标字体库和CSS框架，因此需要外部链接或者下载相应CSS文件，这里我们选择外部链接，通过使用CSS提供的link，实现代码如下：

字体链接

链接完成之后我们在设置字体时可直接使用FontAwesome字体，其中on图标对应的编码为f011。

2、定义页面内容

本例页面内容主要使用input元素checkbox属性进行按钮设置。因此页面内容部分定义如下所示：

页面主体部分

3、定义checkbox样式

在完成页面元素添加之后就需要对页面元素进行CSS样式的设置，本例通过元素加type属性作为选择器，选择指定元素并进行样式设置。代码如下：

checkbox属性设置

checkbox属性设置描述如上图所示，设置效果如下：

checkbox属性效果

4、input添加checked、after等样式

为进一步实现点击效果切换及图标按钮的效果，需要对check状态及after伪元素进行CSS样式的设置。其中after为元素主要用于在上图中添加on开关图标。实现代码描述如下：

after伪元素选择器及样式设置

after伪元素选择器及样式设置如上图所示，主要完成content内容即on图标设置，字体选择、字体颜色及字体大小设置，设置完成预览效果如下：

after为元素设置效果

要实现点击效果就需要在点击之后对input元素样式进行设置，因此我们使用checked作为选择器对该状态下input样式进行设置。设置代码如下所示：

checked状态CSS设置

checked状态CSS设置如上图所示，我们只对box-shadow阴影进行设置，通过阴影变化实现按钮动态效果。

5、点击之后on图标颜色变化

点击之后on图标颜色变化主要通过对input[type="checkbox"]:checked，进一步使用after伪元素定义字体颜色实现。实现代码如下所示：

on图标（字体）颜色改变

通过使用该选择器，会在input点击之后，on字体颜色变为红色。以上给出了input按钮效果实现的基本思路与部分核心实现代码。如需完整案例代码请关注并私信作者。

本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可在评论区回复。更多程序设计相关教程及实例分享，期待大家关注与阅读！

在线咨询

上一篇：这个证书只能四川报名和考试，赶快抓紧
下一篇：哪些 Python 库让你相见恨晚？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商