在现实世界中，当我们轻弹或按下某些东西时，它们会发出咔嗒声，例如电灯开关。有些东西会亮起或发出蜂鸣声，例如 ATM 上的按钮。这些响应都是“微交互”，让我们知道我们何时成功完成了某件事。在本文中，我们将学习向网页按钮添加微交互的十种简单方法。 Backward Skip 10s Play Video Forward Skip 10s 目录 什么是微交互？ 微交互是用户界面上的小交互或动画。当用户执行操作时，它们向用户提供即时反馈。微交互可以保持用户的参与度并可以改善他们的整体体验。 微交互的一些示例包括我们与某人在线聊天时的打字指示器、下载的进度条以及刷新页面时的加载指示器。 按钮是网站上最常见的交互元素之一，它们可以执行一系列任务，例如切换、提交、删除、关闭、选择（通过单选按钮、选项按钮或选择菜单）等。
Learn to Code with JavaScript 有弹性的3D微交互 我们可以使用 CSStransform属性创建一个 3D 按钮，单击它时该按钮会弹起。在我们开始之前，下图显示了我们的目标。 蓝色按钮元素，在深色背景上显示“Click Me”，并带有底部阴影 这是该按钮的 HTML对于此示例，我们<span>在<button>. 通常，创建 印度手机号码列表 按钮时不需要这样做，但我们需要它来创建按钮的最终 3D 外观。 的类名为btn，<span>保存“Click Me”文本的 的类名为text。这些元素将形成按钮的两个不同部分——顶部和侧面。 这是按钮的 CSS下面的屏幕截图显示了此时的情况。 Learn to Code with JavaScript 我们的基本按钮，没有所有最终样式 为了创建按钮的侧面，我们将使用该transform属性将文本向上移动。这将创建 3D 外观。
然后，我们将通过沿 y 轴垂直更改其平移值来设置此属性的动画，以在单击按钮时（即，当它处于 时:active）创建弹性效果 下面的 Pen 显示了实际效果。现在，当单击按钮时向上和向下移动时，用户可以获得视觉反馈。 为按钮添加点击声音 声音可以是微交互的一种形式，例如单击鼠标按钮时的声音。对于使用平板电脑和移动设备的用户来说，将声音与网页上的操作关联起来尤其有用。 首先，这是该按钮的 HTML： Learn to Code with JavaScript 对于这个例子，为此，我们将向onmousedown按钮添加一个事件样式并不重要。为了复制物理按钮点击的声音，我们需要一些 JavaScript。我们将创建一个Audio对象，并指定点击声的来源： var mouseclick = new Audio(); mouseclick.src = "/click.wav"; 当用户单击按钮时，将播放此声音。
发表于 2024-1-9 17:29:55
