使用css和js给按钮添加微交互的几种方式

news2024/11/9 10:26:29

使用css和js给按钮添加微交互的几种方式

在现实世界中,当我们轻弹或按下某些东西时,它们会发出咔嗒声,例如电灯开关。有些东西会亮起或发出蜂鸣声,这些响应都是“微交互”,让我们知道我们何时成功完成了某件事。在本文中,我们将学习向网页按钮添加微交互的几种简单方法。

什么是微交互

微交互是用户界面上的小交互或动画。当用户执行操作时,它们向用户提供即时反馈。微交互可以保持用户的参与度并可以改善他们的整体体验。

微交互的一些示例包括我们与某人在线聊天时的打字指示器、下载的进度条以及刷新页面时的加载指示器。

按钮是网站上最常见的交互元素之一,它们可以执行一系列任务,例如切换、提交、删除、关闭、选择(通过单选按钮、选项按钮或选择菜单)等。

基本样式

<style>
  * {
    margin: 0;
    padding: 0
  }
  body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

有弹性的微交互

我们可以使用 CSStransform属性创建一个 3D 按钮,单击它时该按钮会弹起。

<button class="btn"><span class="text">提交</span></button>

对于此示例,我们在<button>中嵌套了一个<span>. 通常,创建按钮时不需要这样做,但我们需要它来创建按钮的最终 3D 外观。

.btn {
  position: relative;
  background: #004958;
  border-radius: 15px;
  border: none;
  cursor: pointer;
}

.text {
  display: block;
  padding: 15px 45px;
  border-radius: 15px;
  background: #00c2cb;
  font-size: 1.5rem;
  font-weight: 500;
  color: #42455a;
  transform: translateY(-6px);
  transition: transform ease 0.1s;
}

.btn:active .text {
  transform: translateY(-2px);
}

请添加图片描述

带边框动画的按钮

有多种方法可以为按钮的边框设置动画,因此我们将展示几个示例。

简单的边框微交互

让我们从简单的事情开始。通常,如果我们想向任何元素添加边框,我们会使用border 属性。但是在CSS中,也有outline属性,这俩非常相似。它在元素周围添加轮廓。轮廓会覆盖它们所应用的元素,这意味着它们是围绕边框绘制的。

它们甚至以相同的方式声明。以下是带有轮廓和边框的按钮示例:

button {
  border: 3px solid cyan;
  outline: 3px solid red;
}

下面的屏幕截图显示了它的样子:

在这里插入图片描述

轮廓不会影响主元素(在本例中为按钮)的尺寸,并且它们可以重叠其他内容或元素。我们还可以使用outline-offset属性更改他们的位置。

正偏移值会将轮廓向外推,远离边框。负值将起到相反的作用。因此,例如,如果我们想隐藏轮廓,我们需要为其指定边框宽度的负值。这就是我们为按钮创建微交互的动画:

<button class="btn">提交</button>
button {
  border: none;
  position: relative;
  padding: 15px 45px;
  background: transparent;
  border-radius: 10px;
  border: 2px solid #00c2cb;
  outline: 2px solid #00c2cb;
  outline-offset: -2px;
  font-size: 1.5rem;
  color: #00c2cb;
  font-weight: 500;
  cursor: pointer;
  transition: outline-offset 200ms ease;
}

button:hover {
  outline-offset: 3px;
}
button:active{
  transform: scale(0.95);
}

请添加图片描述

带有伪元素的按钮悬停效果

我们将使用::before::after伪元素以及inset属性来创建一些漂亮的边框动画。

我们将逐步设置我们的样式,先设置button样式:

button {
  position: relative;
  background: transparent;
  padding: 15px 45px;
  border-radius: 15px;
  border: none;
  font-size: 1.5rem;
  color: #e0ffff;
  font-weight: 500;
  cursor: pointer;
  z-index: 1;
}

insert添加到::before该按钮的伪元素中。它的值为0px 50px,因此它仅适用于 y 轴(inset属性将元素水平和垂直地推离其父元素)

button::before {
  content: '';
  position: absolute;
  inset: 0px 50px;
  background: #42455a;
  transition: inset 350ms ease;
  z-index: -1;
}

::after伪元素将覆盖::before伪元素,留下一个inset大小的间隙,从而创建一个边框。

button::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 10px;
  background: #22232e;
  z-index: -1;
}

为了获得最终的外观,我们将添加<button>元素添加overflow: hidden。这将删除方角并完成该按钮的微交互。

整体代码:

button {
  position: relative;
  overflow: hidden;
  background: transparent;
  padding: 15px 45px;
  border-radius: 15px;
  border: none;
  font-size: 1.5rem;
  color: #e0ffff;
  font-weight: 500;
  cursor: pointer;
  z-index: 1;
}
button:active{
  transform: scale(0.95);
}
button::before{
  content: '';
  position: absolute;
  inset: -3px 50px;
  background: #42455a;
  transition: inset 350ms ease;
  z-index: -2;
}
button:hover::before{
  inset: -20px 0px;
  background: #00c2cb;
}
button::after{
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 10px;
  background: #22232e;
  z-index: -1;
}

请添加图片描述

涟漪微交互

我们将在单击按钮时为其添加涟漪效果。它可以位于按钮内或按钮周围。

我们将使用一些 JavaScript 来创建这种微交互。设置按钮样式后的 JavaScript 代码如下:

let btn = document.querySelectorAll("button");
btn.forEach((btn) => {
  btn.onclick = function (e) {
    let x = e.pageX - e.target.offsetLeft;
    let y = e.pageY - e.target.offsetTop;
    let ripples = document.createElement("span");

    ripples.style.left = x + "px";
    ripples.style.top = y + "px";
    this.appendChild(ripples);

    setTimeout(() => {
      ripples.remove();
    }, 2000);
  };
});

click 函数跟踪鼠标单击的 xy 位置并创建一个新<span>元素。每个都<span>代表一个涟漪,之后使用setTimeout()方法在两秒后将其删除。

我们使用 CSS 动画来更改其大小和不透明度。这将产生连锁反应。

button{
  position: relative;
  padding: 15px 45px;
  font-size: 1.5rem;
  border-radius: 15px;
  border: none;
  background: #00c2cb;
  color: #22232e;
  overflow: hidden;
  cursor: pointer;
}
button span {
  position: absolute;
  background: #004958;
  transform: translate(-50%,-50%);
  pointer-events: none;
  border-radius: 50%;
  animation: ripple 2s linear infinite;
  transition: 0.5s;
}

@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.5;
  }
  100% {
    width: 500px;
    height: 500px;
    opacity: 0;
  }
}

请添加图片描述

发光

让按钮在悬停时发光。我们需要伪元素和box-shadow属性的组合。

<button><span class="btn-text">Click me</span></button>
button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  position: relative;
  background: #22232e;
  border: none;
  border-radius: 15px;
}
button .btn-text{
  padding: 14px 45px;
  font-size: 25px;
  color: #e0ffff;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 15px;
  backdrop-filter: blur(15px);
  background: rgba(0,73,88,0.05);
  cursor: pointer;
  z-index: 1;
  transition: 0.2s;
}

此时,我们应该有一个看起来很普通的按钮。要在底部添加栏,我们将使用::before伪元素:

button::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5px;
  width: 25%;
  height: 10px;
  background: #00c2cb;
  border-radius: 10px;
  transition: .5s;
  box-shadow: 0 0 10px rgba(0,194,203,0.5);
}

添加box-shadow了就有了发光效果。

为了完成这个微交互,我们将增加悬停时伪元素的大小

button:hover::before {
  bottom: 0;
  height: 40%;
  width: 90%;
  border-radius: 30px;
  transition-delay: 0.5s;
}

整体代码:

button {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  position: relative;
  background: #22232e;
  border: none;
  border-radius: 15px;
}
button .btn-text{
  padding: 14px 45px;
  font-size: 25px;
  color: #e0ffff;
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 15px;
  backdrop-filter: blur(15px);
  background: rgba(0,73,88,0.05);
  cursor: pointer;
  z-index: 1;
  transition: 0.2s;
}
button::before{
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5px;
  width: 25%;
  height: 10px;
  background: #00c2cb;
  border-radius: 10px;
  transition: .5s;
  box-shadow: 0 0 10px rgba(0,194,203,0.5);
}
button:hover::before{
  bottom: 0;
  height: 40%;
  width: 90%;
  border-radius: 30px;
  transition-delay: 0.5s;
}

请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/819048.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

切片[::-1]解析列表list表示的“非负整数加1”

列表数位表示非负整数&#xff0c;熟练操作“满十进位”。 (本笔记适合熟练操作Python列表list的 coder 翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&#xff1a;大咖免费“圣经”教程《 python 完全自学教程》&#xff0c;不仅仅…

一文搞定Java NIO,以及ZipInputStream、ByteArrayInputStream各种奇葩流

目录 一、Channel1、FileChannel代码示例2、DatagramChannel代码示例3、SocketChannel 和 ServerSocketChannel代码示例 二、Buffer1、ByteBuffer示例代码2、CharBuffer示例代码3、ShortBuffer、IntBuffer、LongBuffer、FloatBuffer、DoubleBuffer 等示例代码 三、Selector1、S…

MTK system_server 卡死导致手机重启案例分析

和你一起终身学习&#xff0c;这里是程序员Android 经典好文推荐&#xff0c;通过阅读本文&#xff0c;您将收获以下知识点: 一、MTK AEE Log分析工具二、AEE Log分析流程三、system_server 卡死案例分析及解决 本文主要针对 Exception Type: system_server_watchdog , system_…

激光雷达供不应求?产能过剩、毛利下滑、定点兑付风险凸显

激光雷达&#xff0c;已经供不应求&#xff1f; 以小鹏最新上市的G6车型为例&#xff0c;目前该车的Max版本在官网下订的交付时间为12周&#xff0c;原因之一就是激光雷达等核心零部件交付吃紧。 截图来自网络&#xff08;晚点Auto公众号&#xff09; 那么事实是否如此&#xf…

【Vue2.x源码系列05】异步更新及nextTick原理

vue 官网中是这样描述 nextTick 的 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法&#xff0c;可以获取更新后的 DOM。 在学习 nextTick 是如何实现之前&#xff0c;我们要先了解下 JavaScript 的执行机制 JavaScript 执行机制 浏览器是多线程的&…

Kindling the Darkness: A Practical Low-light Image Enhancer论文阅读笔记

这是ACMMM2019的一篇有监督暗图增强的论文&#xff0c;KinD其网络结构如下图所示&#xff1a; 首先是一个分解网络分解出R和L分量&#xff0c;然后有Restoration-Net和Adjustment-Net分别去对R分量和L分量进一步处理&#xff0c;最终将处理好的R分量和L分量融合回去。这倒是很常…

简要介绍 | 航行家的视觉:理解Odometry, Relocalization和SLAM的区别与联系

注1&#xff1a;本文系“简要介绍”系列之一&#xff0c;仅从概念上对计算机视觉和机器人导航中的Odometry、Relocalization和SLAM进行非常简要的介绍&#xff0c;不适合用于深入和详细的了解。 航行家的视觉&#xff1a;理解Odometry, Relocalization和SLAM的区别与联系 Senso…

什么样台灯能保护眼睛?分享眼科医生推荐的台灯好物

很多时候&#xff0c;我们在挑选台灯时只关注了台灯的亮度是否足够&#xff0c;以为只要台灯够亮就不会伤眼睛。而实际上我们大多数视力的下降原因就与光有着非常大的关系&#xff0c;传统的白炽灯、荧光灯等等对我们这一辈造成的伤害就不多说了。如今条件好了&#xff0c;而LE…

高等数学教材啃书汇总难点(一)函数与极限

教材为理工科标配的同济大学第七版&#xff0c;本系列为一轮啃书&#xff0c;将必会的全部重难点悉数总结——尤其是各种晦涩的理论证明部分&#xff0c;考研数学一的选手&#xff0c;想冲击高分的话必须掌握。对于考研证明题部分&#xff0c;熟练掌握定义是必不可少的底层基础…

StoneDB亮相2023数据技术嘉年华:增强AP、升级TP、信创替换,让万千DBA用得更省心,企业用得更省钱

2023 年 4 月 8 日&#xff0c;第十二届『数据技术嘉年华』(DTC 2023) 在北京圆满举办。本届大会以“开源 融合 数智化 —— 引领数据技术发展&#xff0c;释放数据要素价值”为主题。大会汇聚众多优秀厂商、先进技术、卓越产品和优秀案例&#xff0c;来自数据领域的领军人物…

C语言指针进阶-2

本篇文章带 1. 数组传参和指针传参 2. 函数指针 3. 函数指针数组 的相关知识详细讲解&#xff01; 如果您觉得文章不错&#xff0c;期待你的一键三连哦&#xff0c;你的鼓励是我创作动力的源泉&#xff0c;让我们一起加油&#xff0c;一起奔跑&#xff0c;让我们顶峰相见&…

明明已经安装字体,但IDEA、CLION无法找到思源黑体/Source Hans Sans的问题解决

IDEA、CLION的Jetbrain系列软件不支持非TrueType的中文字体&#xff0c;而Adobe官方给出的字体却不是TrueType的&#xff0c;所以便会导致Jetbrain系软件无法找到已安装的中文字体&#xff0c;因此我们需要安装TrueType的字体 请在以下Github链接中下载&#xff1a; TrueType思…

HTTP——返回结果的HTTP状态码

HTTP 一、状态码告知从服务器端返回的请求结果二、2XX成功1、200 OK2、204 No Content3、206 Partial Content 三、3XX重定向1、301 Moved Permanently2、302 Found3、303 See Other4、304 Not Modified5、307 Temporary Redirect 四、4XX客户端错误1、400 Bad Request2、401 U…

c++11 标准模板(STL)(std::basic_ifstream)(三)

定义于头文件 <fstream> template< class CharT, class Traits std::char_traits<CharT> > class basic_ifstream : public std::basic_istream<CharT, Traits> 类模板 basic_ifstream 实现文件流上的高层输入操作。它将 std::basic_istrea…

大模型开发(十五):从0到1构建一个高度自动化的AI项目开发流程(上)

全文共5600余字&#xff0c;预计阅读时间约13~20分钟 | 满满干货(附全部代码)&#xff0c;建议收藏&#xff01; 本文目标&#xff1a;提出一种利用大语言模型(LLMs)加快项目的开发效率的解决思路&#xff0c;本文作为第一部分&#xff0c;主要集中在如何完整的执行引导Chat模…

无涯教程-jQuery - scrollTop( val )方法函数

scrollTop(val)方法用于将滚动顶部偏移量设置为所有匹配元素上的传递值。 scrollTop( val ) - 语法 selector.scrollTop( val ) 这是此方法使用的所有参数的描述- val - 代表所需滚动顶部偏移的正数。 scrollTop( val ) - 示例 以下是一个简单的示例&#xff0c;简单…

DLMS协议开发指引

1 进入DLMS模式 某些电表一开始未进入DLMS传送模式&#xff0c;需要进行切换。按照IEC62056-21协议模式E的规定&#xff0c;先发送以下内容&#xff1a; 典型的串口设置为&#xff1a;波特率300&#xff0c;校验位Even&#xff0c;数据位7。&#xff08;也可校验位无&#xff…

插入排序算法

插入排序 算法说明与代码实现&#xff1a; 以下是使用Go语言实现的插入排序算法示例代码&#xff1a; package mainimport "fmt"func insertionSort(arr []int) {n : len(arr)for i : 1; i < n; i {key : arr[i]j : i - 1for j > 0 && arr[j] > …

CentOS 7虚拟机 虚拟机安装安装增强VBox_GAs_6.1.22失败:modprobe vboxguest failed

我安装的CentOS 在安装增强工具的时候报错: 查阅资料后 &#xff0c;解决方法&#xff1a; 1、更新kernel内核版本&#xff1a; yum update kernel -y //安装kernel-devel和gcc编译工具链yum install -y kernel-devel gcc//更新kernel和kernel-devel到最新版本yum -y upgrade …

Android 卡顿分析与布局优化

一、什么是卡顿&#xff1f;或者说我们怎么感知APP卡顿&#xff1f; 这里面涉及到android UI渲染机制&#xff0c;我们先了解一下android UI是怎么渲染的&#xff0c;android的View到底是如何一步一步显示到屏幕上的&#xff1f; android系统渲染页面流程&#xff1a; 1&…